Explorable pool id on dashboard

app/components/wallet/staking/dashboard/StakePool.js

@@ -11,8 +11,12 @@ import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 
 import Card from './Card';
 // import ProgressCircle from './ProgressCircle';
-import Address from './Address';
+import type { Notification } from '../../../../types/notificationType';
+import CopyableAddress from '../../../widgets/CopyableAddress';
+import RawHash from '../../../widgets/hashWrappers/RawHash';
+import ExplorableHashContainer from '../../../../containers/widgets/ExplorableHashContainer';
 import styles from './StakePool.scss';
+import type { ExplorerType } from '../../../../domain/Explorer';
 // import globalMessages from '../../../../i18n/global-messages';
 
 const messages = defineMessages({
@@ -79,6 +83,9 @@ type Props = {|
   +poolName: string,
   +hash: string,
   +moreInfo: void | MoreInfoProp,
+  +selectedExplorer: ExplorerType,
+  +onCopyAddressTooltip: (string, string) => void,
+  +notification: ?Notification,
 |};
 
 @observer
@@ -136,6 +143,8 @@ export default class StakePool extends Component<Props> {
     //   },
     // ];
 
+    const poolIdNotificationId = 'poolId-copyNotification';
+
     return (
       <Card title={intl.formatMessage(messages.title)}>
         <div className={styles.head}>
@@ -144,7 +153,26 @@ export default class StakePool extends Component<Props> {
           </div>
           <div className={styles.userInfo}>
             <h3 className={styles.userTitle}>{poolName}</h3>
-            <Address hash={hash} />
+            <CopyableAddress
+              hash={hash.substring(0, 6) + '...' + hash.substring(hash.length - 6, hash.length)}
+              elementId={poolIdNotificationId}
+              onCopyAddress={() => this.props.onCopyAddressTooltip(hash, poolIdNotificationId)}
+              notification={this.props.notification}
+            >
+              <ExplorableHashContainer
+                selectedExplorer={this.props.selectedExplorer}
+                hash={hash}
+                light
+                linkType="pool"
+              >
+                <RawHash light>
+                  <span className={styles.hash}>{
+                    hash.substring(0, 6) + '...' + hash.substring(hash.length - 6, hash.length)
+                  }
+                  </span>
+                </RawHash>
+              </ExplorableHashContainer>
+            </CopyableAddress>
           </div>
         </div>
         <div className={styles.wrapper}>

app/components/wallet/staking/dashboard/StakePool.scss

@@ -63,10 +63,9 @@
 }
 
 .hash {
-    width: 125px;
+    max-width: 135px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline-block;
     color: var(--theme-dashboard-label-color);
     font-size: 14px;
     line-height: 22px;

app/containers/wallet/staking/StakingDashboardPage.js

@@ -18,6 +18,7 @@ import { digetForHash } from '../../../api/ada/lib/storage/database/primitives/a
 import { handleExternalLinkClick } from '../../../utils/routing';
 import { GetPoolInfoApiError } from '../../../api/ada/errors';
 import LocalizableError from '../../../i18n/LocalizableError';
+import config from '../../../config';
 
 import { formattedWalletAmount } from '../../../utils/formatters';
 
@@ -45,6 +46,7 @@ type Props = {
 
 type State = {|
   +currentTime: Date,
+  +notificationElementId: string,
 |};
 
 @observer
@@ -70,6 +72,7 @@ export default class StakingDashboardPage extends Component<Props, State> {
     this.currentSlotLength = await genCurrentSlotLength();
     this.currentEpochLength = await genCurrentEpochLength();
     this.setState({
+      notificationElementId: '',
       currentTime: new Date(),
     });
     this.intervalId = setInterval(
@@ -85,6 +88,9 @@ export default class StakingDashboardPage extends Component<Props, State> {
   }
 
   render() {
+    if (this.state == null) {
+      return null;
+    }
     const publicDeriver = this.props.stores.substores[environment.API].wallets.selected;
     if (publicDeriver == null) {
       throw new Error(`${nameof(StakingDashboardPage)} no public deriver. Should never happen`);
@@ -466,6 +472,12 @@ export default class StakingDashboardPage extends Component<Props, State> {
     if (delegationStore.stakingKeyState == null) {
       return { pools: [] };
     }
+    const tooltipNotification = {
+      duration: config.wallets.ADDRESS_COPY_TOOLTIP_NOTIFICATION_DURATION,
+      message: globalMessages.copyTooltipMessage,
+    };
+
+    const { uiNotifications, } = this.props.stores;
     const keyState = delegationStore.stakingKeyState;
     const { intl } = this.context;
     return {
@@ -500,9 +512,23 @@ export default class StakingDashboardPage extends Component<Props, State> {
             poolName={name}
             key={digetForHash(JSON.stringify(meta), 0)}
             data={stakePoolMeta}
+            selectedExplorer={this.props.stores.profile.selectedExplorer}
             hash={pool[0]}
             moreInfo={moreInfo}
             classicTheme={this.props.stores.profile.isClassicTheme}
+            onCopyAddressTooltip={(address, elementId) => {
+              if (!uiNotifications.isOpen(elementId)) {
+                this.setState({ notificationElementId: elementId });
+                this.props.actions.notifications.open.trigger({
+                  id: elementId,
+                  duration: tooltipNotification.duration,
+                  message: tooltipNotification.message,
+                });
+              }
+            }}
+            notification={uiNotifications.getTooltipActiveNotification(
+              this.state.notificationElementId
+            )}
           />
         );
       })