added AddToken story (needs improvements)

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
+}

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,

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>
         )}

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>