handle different tokens (filecoin)

.storybook/main.ts

@@ -1,55 +1,63 @@
 require('dotenv').config()
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const webpack = require('webpack');
-const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+const webpack = require('webpack')
+const path = require('path')
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
   addons: ['@storybook/addon-essentials', 'storybook-css-modules-preset'],
   env: (config) => ({
     ...config,
-    UPLOADER_URL: process.env.UPLOADER_URL, 
+    UPLOADER_URL: process.env.UPLOADER_URL,
     UPLOADER_ACCOUNT: process.env.UPLOADER_ACCOUNT,
     PUBLIC_INFURA_PROJECT_ID: process.env.PUBLIC_INFURA_PROJECT_ID,
-    PUBLIC_WALLETCONNECT_PROJECT_ID: process.env.PUBLIC_WALLETCONNECT_PROJECT_ID,
+    ENABLE_DEVELOPMENT: process.env.ENABLE_DEVELOPMENT,
+    PUBLIC_WALLETCONNECT_PROJECT_ID: process.env.PUBLIC_WALLETCONNECT_PROJECT_ID
   }),
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
-  webpackFinal: async config => {
-    config.resolve.plugins = [...(config.resolve.plugins || []), new TsconfigPathsPlugin({
-      extensions: config.resolve.extensions
-    })];
+  webpackFinal: async (config) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions
+      })
+    ]
 
     config.module.rules.push({
       test: /\.module\.css$/,
       exclude: /\.module\.css$/,
       use: ['style-loader', 'css-loader'],
-      include: path.resolve(__dirname, './'),
-    });
+      include: path.resolve(__dirname, './')
+    })
 
     // Mimic next.config.js webpack config
     config.module.rules.push({
       test: /\.gif$/,
       // yay for webpack 5
       // https://webpack.js.org/guides/asset-management/#loading-images
       type: 'asset/resource'
-    });
+    })
 
     // Modify storybook's file-loader rule to avoid conflicts with svgr
-    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
-    fileLoaderRule.exclude = /\.svg$/;
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.svg')
+    )
+    fileLoaderRule.exclude = /\.svg$/
     config.module.rules.push({
       test: /\.svg$/,
       issuer: /\.(tsx|ts)$/,
-      use: [{
-        loader: require.resolve('@svgr/webpack'),
-        options: {
-          icon: true
+      use: [
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            icon: true
+          }
         }
-      }]
-    });
-    const fallback = config.resolve.fallback || {};
+      ]
+    })
+    const fallback = config.resolve.fallback || {}
     Object.assign(fallback, {
       http: require.resolve('stream-http'),
       https: require.resolve('https-browserify'),
@@ -61,15 +69,17 @@ module.exports = {
       zlib: false,
       net: false,
       tls: false
-    });
-    config.resolve.fallback = fallback;
-    config.plugins = (config.plugins || []).concat([new webpack.ProvidePlugin({
-      process: 'process/browser',
-      Buffer: ['buffer', 'Buffer']
-    })]);
-    return config;
+    })
+    config.resolve.fallback = fallback
+    config.plugins = (config.plugins || []).concat([
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+        Buffer: ['buffer', 'Buffer']
+      })
+    ])
+    return config
   },
   docs: {
     autodocs: false
   }
-};
+}

README.md

@@ -58,7 +58,7 @@ Integrating Uploader UI into your application is straightforward. The package fa
 npm install connectkit @oceanprotocol/uploader-ui-lib
 ```
 
-**Step 2:** Incorporate the DBSComponent from the uploader-ui-lib into your app. It's crucial to ensure the component is nested within both the WagmiConfig and ConnectKit providers. Here's a basic implementation:
+**Step 2:** Incorporate the UploaderConnection from the uploader-ui-lib into your app. It's crucial to ensure the component is nested within both the WagmiConfig and ConnectKit providers. Here's a basic implementation:
 
 ```bash
 import React from 'react'
@@ -69,7 +69,7 @@ import {
   getDefaultConfig,
   ConnectKitButton
 } from 'connectkit'
