fix: download wallets modal

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 (
+    <Modal isOpen={isOpen} onDismiss={closeModal} maxWidth="600px">
+      <Column width="100%" padding="30px 24px" overflowY="scroll">
+        <RowBetween>
+          <Text fontSize="20px" fontWeight="500">
+            <Trans>Download a Wallet</Trans>
+          </Text>
+
+          <ButtonText onClick={closeModal} style={{ lineHeight: 0 }}>
+            <X size={24} color={theme.text} />
+          </ButtonText>
+        </RowBetween>
+
+        <Row gap="20px" marginTop="24px" flexWrap="wrap">
+          {Object.values(connections)
+            .filter(e => e.installLink)
+            .map(item => (
+              <DownloadWalletRow
+                key={item.installLink}
+                href={item.installLink}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Image width="24px" maxHeight="24px" src={isDarkMode ? item.icon : item.iconLight} />
+                {item.name}
+              </DownloadWalletRow>
+            ))}
+        </Row>
+      </Column>
+    </Modal>
+  )
+}

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() {
         </Heading>
         {isExpanded && (
           <NetworkWrapper>
-            {Object.values(SUPPORTED_WALLETS)
+            {Object.values(connections)
               .filter(e => e.installLink)
               .map(item => (
                 <NetworkItemWrapper key={item.name} onClick={() => window.open(item.installLink)}>
-                  <img src={isDarkMode ? item.icon : item.iconLight} alt={item.name} width="20" height="20" />
+                  <img
+                    src={isDarkMode ? item.icon : item.iconLight}
+                    alt={item.name}
+                    style={{ width: '20px', maxHeight: '20px' }}
+                  />
                   <span>{item.name}</span>
                 </NetworkItemWrapper>
               ))}

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',

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<HTMLDivElement>(null)
   const step1Ref = useRef<HTMLDivElement>(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 (
     <>
-      <Modal isOpen={showDownloadModal} onDismiss={() => setShowDownloadModal(false)} maxWidth="512px">
-        <Flex width="100%" padding="30px 24px" flexDirection="column">
-          <Flex justifyContent="space-between" alignItems="center">
-            <Text fontSize="20px" fontWeight="500">
-              <Trans>Download a Wallet</Trans>
-            </Text>
-
-            <ButtonText onClick={() => setShowDownloadModal(false)} style={{ lineHeight: 0 }}>
-              <X size={24} color={theme.text} />
-            </ButtonText>
-          </Flex>
-
-          <Flex sx={{ gap: '20px' }} marginTop="24px" flexDirection="column" justifyContent="center">
-            {Object.values(SUPPORTED_WALLETS)
-              .filter(e => e.installLink)
-              .map(item => (
-                <DownloadWalletRow
-                  key={item.installLink}
-                  href={item.installLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Image width="24px" src={isDarkMode ? item.icon : item.iconLight} />
-                  {item.name}
-                </DownloadWalletRow>
-              ))}
-          </Flex>
-        </Flex>
-      </Modal>
-
+      <DownloadWalletModal />
       <IntroWrapper ref={step0Ref}>
         <IntroContent>
           {!upToMedium && <Step currentStep={1} direction="vertical" onStepClick={handleStepClick} />}
@@ -437,7 +389,7 @@ function BuyCrypto() {
                     padding="10px"
                     onClick={() => {
                       mixpanelHandler(MIXPANEL_TYPE.TRANSAK_DOWNLOAD_WALLET_CLICKED)
-                      setShowDownloadModal(true)
+                      toggleDownloadWalletModal()
                     }}
                   >
                     <Deposit width={24} height={24} />

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,