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 +} 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 */} - diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 8535506..89b9b10 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,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() const [quoteWithBuffer, setQuoteWithBuffer] = useState() @@ -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} 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', diff --git a/src/components/WrapMatic/index.tsx b/src/components/WrapMatic/index.tsx index c892c20..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' @@ -15,6 +14,7 @@ interface WrapMaticProps { setStep: (step: string) => void amount: bigint name?: string + payment?: `0x${string}` handleFileChange: (e: ChangeEvent) => void handleUpload: () => void file?: File @@ -24,7 +24,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 +31,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