diff --git a/src/components/DownloadWalletModal/index.tsx b/src/components/DownloadWalletModal/index.tsx
new file mode 100644
index 0000000000..5532f718da
--- /dev/null
+++ b/src/components/DownloadWalletModal/index.tsx
@@ -0,0 +1,77 @@
+import { Trans } from '@lingui/macro'
+import { rgba } from 'polished'
+import { X } from 'react-feather'
+import { Image, Text } from 'rebass'
+import styled from 'styled-components'
+
+import Column from 'components/Column'
+import Modal from 'components/Modal'
+import Row, { RowBetween } from 'components/Row'
+import { connections } from 'constants/wallets'
+import useTheme from 'hooks/useTheme'
+import { ApplicationModal } from 'state/application/actions'
+import { useCloseModal, useModalOpen } from 'state/application/hooks'
+import { useDarkModeManager } from 'state/user/hooks'
+import { ButtonText } from 'theme'
+
+const DownloadWalletRow = styled.a`
+ display: flex;
+ gap: 8px;
+ border-radius: 999px;
+ padding: 12px 16px;
+ color: ${({ theme }) => theme.subText};
+ font-size: 16px;
+ font-weight: 500;
+ background: ${({ theme }) => theme.buttonBlack};
+ line-height: 24px;
+ text-decoration: none;
+
+ flex-basis: calc((100% - 20px) / 2); // 20px gap
+ min-width: 170px;
+ box-sizing: border-box;
+ ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+ flex-basis: 100%;
+ `}
+
+ :hover {
+ background: ${({ theme }) => rgba(theme.buttonBlack, 0.6)};
+ }
+`
+
+export default function DownloadWalletModal() {
+ const theme = useTheme()
+ const [isDarkMode] = useDarkModeManager()
+ const isOpen = useModalOpen(ApplicationModal.DOWNLOAD_WALLET)
+ const closeModal = useCloseModal(ApplicationModal.DOWNLOAD_WALLET)
+ return (
+
+
+
+
+ Download a Wallet
+
+
+
+
+
+
+
+
+ {Object.values(connections)
+ .filter(e => e.installLink)
+ .map(item => (
+
+
+ {item.name}
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/components/Tutorial/TutorialSwap/index.tsx b/src/components/Tutorial/TutorialSwap/index.tsx
index 62679d7967..3030606536 100644
--- a/src/components/Tutorial/TutorialSwap/index.tsx
+++ b/src/components/Tutorial/TutorialSwap/index.tsx
@@ -18,7 +18,7 @@ import SwapSettingBtn from 'assets/images/tutorial_swap/swap_setting_btn.png'
import WelcomeImage from 'assets/images/tutorial_swap/welcome.png'
import { ButtonOutlined, ButtonPrimary } from 'components/Button'
import { ToggleItemType } from 'components/Collapse'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
+import { connections } from 'constants/wallets'
import { useActiveWeb3React } from 'hooks'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import { useTutorialSwapGuide } from 'state/tutorial/hooks'
@@ -81,6 +81,9 @@ const NetworkItemWrapper = styled.div`
padding: 10px 15px;
gap: 10px;
cursor: pointer;
+ flex-basis: calc((100% - 10px) / 2); // 10px gap
+ min-width: 160px;
+ box-sizing: border-box;
`
const NetworkWrapper = styled.div`
@@ -89,7 +92,7 @@ const NetworkWrapper = styled.div`
padding: 15px;
gap: 10px;
display: flex;
- flex-direction: column;
+ flex-wrap: wrap;
`
const ImageMobile = ({
@@ -162,11 +165,15 @@ function ConnectWallet() {
{isExpanded && (
- {Object.values(SUPPORTED_WALLETS)
+ {Object.values(connections)
.filter(e => e.installLink)
.map(item => (
window.open(item.installLink)}>
- 
+
{item.name}
))}
diff --git a/src/constants/wallets.ts b/src/constants/wallets.ts
index 10f9eff03f..4553782760 100644
--- a/src/constants/wallets.ts
+++ b/src/constants/wallets.ts
@@ -239,14 +239,6 @@ export const SUPPORTED_WALLETS = {
readyState: detectCoinbase,
readyStateSolana: () => (isMobile ? WalletReadyState.Unsupported : coinbaseAdapter.readyState),
} as EVMWalletInfo & SolanaWalletInfo,
- WALLET_CONNECT: {
- connector: walletConnectV2,
- hooks: walletConnectV2Hooks,
- name: 'WalletConnect',
- icon: WALLETCONNECT,
- iconLight: WALLETCONNECT,
- readyState: () => WalletReadyState.Installed,
- } as EVMWalletInfo,
SAFE: {
connector: gnosisSafe,
hooks: gnosisSafeHooks,
@@ -256,6 +248,22 @@ export const SUPPORTED_WALLETS = {
installLink: 'https://safe.global/wallet',
readyState: detectSafe,
} as EVMWalletInfo,
+ BLOCTO_INJECTED: {
+ connector: bloctoInject,
+ hooks: bloctoInjectHooks,
+ name: 'Blocto',
+ icon: BLOCTO,
+ iconLight: BLOCTO,
+ readyState: detectBloctoInjected,
+ } as EVMWalletInfo,
+ WALLET_CONNECT: {
+ connector: walletConnectV2,
+ hooks: walletConnectV2Hooks,
+ name: 'WalletConnect',
+ icon: WALLETCONNECT,
+ iconLight: WALLETCONNECT,
+ readyState: () => WalletReadyState.Installed,
+ } as EVMWalletInfo,
BLOCTO: {
connector: blocto,
hooks: bloctoHooks,
@@ -265,14 +273,6 @@ export const SUPPORTED_WALLETS = {
installLink: 'https://www.blocto.io/download',
readyState: detectBlocto,
} as EVMWalletInfo,
- BLOCTO_INJECTED: {
- connector: bloctoInject,
- hooks: bloctoInjectHooks,
- name: 'Blocto',
- icon: BLOCTO,
- iconLight: BLOCTO,
- readyState: detectBloctoInjected,
- } as EVMWalletInfo,
SOLFLARE: {
adapter: solflareAdapter,
name: 'Solflare',
diff --git a/src/pages/BuyCrypto/index.tsx b/src/pages/BuyCrypto/index.tsx
index 07161f875c..9fca37c261 100644
--- a/src/pages/BuyCrypto/index.tsx
+++ b/src/pages/BuyCrypto/index.tsx
@@ -1,9 +1,8 @@
import { ChainId } from '@kyberswap/ks-sdk-core'
import { Trans } from '@lingui/macro'
-import { rgba } from 'polished'
import { stringify } from 'querystring'
-import React, { useEffect, useRef, useState } from 'react'
-import { ArrowDown, ChevronDown, Repeat, X } from 'react-feather'
+import React, { useEffect, useRef } from 'react'
+import { ArrowDown, ChevronDown, Repeat } from 'react-feather'
import { Link, useNavigate } from 'react-router-dom'
import { useMedia } from 'react-use'
import { Flex, Image, Text } from 'rebass'
@@ -27,18 +26,18 @@ import metamask from 'assets/wallets-connect/metamask.svg'
import walletConnect from 'assets/wallets-connect/wallet-connect.svg'
import { ButtonLight, ButtonPrimary } from 'components/Button'
import CopyHelper from 'components/Copy'
+import DownloadWalletModal from 'components/DownloadWalletModal'
import Cart from 'components/Icons/Cart'
import Deposit from 'components/Icons/Deposit'
-import Modal from 'components/Modal'
import { TRANSAK_API_KEY, TRANSAK_URL } from 'constants/env'
import { APP_PATHS } from 'constants/index'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
import { useActiveWeb3React } from 'hooks'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import useParsedQueryString from 'hooks/useParsedQueryString'
import useTheme from 'hooks/useTheme'
import { KSStatistic } from 'pages/About/AboutKyberSwap'
-import { useWalletModalToggle } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/actions'
+import { useToggleModal, useWalletModalToggle } from 'state/application/hooks'
import { useDarkModeManager } from 'state/user/hooks'
import { ButtonText, ExternalLink } from 'theme'
@@ -136,23 +135,6 @@ const Address = styled.div`
width: fit-content;
`
-const DownloadWalletRow = styled.a`
- display: flex;
- gap: 8px;
- border-radius: 999px;
- padding: 12px 16px;
- color: ${({ theme }) => theme.subText};
- font-size: 16px;
- font-weight: 500;
- background: ${({ theme }) => theme.buttonBlack};
- line-height: 24px;
- text-decoration: none;
-
- :hover {
- background: ${({ theme }) => rgba(theme.buttonBlack, 0.6)};
- }
-`
-
const Step = ({
currentStep = 1,
direction = 'vertical',
@@ -190,6 +172,7 @@ function BuyCrypto() {
const { account, chainId, networkInfo } = useActiveWeb3React()
const toggleWalletModal = useWalletModalToggle()
+ const toggleDownloadWalletModal = useToggleModal(ApplicationModal.DOWNLOAD_WALLET)
const step0Ref = useRef(null)
const step1Ref = useRef(null)
@@ -248,8 +231,6 @@ function BuyCrypto() {
const [isDarkMode] = useDarkModeManager()
const { mixpanelHandler } = useMixpanel()
- const [showDownloadModal, setShowDownloadModal] = useState(false)
-
const handleStepClick = (value: number) => {
switch (value) {
case 1:
@@ -288,36 +269,7 @@ function BuyCrypto() {
return (
<>
- setShowDownloadModal(false)} maxWidth="512px">
-
-
-
- Download a Wallet
-
-
- setShowDownloadModal(false)} style={{ lineHeight: 0 }}>
-
-
-
-
-
- {Object.values(SUPPORTED_WALLETS)
- .filter(e => e.installLink)
- .map(item => (
-
-
- {item.name}
-
- ))}
-
-
-
-
+
{!upToMedium && }
@@ -437,7 +389,7 @@ function BuyCrypto() {
padding="10px"
onClick={() => {
mixpanelHandler(MIXPANEL_TYPE.TRANSAK_DOWNLOAD_WALLET_CLICKED)
- setShowDownloadModal(true)
+ toggleDownloadWalletModal()
}}
>
diff --git a/src/state/application/actions.ts b/src/state/application/actions.ts
index 4f8d5420d9..a2a704b940 100644
--- a/src/state/application/actions.ts
+++ b/src/state/application/actions.ts
@@ -17,6 +17,7 @@ export enum ApplicationModal {
VOTE,
PRICE_RANGE,
POOL_DETAIL,
+ DOWNLOAD_WALLET,
MOBILE_LIVE_CHART,
MOBILE_TRADE_ROUTES,