From 3af788656509a879996950c8a5867fe5b5a8f905 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Wed, 25 Oct 2023 15:25:28 -0400 Subject: [PATCH 01/12] handle different tokens (filecoin) --- src/components/TabsFile/index.tsx | 28 ++++++++++++++++------------ src/components/WrapMatic/index.tsx | 7 ++----- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index dbded0f..c461023 100644 --- a/src/components/TabsFile/index.tsx +++ b/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,7 +18,6 @@ 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' @@ -56,18 +55,18 @@ 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', args: [address] }) + const { data: tokenInfo } = useToken({ + address: paymentSelected as `0x${string}` + }) + console.log('Check if user has wrapped matic in their wallet') - const wmaticBalance = BigInt((balanceData as number) || 0) - console.log('balance wmatic: ', balanceData) + const tokenBalance = BigInt((balanceData as number) || 0) + console.log('balance token: ', balanceData) // Mocked data quote const [quote, setQuote] = useState() const [quoteWithBuffer, setQuoteWithBuffer] = useState() @@ -230,11 +229,15 @@ 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 formatedBalance = + Number(tokenBalance) / 10 ** (tokenInfo?.decimals || 18) + const formatedQuote = Number(newQuoteFee) / 10 ** 18 // quote is always 18 decimals + 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) { @@ -574,6 +577,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} diff --git a/src/components/WrapMatic/index.tsx b/src/components/WrapMatic/index.tsx index c892c20..ca88d6c 100644 --- a/src/components/WrapMatic/index.tsx +++ b/src/components/WrapMatic/index.tsx @@ -15,6 +15,7 @@ interface WrapMaticProps { setStep: (step: string) => void amount: bigint name?: string + payment?: `0x${string}` handleFileChange: (e: ChangeEvent) => void handleUpload: () => void file?: File @@ -24,7 +25,6 @@ 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({ @@ -32,10 +32,7 @@ export default function WrapMatic(props: WrapMaticProps) { }) const { config } = usePrepareContractWrite({ - address: - chain?.id === 80001 - ? '0x9c3C9283D3e44854697Cd22D3Faa240Cfb032889' - : '0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270', + address: props.payment as `0x${string}`, abi: wMaticAbi, functionName: 'deposit', value: props.amount From ba808fcf3c89758a8169d90ac2dbdf9a712cd9f1 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 08:27:48 -0400 Subject: [PATCH 02/12] fix tests --- src/components/WrapMatic/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/WrapMatic/index.tsx b/src/components/WrapMatic/index.tsx index ca88d6c..30cf574 100644 --- a/src/components/WrapMatic/index.tsx +++ b/src/components/WrapMatic/index.tsx @@ -5,7 +5,6 @@ import { usePrepareContractWrite, useContractWrite, useWaitForTransaction, - useNetwork, useAccount, useBalance } from 'wagmi' From 706cf398d3c1a145472be1e723a3edf9bd77db13 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 09:00:22 -0400 Subject: [PATCH 03/12] fix check leftover --- src/components/TabsFile/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index c461023..21716c2 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -233,7 +233,9 @@ export default function TabsFile({ const formatedBalance = Number(tokenBalance) / 10 ** (tokenInfo?.decimals || 18) const formatedQuote = Number(newQuoteFee) / 10 ** 18 // quote is always 18 decimals - if (formatedBalance > formatedQuote) { + console.log(formatedBalance, formatedQuote) + + if (formatedBalance < formatedQuote) { console.log('User does not have tokens') setStep('wrapMatic') } else { From 90ad00987fc252e83cd985f5a54cc2f6f739c225 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 09:01:40 -0400 Subject: [PATCH 04/12] remove log --- src/components/TabsFile/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 21716c2..917370e 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -233,8 +233,6 @@ export default function TabsFile({ const formatedBalance = Number(tokenBalance) / 10 ** (tokenInfo?.decimals || 18) const formatedQuote = Number(newQuoteFee) / 10 ** 18 // quote is always 18 decimals - console.log(formatedBalance, formatedQuote) - if (formatedBalance < formatedQuote) { console.log('User does not have tokens') setStep('wrapMatic') From ccd5e46b17d0c17bb20cf707436d2ff78a9d3ffd Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 09:23:40 -0400 Subject: [PATCH 05/12] test preview --- src/components/UploaderConnection/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UploaderConnection/index.stories.tsx b/src/components/UploaderConnection/index.stories.tsx index a1cb818..b3d7afc 100644 --- a/src/components/UploaderConnection/index.stories.tsx +++ b/src/components/UploaderConnection/index.stories.tsx @@ -21,7 +21,7 @@ export default { } as Meta const Template: StoryFn = (args) => { - // Initialize the Wagmi client + // initialize the Wagmi client const wagmiConfig = createConfig( getDefaultConfig({ appName: 'Ocean Uploader UI', From 0d427cb0e100169d8aba968eaabe77934e3a5672 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 09:29:30 -0400 Subject: [PATCH 06/12] added env var to storybook --- .storybook/main.ts | 68 ++++++++++++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 0ae3a1f..d98dad3 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,32 +1,36 @@ 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({ @@ -34,22 +38,26 @@ module.exports = { // 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 } -}; \ No newline at end of file +} From 720076cab85a8f4f148dfa59f1f314d9f92922bd Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 11:41:20 -0400 Subject: [PATCH 07/12] restore wmatic abi --- src/components/TabsFile/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 917370e..501ddd5 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -22,7 +22,7 @@ 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, @@ -57,14 +57,20 @@ export default function TabsFile({ const { data: balanceData } = useContractRead({ address: paymentSelected as `0x${string}`, functionName: 'balanceOf', + abi: wMaticAbi, args: [address] }) + console.log(balanceData, paymentSelected, address) + useEffect(() => { + console.log(balanceData) + }, [balanceData]) + const { data: tokenInfo } = useToken({ address: paymentSelected as `0x${string}` }) - console.log('Check if user has wrapped matic in their wallet') + console.log('Check if user has enought tokens in their wallet') const tokenBalance = BigInt((balanceData as number) || 0) console.log('balance token: ', balanceData) // Mocked data quote From 213ced290087dc6b43c1de5ae5fa0ebbc56a1fe7 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 12:21:59 -0400 Subject: [PATCH 08/12] remove extra buffer allocation for tokens 6 digits --- src/components/TabsFile/index.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 501ddd5..fe4826a 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -14,7 +14,7 @@ import { GetStatusResult } from '@oceanprotocol/uploader' import Networks from '../Networks' -import { formatEther } from '@ethersproject/units' +import { formatEther, parseEther } from '@ethersproject/units' import HistoryList from '../HistoryList' import { addEllipsesToText } from '../../@utils/textFormat' import { getStatusMessage } from '../../@utils/statusCode' @@ -61,18 +61,13 @@ export default function TabsFile({ args: [address] }) - console.log(balanceData, paymentSelected, address) - useEffect(() => { - console.log(balanceData) - }, [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) - console.log('balance token: ', balanceData) + // Mocked data quote const [quote, setQuote] = useState() const [quoteWithBuffer, setQuoteWithBuffer] = useState() @@ -230,15 +225,15 @@ export default function TabsFile({ console.log('quote tokenAmount', quote) // Add buffer to the quote amount - const newQuoteFee = - BigInt(quoteResult.tokenAmount) + BigInt(50000000000000000) + const newQuoteFee = BigInt(quoteResult.tokenAmount) setQuoteWithBuffer(String(newQuoteFee)) // Check if user has wrapped matic in their wallet // 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) - const formatedQuote = Number(newQuoteFee) / 10 ** 18 // quote is always 18 decimals + // FOR TESTING: const normalizedBalance = parseEther(formatedBalance.toString()).toString() if (formatedBalance < formatedQuote) { console.log('User does not have tokens') setStep('wrapMatic') From 7bca73c53da003e5e96766ba72e309c6a626213b Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Thu, 26 Oct 2023 12:25:44 -0400 Subject: [PATCH 09/12] fix ci --- src/components/TabsFile/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index fe4826a..667988b 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -14,7 +14,7 @@ import { GetStatusResult } from '@oceanprotocol/uploader' import Networks from '../Networks' -import { formatEther, parseEther } from '@ethersproject/units' +import { formatEther } from '@ethersproject/units' import HistoryList from '../HistoryList' import { addEllipsesToText } from '../../@utils/textFormat' import { getStatusMessage } from '../../@utils/statusCode' From b092c706fb2b994fad70614230e843bbffe14b88 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Fri, 27 Oct 2023 08:40:29 -0400 Subject: [PATCH 10/12] update example env --- .example.env | 1 + 1 file changed, 1 insertion(+) diff --git a/.example.env b/.example.env index 3543a3b..6577244 100644 --- a/.example.env +++ b/.example.env @@ -5,3 +5,4 @@ PUBLIC_WALLETCONNECT_PROJECT_ID="" # DBS UPLOADER_URL="" UPLOADER_ACCOUNT="" +ENABLE_DEVELOPMENT="" From f170d003329df97e001da1399adc5df2027bd5ae Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Fri, 27 Oct 2023 08:40:35 -0400 Subject: [PATCH 11/12] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a552255..3a59597 100644 --- a/README.md +++ b/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 () { {/* Your App */} - @@ -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 () { {/* Your App */} - From 3ac2205b734f6d09ffb65a7d9f99e556e6f3d292 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Mon, 30 Oct 2023 08:39:42 -0400 Subject: [PATCH 12/12] restore buffer --- src/components/TabsFile/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 667988b..f37612f 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -225,7 +225,8 @@ export default function TabsFile({ console.log('quote tokenAmount', quote) // Add buffer to the quote amount - const newQuoteFee = BigInt(quoteResult.tokenAmount) + const newQuoteFee = + BigInt(quoteResult.tokenAmount) + BigInt(50000000000000000) setQuoteWithBuffer(String(newQuoteFee)) // Check if user has wrapped matic in their wallet