Add kima bridge (#381)

* adding kima-transaction-widget to `Bridge` page * fix webpack config, apply plugins on external loader * update kima-widet integration * update npm access token * update npm access token * update npm access token * add backend url * upgrade widget version * * remove unused code * update backend url * success, error handlers as callback * * remove npm access token * refactor Kima component's props * small fix * add sendData * Update src/pages/gd/Bridge/index.tsx --------- Co-authored-by: Lewis B <[email protected]> Co-authored-by: sirpy <[email protected]>
GoodDollar · Mar 15, 2023 · 097c5ee · 097c5ee
1 parent d350332
commit 097c5ee
Show file tree

Hide file tree

Showing 12 changed files with 2,366 additions and 410 deletions.
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,7 +1,7 @@
 nodeLinker: node-modules
 
 plugins:
-    - path: .yarn/plugins/@yarnpkg/plugin-postinstall.cjs
-      spec: 'https://raw.githubusercontent.com/gravitywelluk/yarn-plugin-postinstall/master/bundles/%40yarnpkg/plugin-postinstall.js'
+  - path: .yarn/plugins/@yarnpkg/plugin-postinstall.cjs
+    spec: "https://raw.githubusercontent.com/gravitywelluk/yarn-plugin-postinstall/master/bundles/%40yarnpkg/plugin-postinstall.js"
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs
diff --git a/config-overrides.js b/config-overrides.js
@@ -5,10 +5,16 @@ const {
     override,
     addBabelPresets,
     addWebpackAlias,
+    addWebpackModuleRule,
 } = require('customize-cra')
 const path = require('path')
 
 module.exports = override(
+    addWebpackModuleRule({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+    }),
     addPostcssPlugins([require('tailwindcss'), require('postcss-preset-env')({ stage: 1 })]),
     ...addExternalBabelPlugins(
         'babel-plugin-react-native-web',

diff --git a/package.json b/package.json
@@ -212,6 +212,7 @@
     "@gooddollar/web3sdk": "^0.1.20",
     "@gooddollar/web3sdk-v2": "^0.1.85",
     "@headlessui/react": "1.5.0",
+    "@kimafinance/kima-transaction-widget": "^1.1.20-beta.1",
     "@types/react-text-mask": "^5.4.8",
     "@types/text-mask-addons": "^3.8.1",
     "@uniswap/sdk-core": "^3.0.0",

diff --git a/src/components/NetworkModal/index.tsx b/src/components/NetworkModal/index.tsx
@@ -67,6 +67,7 @@ export default function NetworkModal(): JSX.Element | null {
 
     const networkLabel: string | null = error ? null : (NETWORK_LABEL as any)[chainId]
     const network = getNetworkEnv()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const prodNetworks = process.env.REACT_APP_CELO_PHASE_1
         ? [AdditionalChainId.CELO, ChainId.MAINNET, AdditionalChainId.FUSE]
         : [ChainId.MAINNET, AdditionalChainId.FUSE]
@@ -79,7 +80,7 @@ export default function NetworkModal(): JSX.Element | null {
             default:
                 return prodNetworks
         }
-    }, [error, network])
+    }, [network, prodNetworks])
 
     const closeNetworkModal = useCallback(() => {
         setToAddNetwork(undefined)
@@ -102,7 +103,7 @@ export default function NetworkModal(): JSX.Element | null {
                 network: ChainId[chain],
             })
         },
-        [switchNetwork]
+        [switchNetwork, sendData, toggleNetworkModal]
     )
 
     return (

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -158,7 +158,7 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                 show: true,
             },
         ],
-        [i18n, process.env]
+        [i18n]
     )
 
     const internalLinks = useMemo(
@@ -183,6 +183,11 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                 text: 'Portfolio',
                 show: true,
             },
