Skip to content

Commit

Permalink
widget test
Browse files Browse the repository at this point in the history
  • Loading branch information
viet-nv committed Apr 1, 2024
1 parent 256281f commit 5d4bd56
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 4 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,12 @@
"@coinbase/wallet-sdk": "^3.0.4",
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@holdstation/paymaster-helper": "^2.0.20",
"@kyberswap/oauth2": "1.0.2",
"@kyberswap/krystal-walletconnect-v2": "0.0.1",
"@kyberswap/ks-sdk-classic": "^1.0.3",
"@kyberswap/ks-sdk-core": "1.1.3",
"@kyberswap/ks-sdk-elastic": "^1.1.2",
"@kyberswap/liquidity-widgets": "^0.0.1-rc5",
"@kyberswap/oauth2": "1.0.2",
"@lingui/macro": "^4.6.0",
"@lingui/react": "^4.6.0",
"@popperjs/core": "^2.11.6",
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useBasicChartData.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { KyberOauth2Api } from '@kyberswap/oauth2'
import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core'
import { KyberOauth2Api } from '@kyberswap/oauth2'
import { AxiosResponse } from 'axios'
import { getUnixTime, subHours } from 'date-fns'
import { useMemo } from 'react'
Expand Down
2 changes: 2 additions & 0 deletions src/pages/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { RedirectPathToSwapV3Network } from 'pages/SwapV3/redirects'
import { useHolidayMode } from 'state/user/hooks'
import { isSupportLimitOrder } from 'utils'

import LiquidityWidget from './LiquidityWidget'
import VerifyAuth from './Verify/VerifyAuth'

const Login = lazy(() => import('./Oauth/Login'))
Expand Down Expand Up @@ -325,6 +326,7 @@ export default function App() {
<Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />

<Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
<Route path="/liquidity-widget" element={<LiquidityWidget />} />

<Route path="*" element={<RedirectPathToSwapV3Network />} />
</Routes>
Expand Down
89 changes: 89 additions & 0 deletions src/pages/LiquidityWidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { ChainId } from '@kyberswap/ks-sdk-core'
import { LiquidityWidget as KsLiquidityWidget, PoolType } from '@kyberswap/liquidity-widgets'
import '@kyberswap/liquidity-widgets/dist/style.css'
import { useEffect, useState } from 'react'
import { Box } from 'rebass'
import styled from 'styled-components'

import { ButtonPrimary } from 'components/Button'
import Input from 'components/Input'
import Modal from 'components/Modal'
import { NetworkSelector } from 'components/NetworkSelector'
import { useActiveWeb3React, useWeb3React } from 'hooks'
import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'

const StyledModal = styled(Modal)`
transition: all 0.2s;
`

export default function LiquidityWidget() {
const [selectedChainId, setSelectedChainId] = useState(ChainId.MATIC)
const [poolAddress, setPoolAddress] = useState('')
const [openModal, setOpenModal] = useState(false)
const { changeNetwork } = useChangeNetwork()
const [autoAfterChange, setAutoAfterChange] = useState(false)

const { chainId } = useActiveWeb3React()
const { library } = useWeb3React()

useEffect(() => {
if (autoAfterChange && chainId === selectedChainId) {
setOpenModal(true)
setAutoAfterChange(false)
}
}, [autoAfterChange, chainId, selectedChainId])

const [maxWidth, setMaxWidth] = useState('680px')

return (
<>
<StyledModal isOpen={openModal} onDismiss={() => setOpenModal(false)} width="100%" maxWidth={maxWidth}>
<KsLiquidityWidget
provider={library}
theme={{
primary: '#1C1C1C',
secondary: '#0F0F0F',
text: '#FFFFFF',
subText: '#A9A9A9',
interactive: '#292929',
dialog: '#313131',
stroke: '#505050',
accent: '#28E0B9',

success: '#189470',
warning: '#FF9901',
error: '#F84242',
fontFamily: 'Work Sans',
borderRadius: '10px',
buttonRadius: '10px',
boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.04)',
}}
poolAddress={poolAddress}
poolType={PoolType.DEX_UNISWAPV3}
chainId={selectedChainId}
onDismiss={() => setOpenModal(false)}
onTogglePreview={show => {
if (show) setMaxWidth('500px')
else setMaxWidth('680px')
}}
/>
</StyledModal>
<Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: '500px', gap: '1rem', width: '100%' }}>
<NetworkSelector chainId={selectedChainId} customOnSelectNetwork={chain => setSelectedChainId(chain)} />
<Input placeholder="Pool address..." value={poolAddress} onChange={e => setPoolAddress(e.target.value)} />
<ButtonPrimary
onClick={() => {
if (selectedChainId !== chainId) {
changeNetwork(selectedChainId)
setAutoAfterChange(true)
} else {
setOpenModal(true)
}
}}
>
Launch
</ButtonPrimary>
</Box>
</>
)
}
93 changes: 91 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3751,6 +3751,15 @@
tiny-invariant "^1.1.0"
tiny-warning "^1.0.3"

