feat: Account selection modal

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>
+  )
+}

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)

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>
   )
 }

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

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>
+)