+            {
+                route: '/bridge',
+                text: 'Bridge',
+                show: true,
+            },
             {
                 route: '/microbridge',
                 text: 'Micro Bridge',
@@ -194,7 +199,7 @@ export default function SideBar({ mobile, closeSidebar }: { mobile?: boolean; cl
                 show: true,
             },
         ],
-        [i18n, process.env]
+        []
     )
 
     return (

diff --git a/src/hooks/useSendAnalyticsData.ts b/src/hooks/useSendAnalyticsData.ts
@@ -34,6 +34,7 @@ export interface IAnalyticsData {
     tokens?: [string | undefined, string | undefined]
     network?: string
     token?: string
+    error?: string
 }
 
 function useSendAnalyticsData(): (data: IAnalyticsData) => void {

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -66,7 +66,7 @@ function App(): JSX.Element {
 
     useEffect(() => {
         sendData({ event: 'goto_page', action: `goto_${pathname}` })
-    }, [pathname])
+    }, [pathname, sendData])
 
     useEffect(() => {
         const parsed = parse(search, { parseArrays: false, ignoreQueryPrefix: true })
@@ -87,7 +87,7 @@ function App(): JSX.Element {
         if (bodyRef.current) {
             bodyRef.current.scrollTo(0, 0)
         }
-    }, [pathname])
+    }, [/* used */ pathname])
 
     useEffect(() => {
         if (!search) return

diff --git a/src/pages/gd/Bridge/index.tsx b/src/pages/gd/Bridge/index.tsx
@@ -0,0 +1,54 @@
+import React, { memo, useCallback, useMemo } from 'react'
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useApplicationTheme } from 'state/application/hooks'
+import {
+    KimaTransactionWidget,
+    KimaProvider,
+    FontSizeOptions,
+    ColorModeOptions,
+    ModeOptions,
+    DAppOptions,
+} from '@kimafinance/kima-transaction-widget'
+import '@kimafinance/kima-transaction-widget/dist/index.css'
+import useSendAnalyticsData from 'hooks/useSendAnalyticsData'
+
+const Bridge = memo(() => {
+    const { library } = useActiveWeb3React()
+    const [theme] = useApplicationTheme()
+    const sendData = useSendAnalyticsData()
+
+    const successHandler = useCallback(() => {
+        sendData({ event: 'kima_bridge', action: 'bridge_success' })
+    }, [])
+
+    const errorHandler = useCallback((e) => {
+        console.log('Kima bridge error:', e?.message, e)
+        sendData({ event: 'kima_bridge', action: 'bridge_failure', error: e?.message })
+    }, [])
+
+    const options = useMemo(
+        () => ({
+            theme: {
+                colorMode: theme === 'light' ? ColorModeOptions.light : ColorModeOptions.dark,
+                fontSize: FontSizeOptions.medium,
+                fontFamily: 'Roboto',
+                backgroundColorDark: 'rgb(21, 26, 48)',
+            },
+            mode: ModeOptions.bridge,
+            dAppOption: DAppOptions.G$,
+            kimaBackendUrl: 'https://gooddollar-beta.kima.finance',
+            kimaNodeProviderQuery: 'https://api_testnet.kima.finance',
+            provider: library,
+            compliantOption: false,
+        }),
+        [theme, library]
+    )
+
+    return (
+        <KimaProvider>
+            <KimaTransactionWidget {...options} successHandler={successHandler} errorHandler={errorHandler} />
+        </KimaProvider>
+    )
+})
+
+export default Bridge
diff --git a/src/pages/gd/Claim/ClaimBalance.tsx b/src/pages/gd/Claim/ClaimBalance.tsx
@@ -53,7 +53,7 @@ export const ClaimBalance = ({ refresh }: { refresh: QueryParams['refresh'] }) =
                 toggleNetworkModal()
             }
         })
-    }, [switchNetwork, claimedAlt])
+    }, [switchNetwork, altChain, toggleNetworkModal])
 
     return (
         <View

diff --git a/src/pages/gd/Swap/SwapCore/index.tsx b/src/pages/gd/Swap/SwapCore/index.tsx
@@ -55,7 +55,7 @@ const SwapCore = memo(() => {
             token: network === 'FUSE' ? FUSE : ETHER,
             value: '',
         })
-    }, [chainId]) // on first render chainId is undefined
+    }, [/*used */ chainId, network]) // on first render chainId is undefined
 
     const handleSetPair = useCallback(
         (value: Partial<SwapVariant>) =>
@@ -65,7 +65,7 @@ const SwapCore = memo(() => {
             })),
         []
     )
