From 090ae4455c4d9da27c4b97a2377b4f6389d19124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?U=C4=9Fur=20Eren?= <contact@ugureren.net>
Date: Wed, 2 Oct 2024 11:19:38 +0300
Subject: [PATCH] feat: Account selection modal

---
 .../components/SelectAccountModal/index.tsx   | 68 +++++++++++++++++++
 client/src/hooks/useModal.ts                  |  2 +
 client/src/pages/Swap.tsx                     |  8 ++-
 client/src/state/application.ts               |  1 +
 client/src/theme/components/icons.tsx         | 20 ++++++
 5 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/SelectAccountModal/index.tsx

diff --git a/client/src/components/SelectAccountModal/index.tsx b/client/src/components/SelectAccountModal/index.tsx
new file mode 100644
index 0000000..7d3a98b
--- /dev/null
+++ b/client/src/components/SelectAccountModal/index.tsx
@@ -0,0 +1,68 @@
+import { useCloseModal, useSelectAccountModal } from 'src/hooks/useModal'
+import { ThemedText } from 'src/theme/components'
+import { RevolutLogo, VenmoLogo } from 'src/theme/components/icons'
+import styled from 'styled-components'
+
+import { PrimaryButton } from '../Button'
+import { Column, Row } from '../Flex'
+import Content from '../Modal/Content'
+import Overlay from '../Modal/Overlay'
+import Portal from '../Portal'
+
+const AccountButtons = styled(Column)`
+  width: 100%;
+`
+
+const StyledAccountModal = styled(Row)`
+  width: 100%;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.bg3};
+  color: ${({ theme }) => theme.neutral1};
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+`
+
+interface AccountButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  Logo: React.FC<React.SVGProps<SVGSVGElement>>
+  name: string
+  currencies: string[]
+}
+
+const AccountButton = ({ Logo, name, currencies, ...props }: AccountButtonProps) => {
+  return (
+    <StyledAccountModal as="button" {...props}>
+      <Row gap={16}>
+        <Logo width={22} height={22} />
+
+        <ThemedText.HeadlineSmall>{name}</ThemedText.HeadlineSmall>
+      </Row>
+
+      <ThemedText.BodySecondary>{currencies.join(', ')}</ThemedText.BodySecondary>
+    </StyledAccountModal>
+  )
+}
+
+export default function SelectAccountModal() {
+  // modal
+  const [isOpen] = useSelectAccountModal()
+  const close = useCloseModal()
+
+  if (!isOpen) return null
+
+  return (
+    <Portal>
+      <Content title="Select account" close={close}>
+        <AccountButtons gap={16}>
+          <AccountButton Logo={RevolutLogo} name="Revolut" currencies={['EUR', 'USD']} />
+          <AccountButton Logo={VenmoLogo} name="Venmo" currencies={['USD']} />
+        </AccountButtons>
+
+        <PrimaryButton>Register new account</PrimaryButton>
+      </Content>
+
+      <Overlay onClick={close} />
+    </Portal>
+  )
+}
diff --git a/client/src/hooks/useModal.ts b/client/src/hooks/useModal.ts
index ef3eb37..5bbe47e 100644
--- a/client/src/hooks/useModal.ts
+++ b/client/src/hooks/useModal.ts
@@ -27,3 +27,5 @@ export const useWalletConnectModal = () => useModal(ModalType.WALLET_CONNECT)
 export const useWalletOverviewModal = () => useModal(ModalType.WALLET_OVERVIEW)
 
 export const useProofGenerationModal = () => useModal(ModalType.PROOF_GENERATION)
+
+export const useSelectAccountModal = () => useModal(ModalType.SELECT_ACCOUNT)
diff --git a/client/src/pages/Swap.tsx b/client/src/pages/Swap.tsx
index fe07039..5a741b9 100644
--- a/client/src/pages/Swap.tsx
+++ b/client/src/pages/Swap.tsx
@@ -4,7 +4,9 @@ import { ChipButton } from 'src/components/ChipButton'
 import { CurrencyButton } from 'src/components/CurrencyButton'
 import { Column, Row } from 'src/components/Flex'
 import { CurrencyInput } from 'src/components/Input'
