diff --git a/src/components/LiveChart/AnimatingNumber.tsx b/src/components/LiveChart/AnimatingNumber.tsx index 847f084a6b..e112cf6e17 100644 --- a/src/components/LiveChart/AnimatingNumber.tsx +++ b/src/components/LiveChart/AnimatingNumber.tsx @@ -1,5 +1,5 @@ import { motion } from 'framer-motion' -import { useRef } from 'react' +import { useCallback, useState } from 'react' import { Flex, Text } from 'rebass' import styled from 'styled-components' @@ -50,11 +50,18 @@ const TickerColumn = styled(motion.div)` ` function NumberColumn({ digit, fontSize }: { digit: number; fontSize: number }) { - const columnContainer = useRef() - const y = (columnContainer.current?.clientHeight || 0) * digit ?? 0 + const [clientHeight, setClientHeight] = useState(0) + + const columnContainerRef = useCallback((node: HTMLDivElement) => { + if (node !== null) { + setClientHeight(node.clientHeight) + } + }, []) + + const y = (clientHeight || 0) * digit ?? 0 return ( - + {[9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map(num => ( {num} diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 6530dcc366..9010df2484 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,18 +1,7 @@ import { Trans, t } from '@lingui/macro' import { useEffect, useState } from 'react' import { isMobile } from 'react-device-detect' -import { - Award, - BookOpen, - ChevronDown, - Edit, - FileText, - HelpCircle, - Info, - MessageCircle, - PieChart, - Share2, -} from 'react-feather' +import { Award, BookOpen, ChevronDown, Edit, FileText, HelpCircle, Info, MessageCircle, PieChart } from 'react-feather' import { NavLink, useLocation, useNavigate } from 'react-router-dom' import { useMedia } from 'react-use' import { Text } from 'rebass' @@ -20,6 +9,7 @@ import styled, { css } from 'styled-components' import { ReactComponent as MenuIcon } from 'assets/svg/all_icon.svg' import { ReactComponent as BlogIcon } from 'assets/svg/blog.svg' +import { ReactComponent as BridgeIcon } from 'assets/svg/bridge_icon.svg' import { ReactComponent as LightIcon } from 'assets/svg/light.svg' import { ReactComponent as RoadMapIcon } from 'assets/svg/roadmap.svg' import { ButtonEmpty, ButtonPrimary } from 'components/Button' @@ -332,7 +322,7 @@ export default function Menu() { {bridgeLink && ( - + Bridge Assets diff --git a/src/constants/networks/arbitrum.ts b/src/constants/networks/arbitrum.ts index 2ae1782a92..c071647a89 100644 --- a/src/constants/networks/arbitrum.ts +++ b/src/constants/networks/arbitrum.ts @@ -4,7 +4,6 @@ import EthereumLogo from 'assets/images/ethereum-logo.png' import ARBITRUM from 'assets/networks/arbitrum-network.svg' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const EMPTY_ARRAY: any[] = [] const NOT_SUPPORT = null @@ -23,7 +22,7 @@ const arbitrumInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/kybernetwork/arbitrum-blocks', etherscanUrl: 'https://arbiscan.io', etherscanName: 'Arbiscan', - bridgeURL: EMPTY, + bridgeURL: 'https://bridge.arbitrum.io/', nativeToken: { symbol: 'ETH', name: 'ETH', diff --git a/src/constants/networks/avax.ts b/src/constants/networks/avax.ts index 6ee9d310f5..30d026dc1f 100644 --- a/src/constants/networks/avax.ts +++ b/src/constants/networks/avax.ts @@ -2,7 +2,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const NOT_SUPPORT = null const avaxInfo: EVMNetworkInfo = { @@ -20,7 +19,7 @@ const avaxInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ducquangkstn/avalache-blocks', etherscanUrl: 'https://snowtrace.io', etherscanName: 'Snowtrace', - bridgeURL: EMPTY, + bridgeURL: 'https://core.app/bridge', nativeToken: { symbol: 'AVAX', name: 'AVAX', diff --git a/src/constants/networks/bnb.ts b/src/constants/networks/bnb.ts index 431fd0081d..ebf59fdc6f 100644 --- a/src/constants/networks/bnb.ts +++ b/src/constants/networks/bnb.ts @@ -3,7 +3,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import BnbLogo from 'assets/images/bnb-logo.png' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const NOT_SUPPORT = null const bnbInfo: EVMNetworkInfo = { @@ -21,7 +20,7 @@ const bnbInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dynamic-amm/ethereum-blocks-bsc', etherscanUrl: 'https://bscscan.com', etherscanName: 'BscScan', - bridgeURL: EMPTY, + bridgeURL: 'https://www.bnbchain.org/en/bridge', nativeToken: { symbol: 'BNB', name: 'BNB', diff --git a/src/constants/networks/bttc.ts b/src/constants/networks/bttc.ts index b405c0e960..09e73420c4 100644 --- a/src/constants/networks/bttc.ts +++ b/src/constants/networks/bttc.ts @@ -21,7 +21,7 @@ const bttcInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://bttc-graph.kyberengineering.io/subgraphs/name/kybernetwork/bttc-blocks', etherscanUrl: 'https://bttcscan.com', etherscanName: 'Bttcscan', - bridgeURL: EMPTY, + bridgeURL: 'https://bttc.bittorrent.com/bridge/', nativeToken: { symbol: 'BTT', name: 'BTT', diff --git a/src/constants/networks/cronos.ts b/src/constants/networks/cronos.ts index 65c085eb23..e37a498175 100644 --- a/src/constants/networks/cronos.ts +++ b/src/constants/networks/cronos.ts @@ -5,7 +5,6 @@ import CRONOS from 'assets/networks/cronos-network.svg' import CronosLogo from 'assets/svg/cronos-token-logo.svg' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const EMPTY_ARRAY: any[] = [] const NOT_SUPPORT = null @@ -24,7 +23,7 @@ const cronosInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://cronos-graph.kyberengineering.io/subgraphs/name/kybernetwork/cronos-blocks', etherscanUrl: 'https://cronoscan.com', etherscanName: 'Cronos explorer', - bridgeURL: EMPTY, + bridgeURL: 'https://cronos.org/bridge/', nativeToken: { symbol: 'CRO', name: 'CRO', diff --git a/src/constants/networks/linea.ts b/src/constants/networks/linea.ts index 102cc15c67..a4a3f17832 100644 --- a/src/constants/networks/linea.ts +++ b/src/constants/networks/linea.ts @@ -22,7 +22,7 @@ const lineaInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://graph-query.linea.build/subgraphs/name/kybernetwork/linea-blocks', etherscanUrl: 'https://lineascan.build', etherscanName: 'Linea Explorer', - bridgeURL: EMPTY, + bridgeURL: 'https://bridge.linea.build/', nativeToken: { symbol: 'ETH', name: 'LineaETH', diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts index 25ac1037b7..d402f948b4 100644 --- a/src/constants/networks/matic.ts +++ b/src/constants/networks/matic.ts @@ -2,7 +2,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const NOT_SUPPORT = null const maticInfo: EVMNetworkInfo = { @@ -20,7 +19,7 @@ const maticInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/dynamic-amm/ethereum-blocks-polygon', etherscanUrl: 'https://polygonscan.com', etherscanName: 'Polygonscan', - bridgeURL: EMPTY, + bridgeURL: 'https://wallet.polygon.technology/', nativeToken: { symbol: 'MATIC', name: 'Polygon', diff --git a/src/constants/networks/optimism.ts b/src/constants/networks/optimism.ts index 289260256c..3f5eedeb36 100644 --- a/src/constants/networks/optimism.ts +++ b/src/constants/networks/optimism.ts @@ -4,7 +4,6 @@ import EthereumLogo from 'assets/images/ethereum-logo.png' import OPTIMISM from 'assets/networks/optimism-network.svg' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const EMPTY_ARRAY: any[] = [] const NOT_SUPPORT = null @@ -23,7 +22,7 @@ const optimismInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/ianlapham/uni-testing-subgraph', etherscanUrl: 'https://optimistic.etherscan.io', etherscanName: 'Optimistic Ethereum Explorer', - bridgeURL: EMPTY, + bridgeURL: 'https://app.optimism.io/bridge/deposit', nativeToken: { symbol: 'ETH', name: 'ETH', diff --git a/src/constants/networks/zkevm.ts b/src/constants/networks/zkevm.ts index 8cc1f5b39c..5b34a6d314 100644 --- a/src/constants/networks/zkevm.ts +++ b/src/constants/networks/zkevm.ts @@ -23,7 +23,7 @@ const zkEvm: EVMNetworkInfo = { 'https://polygon-zkevm-graph.kyberengineering.io/subgraphs/name/kybernetwork/polygon-zkevm-blocks', etherscanUrl: 'https://zkevm.polygonscan.com', etherscanName: 'Polygon zkEVM Explorer', - bridgeURL: EMPTY, + bridgeURL: 'https://wallet.polygon.technology/', nativeToken: { symbol: 'ETH', name: 'ETH', diff --git a/src/constants/networks/zksync.ts b/src/constants/networks/zksync.ts index 2f7e75612d..a0294e035a 100644 --- a/src/constants/networks/zksync.ts +++ b/src/constants/networks/zksync.ts @@ -3,7 +3,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import EthereumLogo from 'assets/images/ethereum-logo.png' import { EVMNetworkInfo } from 'constants/networks/type' -const EMPTY = '' const EMPTY_ARRAY: any[] = [] const NOT_SUPPORT = null @@ -24,7 +23,7 @@ const zkSyncInfo: EVMNetworkInfo = { defaultBlockSubgraph: 'https://zksync-graph.kyberengineering.io/subgraphs/name/kybernetwork/zksync-blocks', etherscanUrl: 'https://explorer.zksync.io', etherscanName: 'zkSync Era Explorer', - bridgeURL: EMPTY, + bridgeURL: 'https://portal.zksync.io/bridge/', nativeToken: { symbol: 'ETH', name: 'ETH',