Skip to content

Commit

Permalink
434: Finalize uniswap widget (#438)
Browse files Browse the repository at this point in the history 
* add error event

* fix: uniswap mobile size

* fix: error should be only the message

* replace tokenlist used

* import tokens directly

* fix: limit container width
  • Loading branch information
@L03TJ3
L03TJ3 authored Jun 27, 2023
1 parent c00ae12 commit 6da4e46
Show file tree
Hide file tree
Showing 3 changed files with 638 additions and 67 deletions.
114 changes: 48 additions & 66 deletions src/pages/gd/Swap/SwapCelo/UniSwap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,45 @@
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 { darkTheme, lightTheme, OnTxFail, OnTxSubmit, OnTxSuccess, SwapWidget } 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 { Box } from 'native-base'

import useActiveWeb3React from 'hooks/useActiveWeb3React'
import { useApplicationTheme } from 'state/application/hooks'
import useSendAnalytics from 'hooks/useSendAnalyticsData'
import { tokens } from './celo-tokenlist.json'

const jsonRpcUrlMap = {
122: ['https://rpc.fuse.io', 'https://fuse-rpc.gateway.pokt.network'],
42220: ['https://forno.celo.org', 'https://celo-rpc.gateway.pokt.network'],
}

const celoTokenList: TokenInfo[] = [
{
name: 'Wrapped Ether',
address: '0x2DEf4285787d58a2f811AF24755A8150622f4361',
symbol: 'WETH',
decimals: 18,
chainId: 42220,
logoURI:
'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png',
extensions: {
bridgeInfo: {
'1': {
tokenAddress: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
},
},
},
},
//todo-fix: adding this native token in the list makes it show up twice. but by default the logo's are not functioning on the widget
// {
// chainId: 42220,
// address: '0x471EcE3750Da237f93B8E339c536989b8978a438',
// name: 'Celo',
// symbol: 'CELO',
// decimals: 18,
// logoURI: 'https://raw.githubusercontent.com/ubeswap/default-token-list/master/assets/asset_CELO.png',
// },
]

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 containerWidth = isMobile ? 'auto' : '550px'

const customTheme = {
...uniTheme,
primary: '#404040',
Expand All @@ -78,7 +65,7 @@ export const UniSwap = (): JSX.Element => {
'https://raw.githubusercontent.com/GoodDollar/GoodProtocolUI/master/src/assets/images/tokens/gd-logo.png',
}

celoTokenList.push(gdToken)
tokens.push(gdToken)

const connectOnboard = useCallback(async () => {
if (!account) {
Expand All @@ -98,7 +85,7 @@ export const UniSwap = (): JSX.Element => {
}, [connect])

const handleError = useCallback(async (e) => {
console.log('handleError -->', { e })
sendData({ event: 'swap', action: 'swap_failed', error: e.message })
}, [])

const handleTxFailed: OnTxFail = useCallback(async (error: string, data: any) => {
Expand All @@ -114,6 +101,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,
Expand Down Expand Up @@ -146,6 +135,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,
Expand All @@ -159,41 +159,23 @@ 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>
<Box w={containerWidth}>
<SwapWidget
width={isMobile ? 'auto' : '550px'}
tokenList={celoTokenList}
width={containerWidth}
tokenList={tokens}
defaultInputTokenAddress={gdTokenAddress}
permit2={true}
jsonRpcUrlMap={jsonRpcUrlMap}
Expand All @@ -206,6 +188,6 @@ export const UniSwap = (): JSX.Element => {
onTxSuccess={handleTxSuccess}
dialogOptions={{ pageCentered: !!isMobile }}
/>
</div>
</Box>
)
}
Loading

0 comments on commit 6da4e46

Please sign in to comment.