434: Finalize uniswap widget

src/pages/gd/Swap/SwapCelo/UniSwap.tsx

@@ -1,14 +1,24 @@
 import React, { useCallback } from 'react'
 
-import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useApplicationTheme } from 'state/application/hooks'
 import { darkTheme, lightTheme, OnTxFail, OnTxSubmit, OnTxSuccess, SwapWidget, TokenInfo } from '@uniswap/widgets'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useConnectWallet } from '@web3-onboard/react'
-import { AsyncStorage, getDevice, G$ContractAddresses, useGetEnvChainId, useWeb3Context } from '@gooddollar/web3sdk-v2'
+import {
+    AsyncStorage,
+    getDevice,
+    G$ContractAddresses,
+    useGetEnvChainId,
+    useWeb3Context,
+    SupportedChains,
+} from '@gooddollar/web3sdk-v2'
 import { useDispatch } from 'react-redux'
 import { addTransaction } from 'state/transactions/actions'
 import { ChainId } from '@sushiswap/sdk'
+import { isMobile } from 'react-device-detect'
+
+import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import { useApplicationTheme } from 'state/application/hooks'
+import useSendAnalytics from 'hooks/useSendAnalyticsData'
 
 const jsonRpcUrlMap = {
     122: ['https://rpc.fuse.io', 'https://fuse-rpc.gateway.pokt.network'],
@@ -46,12 +56,15 @@ const celoTokenList: TokenInfo[] = [
 export const UniSwap = (): JSX.Element => {
     const [theme] = useApplicationTheme()
     const uniTheme = theme === 'dark' ? darkTheme : lightTheme
-    const { account } = useActiveWeb3React()
     const { web3Provider } = useWeb3Context()
+    const { account, chainId } = useActiveWeb3React()
+    const network = SupportedChains[chainId]
     const [, connect] = useConnectWallet()
     const globalDispatch = useDispatch()
+    const sendData = useSendAnalytics()
     const { connectedEnv } = useGetEnvChainId(42220)
     const gdTokenAddress = G$ContractAddresses('GoodDollar', connectedEnv) as string
+
     const customTheme = {
         ...uniTheme,
         primary: '#404040',
@@ -97,7 +110,7 @@ export const UniSwap = (): JSX.Element => {
     }, [connect])
 
     const handleError = useCallback(async (e) => {
-        console.log('handleError -->', { e })
+        sendData({ event: 'swap', action: 'swap_failed', error: e })
     }, [])
 
     const handleTxFailed: OnTxFail = useCallback(async (error: string, data: any) => {
@@ -113,6 +126,8 @@ export const UniSwap = (): JSX.Element => {
                     const { tokenAddress } = info
                     const symbol = tokenSymbols[tokenAddress]
                     const summary = symbol ? `Approved spending of ${symbol}` : 'Approved spending'
+                    const type = symbol ? 'sell' : 'buy'
+                    sendData({ event: 'swap', action: 'swap_approve', type, network })
                     globalDispatch(
                         addTransaction({
                             chainId: 42220 as ChainId,
@@ -145,6 +160,17 @@ export const UniSwap = (): JSX.Element => {
                     const swappedAmount = inputAmount.toSignificant(6)
                     const receivedAmount = outputAmount.toSignificant(6)
                     const summary = `Swapped ${swappedAmount} ${input.symbol} to ${receivedAmount} ${output.symbol}`
+                    const type = input.symbol === 'G$' ? 'sell' : 'buy'
+
+                    sendData({
+                        event: 'swap',
+                        action: 'swap_confirm',
+                        amount: type === 'buy' ? receivedAmount : swappedAmount,
+                        tokens: [input.symbol, output.symbol],
+                        type,
+                        network,
+                    })
+
                     globalDispatch(
                         addTransaction({
                             chainId: 42220 as ChainId,
@@ -158,40 +184,22 @@ export const UniSwap = (): JSX.Element => {
                 }
             }
         },
-        [account]
+        [account, network]
     )
 
-    const handleTxSuccess: OnTxSuccess = useCallback(async (txHash: string, data: any) => {
-        console.log('handleTxSuccess -->', { txHash, data })
-        //todo: potentially showing share modal (as we do on other chains when buying G$)
-        //     <ShareTransaction
-        //     title={i18n._(t`Swap Completed`)}
-        //     text={i18n._(
-        //         t`You just used your crypto for good to help fund crypto UBI for all with GoodDollar!`
-        //     )}
-        //     shareProps={{
-        //         title: i18n._(t`Share with friends`),
-        //         copyText: 'I just bought GoodDollars at https://goodswap.xyz to make the world better',
-        //         show: true,
-        //         linkedin: {
-        //             url: 'https://gooddollar.org',
-        //         },
-        //         twitter: {
-        //             url: 'https://gooddollar.org',
-        //             hashtags: ['InvestForGood'],
-        //         },
-        //         facebook: {
-        //             url: 'https://gooddollar.org',
-        //             hashtag: '#InvestForGood',
-        //         },
-        //     }}
-        // />
-    }, [])
+    const handleTxSuccess: OnTxSuccess = useCallback(
+        async (txHash: string, data: any) => {
+            const { inputAmount } = data.info.trade.swaps[0]
+            const type = inputAmount.currency.symbol === 'G$' ? 'sell' : 'buy'
+            sendData({ event: 'swap', action: 'swap_success', type, network })
+        },
+        [network]
+    )
 
     return (
         <div>
             <SwapWidget
-                width="550px"
+                width={isMobile ? 'auto' : '550px'}
                 tokenList={celoTokenList}
                 defaultInputTokenAddress={gdTokenAddress}
                 permit2={true}
@@ -203,6 +211,7 @@ export const UniSwap = (): JSX.Element => {
                 onTxFail={handleTxFailed}
                 onTxSubmit={handleTxSubmit}
                 onTxSuccess={handleTxSuccess}
+                dialogOptions={{ pageCentered: !!isMobile }}
             />
         </div>
     )

src/state/transactions/hooks.tsx

@@ -50,7 +50,7 @@ export function useAllTransactions(): { [txHash: string]: TransactionDetails } {
 
     const state = useSelector<AppState, AppState['transactions']>((state) => state.transactions)
     const filterTransactions = {}
-    console.log('useAllTransactions -->', { state })
+
     if (chainId && state[chainId]) {
         Object.values(state[chainId])?.forEach((tx) => {
             if (tx.from === account) {