From fdd58929b93aa7e4ba590205a776c53b013d56da Mon Sep 17 00:00:00 2001
From: Raul Glogovetan <raul@glogovetan.com>
Date: Wed, 15 Dec 2021 16:19:41 +0200
Subject: [PATCH 1/2] Add: "Add to wallet" controls on Token info popover

---
 .../components/InfoPopover/InfoPopover.css    |  4 +++
 .../InfoPopover/InfoPopover.css.d.ts          |  1 +
 .../core/components/InfoPopover/TokenInfo.tsx | 32 +++++++++++++++++--
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/modules/core/components/InfoPopover/InfoPopover.css b/src/modules/core/components/InfoPopover/InfoPopover.css
index cfc2541300..48975ce556 100644
--- a/src/modules/core/components/InfoPopover/InfoPopover.css
+++ b/src/modules/core/components/InfoPopover/InfoPopover.css
@@ -106,3 +106,7 @@
   width: 100%;
   overflow: hidden;
 }
+
+.addToWallet {
+  float: right;
+}
diff --git a/src/modules/core/components/InfoPopover/InfoPopover.css.d.ts b/src/modules/core/components/InfoPopover/InfoPopover.css.d.ts
index 5aa226fa28..ad3aab6d48 100644
--- a/src/modules/core/components/InfoPopover/InfoPopover.css.d.ts
+++ b/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;
diff --git a/src/modules/core/components/InfoPopover/TokenInfo.tsx b/src/modules/core/components/InfoPopover/TokenInfo.tsx
index b1454ac8e9..3aac892818 100644
--- a/src/modules/core/components/InfoPopover/TokenInfo.tsx
+++ b/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>
   );

From fe0ff3c65b1160adf92be39752017178f7b8631a Mon Sep 17 00:00:00 2001
From: ArmandoGraterol <armandogrtrl@gmail.com>
Date: Mon, 20 Dec 2021 17:08:25 -0300
Subject: [PATCH 2/2] Added token info popover to TokenCard and TokensTab

---
 .../components/TokenCard/TokenCard.css        |  1 +
 .../components/TokenCard/TokenCard.tsx        | 40 ++++++++-------
 .../TokenActivationContent.css                |  1 +
 .../TokenActivationContent/TokensTab.tsx      | 49 ++++++++++---------
 4 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/src/modules/dashboard/components/TokenCard/TokenCard.css b/src/modules/dashboard/components/TokenCard/TokenCard.css
index 6f10424109..3b73385bfc 100644
--- a/src/modules/dashboard/components/TokenCard/TokenCard.css
+++ b/src/modules/dashboard/components/TokenCard/TokenCard.css
@@ -11,6 +11,7 @@
   display: flex;
   align-items: center;
   height: headerFooterHeights;
+  cursor: pointer;
 }
 
 .iconContainer {
diff --git a/src/modules/dashboard/components/TokenCard/TokenCard.tsx b/src/modules/dashboard/components/TokenCard/TokenCard.tsx
index 5cd8e9e55d..7efb32c319 100644
--- a/src/modules/dashboard/components/TokenCard/TokenCard.tsx
+++ b/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))
diff --git a/src/modules/users/components/TokenActivation/TokenActivationContent/TokenActivationContent.css b/src/modules/users/components/TokenActivation/TokenActivationContent/TokenActivationContent.css
index 3f8151e306..538cef21a2 100644
--- a/src/modules/users/components/TokenActivation/TokenActivationContent/TokenActivationContent.css
+++ b/src/modules/users/components/TokenActivation/TokenActivationContent/TokenActivationContent.css
@@ -54,6 +54,7 @@
   padding: 16px;
   min-height: 60px;
   width: 100%;
+  cursor: pointer;
 }
 
 .tokenSymbol {
diff --git a/src/modules/users/components/TokenActivation/TokenActivationContent/TokensTab.tsx b/src/modules/users/components/TokenActivation/TokenActivationContent/TokensTab.tsx
index 941f53ed46..8c2c015e42 100644
--- a/src/modules/users/components/TokenActivation/TokenActivationContent/TokensTab.tsx
+++ b/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>