Feat/swap UI

src/app/app.tsx

@@ -2,6 +2,7 @@ import { Route } from 'react-router-dom';
 
 import { AppLayout } from '@components/app.layout';
 import { MerchantDetails } from '@components/proof-of-reserve/components/merchant-details/merchant-details';
+import { Swap } from '@components/swap/swap';
 import { getWagmiConfiguration } from '@functions/configuration.functions';
 import { AttestorDetailsPage } from '@pages/attestor-details/attestor-details-page';
 import { AttestorDetailsSelectPage } from '@pages/attestor-details/attestor-details-select-page';
@@ -47,6 +48,7 @@ export function App(): React.JSX.Element {
                         />
                         <Route path="/merchant-details/:name" element={<MerchantDetails />} />
                         <Route path="/mint-withdraw" element={<Dashboard />} />
+                        <Route path="/swap" element={<Swap />} />
                       </AppLayout>
                     </ProofOfReserveContextProvider>
                   </BalanceContextProvider>

src/app/components/swap/components/swap-amount-card.tsx

@@ -0,0 +1,83 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+import { SwapTokenButton } from './swap-token-button';
+import { SwapTokenLabel } from './swap-token-label';
+
+interface SwapAmountCardProps {
+  direction: string;
+  amount: number;
+  token: string;
+  inUSD: number;
+  balance: number;
+  gasFee?: number;
+}
+
+export function SwapAmountCard({
+  direction,
+  amount,
+  token,
+  inUSD,
+  balance,
+}: SwapAmountCardProps): React.JSX.Element | null {
+  const isBTC = token === 'BTC';
+  const borderColor = isBTC ? 'white.01' : 'rgb(188, 143, 249)';
+  const tokenDisplay = isBTC ? 'BTC' : 'dlcBTC';
+  const tokenImage = isBTC ? '/images/logos/bitcoin-logo.svg' : '/images/logos/dlc-btc-logo.svg';
+
+  return (
+    <VStack
+      p={'15px'}
+      w={'100%'}
+      bg={'background.container.02'}
+      borderRadius={'md'}
+      border={'1px solid'}
+      spacing={'15px'}
+      borderColor={borderColor}
+      alignItems={'flex-start'}
+      boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+    >
+      <Text color={'white'} fontWeight={'600'}>
+        {direction}
+      </Text>
+      <VStack
+        p={'15px'}
+        w={'100%'}
+        bg={'background.content.02'}
+        borderRadius={'md'}
+        border={'1px solid'}
+        spacing={'15px'}
+        borderColor={'white.03'}
+        alignItems={'flex-start'}
+        boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+      >
+        <HStack w={'100%'} justifyContent={'space-between'}>
+          <Text
+            color={'white'}
+            fontWeight={'800'}
+            fontSize={'x-large'}
+            textShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+          >
+            {amount}
+          </Text>
+          {isBTC ? (
+            <SwapTokenButton
+              tokenImage={tokenImage}
+              tokenDisplay={tokenDisplay}
+              onClick={() => {}}
+            />
+          ) : (
+            <SwapTokenLabel tokenImage={tokenImage} tokenDisplay={tokenDisplay} />
+          )}
+        </HStack>
+        <HStack justifyContent={'space-between'} width={'100%'}>
+          <Text color={'white.03'} fontSize={'sm'}>
+            {inUSD}
+          </Text>
+          <Text color={'white.03'} fontSize={'sm'}>
+            Bal. {balance}
+          </Text>
+        </HStack>
+      </VStack>
+    </VStack>
+  );
+}

src/app/components/swap/components/swap-button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Button } from '@chakra-ui/react';
+
+interface SwapButtonProps {
+  onClick: () => void;
+}
+
+export function SwapButton({ onClick }: SwapButtonProps): React.JSX.Element {
+  return (
+    <Button onClick={onClick} w={'100%'} boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}>
+      Swap
+    </Button>
+  );
+}

src/app/components/swap/components/swap-extra-details-card.tsx