-import DBSComponent from 'uploader-ui-lib'
+import UploaderConnection from 'uploader-ui-lib'
 
 export default function App () {
   // Initialize the Wagmi client
@@ -87,7 +87,7 @@ export default function App () {
       <ConnectKitProvider>
         {/* Your App */}
         <ConnectKitButton />
-        <DBSComponent
+        <UploaderConnection
           dbs_url="https://dbs.oceanprotocol.com"
           dbs_account="0x21F2B4d705aC448c9Ff96694Dd9e5901F79f1Ab2"
         />
@@ -107,7 +107,7 @@ import React from 'react'
 import { WagmiConfig, createConfig } from 'wagmi'
 import { polygon } from 'wagmi/chains'
 import { RainbowKitProvider, ConnectButton } from '@rainbow-me/rainbowkit';
-import DBSComponent from 'uploader-ui-lib'
+import UploaderConnection from 'uploader-ui-lib'
 
 export default function App () {
   // Initialize the Wagmi client
@@ -125,7 +125,7 @@ export default function App () {
       <RainbowKitProvider>
         {/* Your App */}
         <ConnectButton />
-        <DBSComponent
+        <UploaderConnection
           dbs_url="https://dbs.oceanprotocol.com"
           dbs_account="0x21F2B4d705aC448c9Ff96694Dd9e5901F79f1Ab2"
         />

src/components/TabsFile/index.tsx

@@ -4,7 +4,7 @@ import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
 import Tooltip from '../Tooltip'
 import styles from './index.module.css'
 import FileUploadSingle from '../FileUploadSingle'
-import { useAccount, useNetwork, useContractRead } from 'wagmi'
+import { useAccount, useNetwork, useContractRead, useToken } from 'wagmi'
 import { switchNetwork } from '@wagmi/core'
 import Button from '../Button'
 import {
@@ -18,12 +18,11 @@ import { formatEther } from '@ethersproject/units'
 import HistoryList from '../HistoryList'
 import { addEllipsesToText } from '../../@utils/textFormat'
 import { getStatusMessage } from '../../@utils/statusCode'
-import wMaticAbi from '../WrapMatic/wMaticAbi.json'
 import WrapMatic from '../WrapMatic'
 import InputGroup from '../Input/InputGroup'
 import DefaultInput from '../Input'
 import { TabsProps } from '../../@types/TabsFile'
-
+import wMaticAbi from '../WrapMatic/wMaticAbi.json'
 export default function TabsFile({
   items,
   className,
@@ -56,18 +55,19 @@ export default function TabsFile({
   const [historyLoading, setHistoryLoading] = useState(false)
 
   const { data: balanceData } = useContractRead({
-    address:
-      chain?.id === 80001
-        ? '0x9c3C9283D3e44854697Cd22D3Faa240Cfb032889'
-        : '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270',
-    abi: wMaticAbi,
+    address: paymentSelected as `0x${string}`,
     functionName: 'balanceOf',
+    abi: wMaticAbi,
     args: [address]
   })
 
-  console.log('Check if user has wrapped matic in their wallet')
-  const wmaticBalance = BigInt((balanceData as number) || 0)
-  console.log('balance wmatic: ', balanceData)
+  const { data: tokenInfo } = useToken({
+    address: paymentSelected as `0x${string}`
+  })
+
+  console.log('Check if user has enought tokens in their wallet')
+  const tokenBalance = BigInt((balanceData as number) || 0)
+
   // Mocked data quote
   const [quote, setQuote] = useState<any>()
   const [quoteWithBuffer, setQuoteWithBuffer] = useState<string>()
@@ -228,11 +228,16 @@ export default function TabsFile({
 
       setQuoteWithBuffer(String(newQuoteFee))
       // Check if user has wrapped matic in their wallet
-      if (wmaticBalance < newQuoteFee) {
-        console.log('User does not have enough wMatic')
+      // ensure we can handle tokens with different decimals
+      const formatedQuote = Number(newQuoteFee) / 10 ** 18 // quote is always 18 decimals
+      const formatedBalance =
+        Number(tokenBalance) / 10 ** (tokenInfo?.decimals || 18)
+      // FOR TESTING: const normalizedBalance = parseEther(formatedBalance.toString()).toString()
+      if (formatedBalance < formatedQuote) {
+        console.log('User does not have tokens')
         setStep('wrapMatic')
       } else {
-        console.log('User has enough wMatic')
+        console.log('User has enough tokens')
         setStep('upload')
       }
     } catch (error) {
@@ -583,6 +588,7 @@ export default function TabsFile({
                       setStep={setStep}
                       amount={BigInt(quoteWithBuffer as string)}
                       name={item.type}
+                      payment={paymentSelected as `0x${string}`}
                       handleFileChange={handleFileChange}
                       handleUpload={handleUpload}
                       file={file}

src/components/UploaderConnection/index.stories.tsx

@@ -21,7 +21,7 @@ export default {
 } as Meta<typeof UploaderConnection>
 
 const Template: StoryFn<typeof UploaderConnection> = (args) => {
-  // Initialize the Wagmi client
+  // initialize the Wagmi client
   const wagmiConfig = createConfig(
     getDefaultConfig({
       appName: 'Ocean Uploader UI',

src/components/WrapMatic/index.tsx

@@ -5,7 +5,6 @@ import {
   usePrepareContractWrite,
   useContractWrite,
   useWaitForTransaction,
-  useNetwork,
   useAccount,
   useBalance
 } from 'wagmi'
@@ -15,6 +14,7 @@ interface WrapMaticProps {
   setStep: (step: string) => void
   amount: bigint
   name?: string
+  payment?: `0x${string}`
   handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void
   handleUpload: () => void
   file?: File
@@ -24,18 +24,14 @@ export default function WrapMatic(props: WrapMaticProps) {
   const [hideButton] = useState(false)
   const [error, setError] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
-  const { chain } = useNetwork()
   const { address } = useAccount()
 
   const { data: balanceWallet, isSuccess: balanceSuccess } = useBalance({
     address: address
   })
 
   const { config } = usePrepareContractWrite({
-    address:
-      chain?.id === 80001
-        ? '0x9c3C9283D3e44854697Cd22D3Faa240Cfb032889'
-        : '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270',
+    address: props.payment as `0x${string}`,
     abi: wMaticAbi,
     functionName: 'deposit',
     value: props.amount