"@kyberswap/liquidity-widgets@^0.0.1-rc5":
version "0.0.1-rc5"
resolved "https://registry.yarnpkg.com/@kyberswap/liquidity-widgets/-/liquidity-widgets-0.0.1-rc5.tgz#a969e2249ba64e875146c08f8edae42472b20af0"
integrity sha512-ZOgTlT1AcXYgGYHeLn01AdTxd+t3mZ2LIw8CwmezdQf5uQ9tjTNZG1rK10gIk6z3d1Wv9xfZQyrYfe1xk8y96w==
dependencies:
"@uniswap/sdk-core" "^4.1.4"
"@uniswap/v3-sdk" "^3.10.2"
ethers "^5.7.0"

"@kyberswap/oauth2@1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@kyberswap/oauth2/-/oauth2-1.0.2.tgz#4e0fdfa9722ba2f185a104293b85b6ca58be775b"
Expand Down Expand Up @@ -4065,6 +4074,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"

"@openzeppelin/contracts@3.4.1-solc-0.7-2":
version "3.4.1-solc-0.7-2"
resolved "https://registry.yarnpkg.com/@openzeppelin/contracts/-/contracts-3.4.1-solc-0.7-2.tgz#371c67ebffe50f551c3146a9eec5fe6ffe862e92"
integrity sha512-tAG9LWg8+M2CMu7hIsqHPaTyG4uDzjr6mhvH96LvOpLZZj6tgzTluBt+LsCf1/QaYrlis6pITvpIaIhE+iZB+Q==

"@openzeppelin/contracts@3.4.2-solc-0.7":
version "3.4.2-solc-0.7"
resolved "https://registry.yarnpkg.com/@openzeppelin/contracts/-/contracts-3.4.2-solc-0.7.tgz#38f4dbab672631034076ccdf2f3201fab1726635"
Expand Down Expand Up @@ -7252,7 +7266,31 @@
resolved "https://registry.yarnpkg.com/@uniswap/lib/-/lib-4.0.1-alpha.tgz#2881008e55f075344675b3bca93f020b028fbd02"
integrity sha512-f6UIliwBbRsgVLxIaBANF6w09tYqc6Y/qXdsrbEmXHyFA7ILiKrIwRFXe1yOg8M3cksgVsO9N7yuL2DdCGQKBA==

"@uniswap/v2-core@1.0.1":
"@uniswap/sdk-core@^4.1.4", "@uniswap/sdk-core@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@uniswap/sdk-core/-/sdk-core-4.2.0.tgz#9930f133baec9c1118d891ebf8fcba7f7efc153d"
integrity sha512-yXAMLHZRYYuh6KpN2nOlLTYBjGiopmI9WUB4Z0tyNkW4ZZub54cUt22eibpGbZAhRAMxclox9IPIs6wwrM3soQ==
dependencies:
"@ethersproject/address" "^5.0.2"
big.js "^5.2.2"
decimal.js-light "^2.5.0"
jsbi "^3.1.4"
tiny-invariant "^1.1.0"
toformat "^2.0.0"

"@uniswap/swap-router-contracts@^1.2.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@uniswap/swap-router-contracts/-/swap-router-contracts-1.3.1.tgz#0ebbb93eb578625618ed9489872de381f9c66fb4"
integrity sha512-mh/YNbwKb7Mut96VuEtL+Z5bRe0xVIbjjiryn+iMMrK2sFKhR4duk/86mEz0UO5gSx4pQIw9G5276P5heY/7Rg==
dependencies:
"@openzeppelin/contracts" "3.4.2-solc-0.7"
"@uniswap/v2-core" "^1.0.1"
"@uniswap/v3-core" "^1.0.0"
"@uniswap/v3-periphery" "^1.4.4"
dotenv "^14.2.0"
hardhat-watcher "^2.1.1"

"@uniswap/v2-core@1.0.1", "@uniswap/v2-core@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@uniswap/v2-core/-/v2-core-1.0.1.tgz#af8f508bf183204779938969e2e54043e147d425"
integrity sha512-MtybtkUPSyysqLY2U210NBDeCHX+ltHt3oADGdjqoThZaFRDKwM6k1Nb3F0A3hk5hwuQvytFWhrWHOEq6nVJ8Q==
Expand All @@ -7262,6 +7300,22 @@
resolved "https://registry.yarnpkg.com/@uniswap/v3-core/-/v3-core-1.0.0.tgz#6c24adacc4c25dceee0ba3ca142b35adbd7e359d"
integrity sha512-kSC4djMGKMHj7sLMYVnn61k9nu+lHjMIxgg9CDQT+s2QYLoA56GbSK9Oxr+qJXzzygbkrmuY6cwgP6cW2JXPFA==