@@ -0,0 +1,45 @@
+import { HStack, Text, VStack } from '@chakra-ui/react';
+
+interface SwapExtraDetailsCardProps {
+  gasFee: number;
+}
+
+export function SwapExtraDetailsCard({ gasFee }: SwapExtraDetailsCardProps): React.JSX.Element {
+  return (
+    <VStack
+      p={'15px'}
+      w={'100%'}
+      bg={'background.container.02'}
+      borderRadius={'md'}
+      border={'1px dashed'}
+      spacing={'15px'}
+      borderColor={'white.02'}
+      alignItems={'flex-start'}
+    >
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Gas Fee
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          {gasFee}
+        </Text>
+      </HStack>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Rate
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          1 BTC = 1 dlcBTC
+        </Text>
+      </HStack>
+      <HStack w={'100%'} justifyContent={'space-between'}>
+        <Text color={'white.02'} fontSize={'sm'}>
+          Slippage Tolerance
+        </Text>
+        <Text color={'white.02'} fontSize={'sm'} fontWeight={600}>
+          Auto
+        </Text>
+      </HStack>
+    </VStack>
+  );
+}

src/app/components/swap/components/swap-header.tsx

@@ -0,0 +1,18 @@
+import { HStack, Text } from '@chakra-ui/react';
+
+import { SwapNetworksMenu } from './swap-networks-menu';
+import { SwapSettingsMenu } from './swap-settings-menu';
+
+export function SwapHeader(): React.JSX.Element {
+  return (
+    <HStack w={'100%'} justifyContent={'space-between'}>
+      <Text color={'white'} fontSize={'xx-large'} fontWeight={'600'}>
+        Swap
+      </Text>
+      <HStack>
+        <SwapNetworksMenu isMenuOpen={false} setIsMenuOpen={() => {}} />
+        <SwapSettingsMenu isMenuOpen={false} setIsMenuOpen={() => {}} />
+      </HStack>
+    </HStack>
+  );
+}

src/app/components/swap/components/swap-networks-menu.tsx

