From f4fc47c6d0839f5c73dc26c93ec077393c877575 Mon Sep 17 00:00:00 2001
From: Enzo Vezzaro <enzo-vezzaro@live.it>
Date: Mon, 30 May 2022 09:44:23 -0400
Subject: [PATCH] added AddToken story (needs improvements)

---
 .../@shared/AddToken/index.stories.tsx        | 31 +++++++++++++++++++
 src/components/@shared/AddToken/index.tsx     | 26 +++++++++-------
 .../Asset/AssetContent/MetaMain/MetaAsset.tsx |  3 +-
 src/components/Header/Wallet/Details.tsx      |  1 +
 4 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 src/components/@shared/AddToken/index.stories.tsx

diff --git a/src/components/@shared/AddToken/index.stories.tsx b/src/components/@shared/AddToken/index.stories.tsx
new file mode 100644
index 000000000..9c5962e8d
--- /dev/null
+++ b/src/components/@shared/AddToken/index.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import AddToken, { AddTokenProps } from '@shared/AddToken'
+
+export default {
+  title: 'Component/@shared/AddToken',
+  component: AddToken
+} as ComponentMeta<typeof AddToken>
+
+const Template: ComponentStory<typeof AddToken> = (args: AddTokenProps) => (
+  <AddToken {...args} />
+)
+
+interface Props {
+  args: AddTokenProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  address: '0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8',
+  symbol: 'OCEAN',
+  logo: 'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/datatoken.png'
+}
+
+export const Minimal: Props = Template.bind({})
+Minimal.args = {
+  address: '0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8',
+  symbol: 'OCEAN',
+  logo: 'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/datatoken.png',
+  minimal: true
+}
diff --git a/src/components/@shared/AddToken/index.tsx b/src/components/@shared/AddToken/index.tsx
index 908af5db1..caa1a4955 100644
--- a/src/components/@shared/AddToken/index.tsx
+++ b/src/components/@shared/AddToken/index.tsx
@@ -1,29 +1,31 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import { addTokenToWallet } from '@utils/web3'
-import { useWeb3 } from '@context/Web3'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
+import { IProviderInfo } from 'web3modal'
 
 const cx = classNames.bind(styles)
 
+export interface AddTokenProps {
+  address: string
+  symbol: string
+  logo: string // needs to be a remote image
+  text?: string
+  className?: string
+  minimal?: boolean
+  web3Provider: IProviderInfo
+}
+
 export default function AddToken({
   address,
   symbol,
   logo,
   text,
   className,
-  minimal
-}: {
-  address: string
-  symbol: string
-  logo: string // needs to be a remote image
-  text?: string
-  className?: string
-  minimal?: boolean
-}): ReactElement {
-  const { web3Provider } = useWeb3()
-
+  minimal,
+  web3Provider
+}: AddTokenProps): ReactElement {
   const styleClasses = cx({
     button: true,
     minimal,
diff --git a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
index 295c0cfea..9deca7fce 100644
--- a/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
+++ b/src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
@@ -15,7 +15,7 @@ export default function MetaAsset({
   isBlockscoutExplorer: boolean
 }): ReactElement {
   const { isAssetNetwork } = useAsset()
-  const { web3ProviderInfo } = useWeb3()
+  const { web3Provider, web3ProviderInfo } = useWeb3()
 
   const dataTokenSymbol = asset?.datatokens[0]?.symbol
 
@@ -45,6 +45,7 @@ export default function MetaAsset({
               text={`Add ${(asset as Asset)?.datatokens[0]?.symbol} to wallet`}
               className={styles.add}
               minimal
+              web3Provider={web3Provider}
             />
           </span>
         )}
diff --git a/src/components/Header/Wallet/Details.tsx b/src/components/Header/Wallet/Details.tsx
index a786570ae..031597ec1 100644
--- a/src/components/Header/Wallet/Details.tsx
+++ b/src/components/Header/Wallet/Details.tsx
@@ -92,6 +92,7 @@ export default function Details(): ReactElement {
                 symbol={oceanTokenMetadata?.symbol}
                 logo="https://raw.githubusercontent.com/oceanprotocol/art/main/logo/token.png"
                 className={styles.addToken}
+                web3Provider={web3Provider}
               />
             )}
           </div>