"@uniswap/v3-core@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@uniswap/v3-core/-/v3-core-1.0.1.tgz#b6d2bdc6ba3c3fbd610bdc502395d86cd35264a0"
integrity sha512-7pVk4hEm00j9tc71Y9+ssYpO6ytkeI0y7WE9P6UcmNzhxPePwyAxImuhVsTqWK9YFvzgtvzJHi64pBl4jUzKMQ==

"@uniswap/v3-periphery@^1.0.1", "@uniswap/v3-periphery@^1.1.1", "@uniswap/v3-periphery@^1.4.4":
version "1.4.4"
resolved "https://registry.yarnpkg.com/@uniswap/v3-periphery/-/v3-periphery-1.4.4.tgz#d2756c23b69718173c5874f37fd4ad57d2f021b7"
integrity sha512-S4+m+wh8HbWSO3DKk4LwUCPZJTpCugIsHrWR86m/OrUyvSqGDTXKFfc2sMuGXCZrD1ZqO3rhQsKgdWg3Hbb2Kw==
dependencies:
"@openzeppelin/contracts" "3.4.2-solc-0.7"
"@uniswap/lib" "^4.0.1-alpha"
"@uniswap/v2-core" "^1.0.1"
"@uniswap/v3-core" "^1.0.0"
base64-sol "1.0.1"

"@uniswap/v3-periphery@^1.3.0":
version "1.4.3"
resolved "https://registry.yarnpkg.com/@uniswap/v3-periphery/-/v3-periphery-1.4.3.tgz#a6da4632dbd46b139cc13a410e4ec09ad22bd19f"
Expand All @@ -7273,6 +7327,29 @@
"@uniswap/v3-core" "1.0.0"
base64-sol "1.0.1"

"@uniswap/v3-sdk@^3.10.2":
version "3.11.0"
resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-3.11.0.tgz#328309fbafddd8c618b7b6850bb99cacf6733a79"
integrity sha512-gz6Q6SlN34AXvxhyz181F90D4OuIkxLnzBAucEzB9Fv3Z+3orHZY/SpGaD02nP1VsNQVu/DQvOsdkPUDGn1Y9Q==
dependencies:
"@ethersproject/abi" "^5.0.12"
"@ethersproject/solidity" "^5.0.9"
"@uniswap/sdk-core" "^4.2.0"
"@uniswap/swap-router-contracts" "^1.2.1"
"@uniswap/v3-periphery" "^1.1.1"
"@uniswap/v3-staker" "1.0.0"
tiny-invariant "^1.1.0"
tiny-warning "^1.0.3"

"@uniswap/v3-staker@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@uniswap/v3-staker/-/v3-staker-1.0.0.tgz#9a6915ec980852479dfc903f50baf822ff8fa66e"
integrity sha512-JV0Qc46Px5alvg6YWd+UIaGH9lDuYG/Js7ngxPit1SPaIP30AlVer1UYB7BRYeUVVxE+byUyIeN5jeQ7LLDjIw==
dependencies:
"@openzeppelin/contracts" "3.4.1-solc-0.7-2"
"@uniswap/v3-core" "1.0.0"
"@uniswap/v3-periphery" "^1.0.1"

"@use-gesture/core@10.2.27":
version "10.2.27"
resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.27.tgz#0f24b17c036cd828ba07e3451ff45e2df959c6f5"
Expand Down Expand Up @@ -10427,6 +10504,11 @@ dotenv@10.0.0:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==

dotenv@^14.2.0:
version "14.3.2"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-14.3.2.tgz#7c30b3a5f777c79a3429cb2db358eef6751e8369"
integrity sha512-vwEppIphpFdvaMCaHfCEv9IgwcxMljMw2TnAQBB4VWPvzXQLTb82jwmdOKzlEVUL3gNFT4l4TPKO+Bn+sqcrVQ==

dotenv@^16.0.0, dotenv@^16.3.1:
version "16.3.1"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
Expand Down Expand Up @@ -11155,7 +11237,7 @@ ethers@6.7.1:
tslib "2.4.0"
ws "8.5.0"

ethers@^5.4.6, ethers@^5.6.9, ethers@^5.7.2:
ethers@^5.4.6, ethers@^5.6.9, ethers@^5.7.0, ethers@^5.7.2:
version "5.7.2"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e"
integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==
Expand Down Expand Up @@ -12308,6 +12390,13 @@ handlebars@^4.7.7:
optionalDependencies:
uglify-js "^3.1.4"

hardhat-watcher@^2.1.1:
version "2.5.0"
resolved "https://registry.yarnpkg.com/hardhat-watcher/-/hardhat-watcher-2.5.0.tgz#3ee76c3cb5b99f2875b78d176207745aa484ed4a"
integrity sha512-Su2qcSMIo2YO2PrmJ0/tdkf+6pSt8zf9+4URR5edMVti6+ShI8T3xhPrwugdyTOFuyj8lKHrcTZNKUFYowYiyA==
dependencies:
chokidar "^3.5.3"

has-bigints@^1.0.1, has-bigints@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
Expand Down

0 comments on commit 5d4bd56

Please sign in to comment.