@@ -0,0 +1,75 @@
+import { Image, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { EthereumNetworkID } from 'dlc-btc-lib/models';
+import { useAccount, useConfig, useSwitchChain } from 'wagmi';
+
+interface SwapNetworksMenuProps {
+  isMenuOpen: boolean;
+  setIsMenuOpen: (isMenuOpen: boolean) => void;
+}
+
+const getNetworkLogo = (ethereumNetworkId?: EthereumNetworkID) => {
+  switch (ethereumNetworkId) {
+    case EthereumNetworkID.Arbitrum:
+    case EthereumNetworkID.ArbitrumSepolia:
+      return './images/logos/arbitrum-token.svg';
+    case EthereumNetworkID.Sepolia:
+    case EthereumNetworkID.Mainnet:
+      return './images/logos/eth-token.svg';
+    case EthereumNetworkID.BaseSepolia:
+    case EthereumNetworkID.Base:
+      return './images/logos/base-token.svg';
+    default:
+      return './images/logos/arbitrum-token.svg';
+  }
+};
+
+export function SwapNetworksMenu({
+  isMenuOpen,
+  setIsMenuOpen,
+}: SwapNetworksMenuProps): React.JSX.Element | null {
+  const { chains } = useConfig();
+  const { chain, isConnected } = useAccount();
+  const { switchChain } = useSwitchChain();
+  //TODO: maybe add the network logo to the setstate?
+
+  if (!isConnected) {
+    return null;
+  }
+
+  return (
+    <Menu variant={'networkChange'} isOpen={isMenuOpen}>
+      <MenuButton
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        h={'50px'}
+        w={'50px'}
+        bg={'background.content.02'}
+        border={'none'}
+        boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+      >
+        <Image
+          src={getNetworkLogo(chain?.id.toString() as EthereumNetworkID)}
+          alt={'Selected network logo'}
+          w={'35px'}
+          ml={'7px'}
+        />
+      </MenuButton>
+      <MenuList>
+        {chains.map(ethereumNetwork => {
+          return (
+            <MenuItem
+              key={ethereumNetwork.id}
+              value={ethereumNetwork.id}
+              onClick={() => {
+                switchChain({ chainId: ethereumNetwork.id });
+                setIsMenuOpen(!isMenuOpen);
+                getNetworkLogo(chain?.id.toString() as EthereumNetworkID);
+              }}
+            >
+              {ethereumNetwork.name}
+            </MenuItem>
+          );
+        })}
+      </MenuList>
+    </Menu>
+  );
+}

src/app/components/swap/components/swap-settings-menu.tsx

@@ -0,0 +1,29 @@
+import { Image, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+
+interface SwapSettingsMenuProps {
+  isMenuOpen: boolean;
+  setIsMenuOpen: (isMenuOpen: boolean) => void;
+}
+
+export function SwapSettingsMenu({
+  isMenuOpen,
+  setIsMenuOpen,
+}: SwapSettingsMenuProps): React.JSX.Element {
+  return (
+    <Menu variant={'networkChange'} isOpen={isMenuOpen}>
+      <MenuButton
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        h={'50px'}
+        w={'50px'}
+        bg={'background.content.02'}
+        border={'none'}
+        boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+      >
+        <Image src={'./images/gear-icon.svg'} alt={'Gear icon'} w={'30px'} ml={'9px'} />
+      </MenuButton>
+      <MenuList>
+        <MenuItem>Profile Settings</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}

src/app/components/swap/components/swap-token-button.tsx

@@ -0,0 +1,38 @@
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { Button, HStack, Image, Text } from '@chakra-ui/react';
+
+interface SwapTokenButtonProps {
+  tokenImage: string;
+  tokenDisplay: string;
+  onClick: () => void;
+}
+
+export function SwapTokenButton({
+  tokenImage,
+  tokenDisplay,
+  onClick,
+}: SwapTokenButtonProps): React.JSX.Element {
+  return (
+    <Button
+      onClick={onClick}
+      px={'10px'}
+      py={'5px'}
+      w={'150px'}
+      h={'50px'}
+      bg={'white.03'}
+      borderRadius={'md'}
+      border={'1px solid'}
+      borderColor={'white.03'}
+      alignItems={'center'}
+      boxShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+    >
+      <HStack>
+        <Image src={tokenImage} alt={tokenDisplay} w={'35px'} h={'35px'} />
+        <Text color={'white'} fontWeight={'800'} fontSize={'x-large'}>
+          {tokenDisplay}
+        </Text>
+        <ChevronDownIcon boxSize={'35px'} color={'white'} />
+      </HStack>
+    </Button>
+  );
+}

src/app/components/swap/components/swap-token-label.tsx

@@ -0,0 +1,25 @@
+import { HStack, Image, Text } from '@chakra-ui/react';
+
+interface SwapTokenLabelProps {
+  tokenImage: string;
+  tokenDisplay: string;
+}
+
+export function SwapTokenLabel({
+  tokenImage,
+  tokenDisplay,
+}: SwapTokenLabelProps): React.JSX.Element {
+  return (
+    <HStack px={'10px'} py={'5px'} w={'150px'} spacing={'5px'} alignItems={'flex-start'}>
+      <Image src={tokenImage} alt={tokenDisplay} w={'35px'} h={'35px'} />
+      <Text
+        color={'white'}
+        fontWeight={'800'}
+        fontSize={'x-large'}
+        textShadow={'2px 2px 4px rgba(0, 0, 0, 0.5)'}
+      >
+        {tokenDisplay}
+      </Text>
+    </HStack>
+  );
+}

src/app/components/swap/pages/swap-page.tsx

@@ -0,0 +1,11 @@
+import { PageLayout } from '@pages/components/page.layout';
+
+import { Swap } from '../swap';
+
+export function SwapPage(): React.JSX.Element {
+  return (
+    <PageLayout>
+      <Swap />
+    </PageLayout>
+  );
+}