Add token info popover to Funding and Token Activation

src/modules/core/components/InfoPopover/InfoPopover.css

@@ -106,3 +106,7 @@
   width: 100%;
   overflow: hidden;
 }
+
+.addToWallet {
+  float: right;
+}

src/modules/core/components/InfoPopover/InfoPopover.css.d.ts

@@ -10,3 +10,4 @@ export const nativeTokenMessage: string;
 export const etherscanLink: string;
 export const container: string;
 export const textContainer: string;
+export const addToWallet: string;

src/modules/core/components/InfoPopover/TokenInfo.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { addToken } from '@purser/metamask/lib-esm/helpers';
+import { AddressZero } from 'ethers/constants';
 
 import CopyableAddress from '~core/CopyableAddress';
 import TokenLink from '~core/TokenLink';
+import Button from '~core/Button';
+
 import TokenIcon from '~dashboard/HookedTokenIcon';
 import { AnyToken } from '~data/index';
 import { DEFAULT_NETWORK_INFO } from '~constants';
@@ -18,6 +22,10 @@ const MSG = defineMessages({
     id: 'InfoPopover.TokenInfoPopover.TokenInfo.viewOnEtherscan',
     defaultMessage: 'View on {blockExplorerName}',
   },
+  addToWallet: {
+    id: 'InfoPopover.TokenInfoPopover.TokenInfo.addToWallet',
+    defaultMessage: 'Add token to Metamask',
+  },
 });
 
 interface Props {
@@ -28,7 +36,18 @@ interface Props {
 const displayName = 'InfoPopover.TokenInfoPopover.TokenInfo';
 
 const TokenInfo = ({ token, isTokenNative }: Props) => {
-  const { name, symbol, address } = token;
+  const { name, symbol, address, decimals } = token;
+
+  const handleAddAssetToMetamask = useCallback(
+    () =>
+      addToken({
+        address,
+        symbol,
+        decimals,
+      }),
+    [address, symbol, decimals],
+  );
+
   return (
     <div className={styles.main}>
       <div className={styles.section}>
@@ -65,6 +84,15 @@ const TokenInfo = ({ token, isTokenNative }: Props) => {
             blockExplorerName: DEFAULT_NETWORK_INFO.blockExplorerName,
           }}
         />
+        {address !== AddressZero && (
+          <span className={styles.addToWallet}>
+            <Button
+              appearance={{ theme: 'blue' }}
+              text={MSG.addToWallet}
+              onClick={handleAddAssetToMetamask}
+            />
+          </span>
+        )}
       </div>
     </div>
   );

src/modules/dashboard/components/TokenCard/TokenCard.css

@@ -11,6 +11,7 @@
   display: flex;
   align-items: center;
   height: headerFooterHeights;
+  cursor: pointer;
 }
 
 .iconContainer {

src/modules/dashboard/components/TokenCard/TokenCard.tsx

@@ -5,6 +5,7 @@ import Card from '~core/Card';
 import EthUsd from '~core/EthUsd';
 import Numeral from '~core/Numeral';
 import CopyableAddress from '~core/CopyableAddress';
+import InfoPopover from '~core/InfoPopover';
 import TokenIcon from '~dashboard/HookedTokenIcon';
 import { Address } from '~types/index';
 import { ColonyTokens, UserTokens } from '~data/index';
@@ -42,24 +43,29 @@ const TokenCard = ({ domainId, nativeTokenAddress, token }: Props) => {
 
   return (
     <Card key={token.address} className={styles.main}>
-      <div className={styles.cardHeading}>
-        <TokenIcon token={token} name={token.name || undefined} size="xs" />
-        <div className={styles.tokenSymbol}>
-          {token.symbol ? (
-            token.symbol
-          ) : (
-            <>
-              <FormattedMessage {...MSG.unknownToken} />
-              <CopyableAddress>{token.address}</CopyableAddress>
-            </>
-          )}
-          {token.address === nativeTokenAddress && (
-            <span className={styles.nativeTokenText}>
-              <FormattedMessage {...MSG.nativeToken} />
-            </span>
-          )}
+      <InfoPopover
+        token={token}
+        isTokenNative={token.address === nativeTokenAddress}
+      >
+        <div className={styles.cardHeading}>
+          <TokenIcon token={token} name={token.name || undefined} size="xs" />
+          <div className={styles.tokenSymbol}>
+            {token.symbol ? (
+              token.symbol
+            ) : (
+              <>
+                <FormattedMessage {...MSG.unknownToken} />
+                <CopyableAddress>{token.address}</CopyableAddress>
+              </>
+            )}
+            {token.address === nativeTokenAddress && (
+              <span className={styles.nativeTokenText}>
+                <FormattedMessage {...MSG.nativeToken} />
+              </span>
+            )}
+          </div>
         </div>
-      </div>
+      </InfoPopover>
       <div
         className={
           tokenBalanceIsNotPositive(token, parseInt(domainId as string, 10))

src/modules/users/components/TokenActivation/TokenActivationContent/TokenActivationContent.css

@@ -54,6 +54,7 @@
   padding: 16px;
   min-height: 60px;
   width: 100%;
+  cursor: pointer;
 }
 
 .tokenSymbol {

src/modules/users/components/TokenActivation/TokenActivationContent/TokensTab.tsx

@@ -4,6 +4,7 @@ import { BigNumber } from 'ethers/utils';
 
 import { SMALL_TOKEN_AMOUNT_FORMAT } from '~constants';
 import Icon from '~core/Icon';
+import InfoPopover from '~core/InfoPopover';
 import TokenIcon from '~dashboard/HookedTokenIcon';
 
 import { UserToken } from '~data/generated';
@@ -119,30 +120,32 @@ const TokensTab = ({
 
   return (
     <>
-      <div className={styles.totalTokensContainer}>
-        <div
-          className={
-            totalTokensWidth <= widthLimit
-              ? styles.tokenSymbol
-              : styles.tokenSymbolSmall
-          }
-        >
-          <TokenIcon
-            token={token || {}}
-            size={totalTokensWidth <= widthLimit ? 'xs' : 'xxs'}
-          />
+      <InfoPopover token={token} isTokenNative>
+        <div className={styles.totalTokensContainer}>
+          <div
+            className={
+              totalTokensWidth <= widthLimit
+                ? styles.tokenSymbol
+                : styles.tokenSymbolSmall
+            }
+          >
+            <TokenIcon
+              token={token || {}}
+              size={totalTokensWidth <= widthLimit ? 'xs' : 'xxs'}
+            />
+          </div>
+          <p
+            ref={targetRef}
+            className={
+              totalTokensWidth <= widthLimit
+                ? styles.totalTokens
+                : styles.totalTokensSmall
+            }
+          >
+            {formattedTotalAmount} <span>{token?.symbol}</span>
+          </p>
         </div>
-        <p
-          ref={targetRef}
-          className={
-            totalTokensWidth <= widthLimit
-              ? styles.totalTokens
-              : styles.totalTokensSmall
-          }
-        >
-          {formattedTotalAmount} <span>{token?.symbol}</span>
-        </p>
-      </div>
+      </InfoPopover>
       <div className={styles.tokensDetailsContainer}>
         <ul>
           <li>