-    const handleSetPairValue = useCallback((value: string) => handleSetPair({ value }), [])
+    const handleSetPairValue = useCallback((value: string) => handleSetPair({ value }), [handleSetPair])
     const handleBuyingValue = useCallback((value) => setBuying(!value), [])
 
     const tokenList = useTokens()
@@ -126,7 +126,7 @@ const SwapCore = memo(() => {
 
             buying && field === 'external' ? setCalcExternal(false) : setCalcInternal(false)
         }, 400))
-    }, [account, chainId, lastEdited, buying, web3, slippageTolerance.value])
+    }, [account, chainId, lastEdited, buying, web3, slippageTolerance.value, swapPair, swapValue, handleSetPairValue])
     const [approving, setApproving] = useState(false)
     const [showConfirm, setShowConfirm] = useState(false)
     const [approved, setApproved] = useState(false)
@@ -145,13 +145,14 @@ const SwapCore = memo(() => {
         }
     }
 
+    // eslint-disable-next-line react-hooks-addons/no-unused-deps
     useEffect(() => setApproved(false), [swapValue, swapPair, buying])
 
     const balanceNotEnough = useMemo(
         () =>
             BigInt(meta?.inputAmount.multiply(meta?.inputAmount.decimalScale).toFixed(0) ?? '0') >
             BigInt(buying ? pairBalance?.raw.toString() ?? '0' : swapBalance?.raw.toString() ?? '0'),
-        [meta?.inputAmount, pairBalance]
+        [meta?.inputAmount, pairBalance, buying, swapBalance?.raw]
     )
 
     const route = useMemo(() => {
@@ -173,7 +174,7 @@ const SwapCore = memo(() => {
         } else {
             return route.startsWith('cDAI') ? `${G$?.symbol} > ${route}` : `${G$?.symbol} > cDAI > ${route}`
         }
-    }, [meta?.route, buying, chainId])
+    }, [meta?.route, buying, chainId, G$?.symbol])
 
     const isFuse = SupportedChainId[Number(chainId)] === 'FUSE'
 
@@ -290,14 +291,14 @@ const SwapCore = memo(() => {
             network,
         })
         setShowConfirm(true)
-    }, [sendData, setShowConfirm, buying])
+    }, [sendData, setShowConfirm, buying, network])
 
     const onSwapConfirmed = useCallback(async () => {
         handleSetPairValue('')
         setSwapValue('')
         setMeta(undefined)
         sendData({ event: 'swap', action: 'swap_success', type: buying ? 'buy' : 'sell', network })
-    }, [handleSetPairValue, setSwapValue, setMeta])
+    }, [handleSetPairValue, setSwapValue, setMeta, buying, network, sendData])
 
     return (
         <SwapContext.Provider

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -7,6 +7,7 @@ import { RedirectHashRoutes, RedirectPathToSwapOnly } from 'pages/routes/redirec
 import Portfolio from 'pages/gd/Portfolio'
 import MicroBridge from 'pages/gd/MicroBridge'
 import Claim from 'pages/gd/Claim'
+import Bridge from 'pages/gd/Bridge'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 
 function Routes(): JSX.Element {
@@ -18,6 +19,7 @@ function Routes(): JSX.Element {
             <Route exact strict path="/swap" component={Swap} key={chainId} />
             <Route exact strict path="/stakes" component={Stakes} />
             <Route exact strict path="/portfolio" component={Portfolio} />
+            <Route exact strict path="/bridge" component={Bridge} />
             {process.env.REACT_APP_CELO_PHASE_2 && <Route exact strict path="/claim" component={Claim} />}
             {process.env.REACT_APP_CELO_PHASE_3 && <Route exact strict path="/microbridge" component={MicroBridge} />}
             <Route exact strict path="/" component={RedirectHashRoutes} />