+import SelectAccountModal from 'src/components/SelectAccountModal'
 import { FIAT_CURRENCIES, TOKEN_CURRENCIES } from 'src/constants/currencies'
+import { useSelectAccountModal } from 'src/hooks/useModal'
 import { ThemedText } from 'src/theme/components'
 import { ChevronDown } from 'src/theme/components/icons'
 import { styled } from 'styled-components'
@@ -79,6 +81,8 @@ export default function SwapPage() {
   const [inputSendValue, setInputSendValue] = useState('')
   const [inputReceiveValue, setInputReceiveValue] = useState('')
 
+  const [, toggleSelectAccountModal] = useSelectAccountModal()
+
   const handleReceiveChange = (event: ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value
     const numericValue = inputValue.replace(/[^0-9]/g, '')
@@ -129,7 +133,7 @@ export default function SwapPage() {
           <RampCard>
             <ThemedText.BodyPrimary>From</ThemedText.BodyPrimary>
 
-            <AccountButton>
+            <AccountButton onClick={toggleSelectAccountModal}>
               <span>Select account</span>
               <ChevronDown width={14} height={14} />
             </AccountButton>
@@ -138,6 +142,8 @@ export default function SwapPage() {
 
         <PrimaryButton disabled>Enter amount</PrimaryButton>
       </Column>
+
+      <SelectAccountModal />
     </Content>
   )
 }
diff --git a/client/src/state/application.ts b/client/src/state/application.ts
index 73c8d98..2886889 100644
--- a/client/src/state/application.ts
+++ b/client/src/state/application.ts
@@ -6,6 +6,7 @@ export enum ModalType {
   WALLET_CONNECT,
   WALLET_OVERVIEW,
   PROOF_GENERATION,
+  SELECT_ACCOUNT,
 }
 
 export type ApplicationSlice = State & Actions
diff --git a/client/src/theme/components/icons.tsx b/client/src/theme/components/icons.tsx
index 93f9ae0..ea4304d 100644
--- a/client/src/theme/components/icons.tsx
+++ b/client/src/theme/components/icons.tsx
@@ -149,3 +149,23 @@ export const LockClosed = (props: SVGProps) => (
     />
   </svg>
 )
+
+export const RevolutLogo = (props: SVGProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 23" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.09792 5.92928H0V22.4999H4.09792V5.92928ZM16.9488 6.87685C16.9488 3.36067 14.0855 0.5 10.5659 0.5H0V4.03877H10.0635C11.6564 4.03877 12.9757 5.29014 13.0049 6.82812C13.0195 7.59821 12.7304 8.32502 12.1911 8.87461C11.6516 9.42435 10.9306 9.72733 10.1612 9.72733H6.24092C6.10174 9.72733 5.98846 9.84041 5.98846 9.97963V13.1248C5.98846 13.1783 6.00498 13.2294 6.03606 13.2724L12.6874 22.5H17.5562L10.8895 13.2472C14.2469 13.0786 16.9488 10.2577 16.9488 6.87685Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const VenmoLogo = (props: SVGProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23" fill="none" {...props}>
+    <path
+      d="M20.154 0.5C20.9818 1.82073 21.355 3.1811 21.355 4.89951C21.355 10.3804 16.5114 17.5004 12.5802 22.5H3.60112L0 1.70001L7.86217 0.978982L9.76611 15.7795C11.5452 12.9799 13.7405 8.58046 13.7405 5.58092C13.7405 3.93909 13.4493 2.82078 12.9942 1.89998L20.154 0.5Z"
+      fill="currentColor"
+    />
+  </svg>
+)