Add custom token from the wallet (#437)

* WIP

* added button that allows to push custom token to metamask

* added image url

* use provider from ocean, add mOCEAN symbol to Matic

* use token symbol based on networkId

* removed customToken.json, used Logger to display message

* log error

* fixed log

* review fixes

* used oceanTokenSymbol from config

* getOceanConfig fix

src/components/molecules/Wallet/Details.module.css

@@ -75,3 +75,12 @@
   margin-top: calc(var(--spacer) / 4);
   min-width: 6rem;
 }
+
+.walletInfo{
+  display: flex;
+  flex-direction: column;
+}
+
+.walletInfo button{
+  margin-top: calc(var(--spacer) / 5) !important;
+}

src/components/molecules/Wallet/Details.tsx

@@ -8,10 +8,11 @@ import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import { useWeb3 } from '../../../providers/Web3'
+import { Logger } from '@oceanprotocol/lib'
 
 export default function Details(): ReactElement {
-  const { web3Provider, connect, logout, networkData, networkId } = useWeb3()
+  const { web3Provider, connect, logout, networkData } = useWeb3()
-  const { balance } = useOcean()
+  const { balance, config } = useOcean()
   const { locale } = useUserPreferences()
 
   const [providerInfo, setProviderInfo] = useState<IProviderInfo>()
@@ -26,6 +27,39 @@ export default function Details(): ReactElement {
     setProviderInfo(providerInfo)
   }, [web3Provider])
 
+  async function addOceanToWallet() {
+    const tokenMetadata = {
+      type: 'ERC20',
+      options: {
+        address: config.oceanTokenAddress,
+        symbol: config.oceanTokenSymbol,
+        decimals: 18,
+        image:
+          'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png'
+      }
+    }
+    web3Provider.sendAsync(
+      {
+        method: 'wallet_watchAsset',
+        params: tokenMetadata,
+        id: Math.round(Math.random() * 100000)
+      },
+      (err: string, added: any) => {
+        if (err || 'error' in added) {
+          Logger.error(
+            `Couldn't add ${tokenMetadata.options.symbol} (${
+              tokenMetadata.options.address
+            }) to MetaMask, error: ${err || added.error}`
+          )
+        } else {
+          Logger.log(
+            `Added ${tokenMetadata.options.symbol} (${tokenMetadata.options.address}) to MetaMask`
+          )
+        }
+      }
+    )
+  }
+
   useEffect(() => {
     if (!networkData) return
 
@@ -48,11 +82,7 @@ export default function Details(): ReactElement {
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
             <span className={styles.symbol}>
-              {key === 'eth'
+              {key === 'eth' ? mainCurrency : config.oceanTokenSymbol}
-                ? mainCurrency
-                : key === 'ocean' && networkId === 137
-                ? 'mOCEAN'
-                : key.toUpperCase()}
             </span>{' '}
             {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
@@ -62,9 +92,11 @@ export default function Details(): ReactElement {
         ))}
 
         <li className={styles.actions}>
-          <span title="Connected provider">
+          <div title="Connected provider" className={styles.walletInfo}>
-            <img className={styles.walletLogo} src={providerInfo?.logo} />
+            <span>
-            {providerInfo?.name}
+              <img className={styles.walletLogo} src={providerInfo?.logo} />
+              {providerInfo?.name}
+            </span>
             {/* {providerInfo?.name === 'Portis' && (
               <InputElement
                 name="network"
@@ -75,7 +107,18 @@ export default function Details(): ReactElement {
                 onChange={handlePortisNetworkChange}
               />
             )} */}
-          </span>
+            {providerInfo?.name === 'MetaMask' && (
+              <Button
+                style="text"
+                size="small"
+                onClick={() => {
+                  addOceanToWallet()
+                }}
+              >
+                {`Add ${config.oceanTokenSymbol}`}
+              </Button>
+            )}
+          </div>
           <p>
             {providerInfo?.name === 'Portis' && (
               <Button

src/components/molecules/Wallet/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import Account from './Account'
 import Details from './Details'
 import Tooltip from '../../atoms/Tooltip'

src/providers/Ocean.tsx

@@ -21,7 +21,7 @@ const refreshInterval = 20000 // 20 sec.
 
 interface OceanProviderValue {
   ocean: Ocean
-  config: ConfigHelperConfig | Config
+  config: ConfigHelperConfig
   account: Account
   balance: UserBalance
   connect: (config?: Config) => Promise<void>

src/utils/ocean.ts

@@ -1,4 +1,4 @@
-import { Account, Config, Logger, Ocean } from '@oceanprotocol/lib'
+import { Account, Logger, Ocean } from '@oceanprotocol/lib'
 import contractAddresses from '@oceanprotocol/contracts/artifacts/address.json'
 import {
   ConfigHelper,
@@ -10,11 +10,11 @@ import { UserBalance } from '../@types/TokenBalance'
 
 export function getOceanConfig(
   network: ConfigHelperNetworkName | ConfigHelperNetworkId
-): Config {
+): ConfigHelperConfig {
   return new ConfigHelper().getConfig(
     network,
     process.env.GATSBY_INFURA_PROJECT_ID
-  )
+  ) as ConfigHelperConfig
 }
 
 export function getDevelopmentConfig(): Partial<ConfigHelperConfig> {