chore: landing page content box

.commitlintrc.json

@@ -20,3 +20,4 @@
     ]
   }
 }
+

.husky/pre-commit

@@ -1 +1 @@
-cd client && yarn lint:write
+# cd client && yarn lint:write

.vscode/settings.json

@@ -2,6 +2,7 @@
   "cSpell.words": [
     "Alfajores",
     "celo",
+    "extralight",
     "fhenix",
     "hookform",
     "Mobarter",

README.md

@@ -60,3 +60,5 @@ This is a turbo repo that consist of three main apps.
 - [Vercel link](https://pocketramp.vercel.app/)
 
 
+
+<!-- git commit -m "fix: a valid commit message" -->

client/app/dash-swap/Confirm.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { useApproveTransaction } from './swap/useApproveTransaction';
+import { useSwapTransaction } from './swap/useSwapTransaction';
+import { logger } from '@/utils';
+import { useAccount } from 'wagmi';
+import { useSwap } from './useAcctBalance';
+
+export function ConfirmSwap() {
+  const { selectedToken, update, exchangeValue, balances, ...store } = useSwap();
+  const { address, chainId, isConnected } = useAccount();
+  const { sendApproveTx, isApproveTxSuccess, isApproveTxLoading } = useApproveTransaction(
+    chainId!,
+    selectedToken.fromTokens.id,
+    exchangeValue.fromToken.toString(),
+    address
+  );
+
+  const [isApproveConfirmed, setApproveConfirmed] = useState(false);
+
+  const { sendSwapTx, isSwapTxLoading, isSwapTxSuccess } = useSwapTransaction(
+    chainId,
+    fromTokenId,
+    toTokenId,
+    amountWei,
+    thresholdAmountWei,
+    direction,
+    address,
+    isApproveConfirmed
+  );
+
+  const onSubmit = async () => {
+    if (!rate || !amountWei || !address || !isConnected) return;
+
+    if (!sendApproveTx || isApproveTxSuccess || isApproveTxLoading) {
+      logger.debug('Approve already started or finished, ignoring submit');
+      return;
+    }
+
+    setIsModalOpen(true);
+
+    try {
+      logger.info('Sending approve tx');
+      const approveResult = await sendApproveTx();
+      const approveReceipt = await approveResult.wait(1);
+      toastToYourSuccess('Approve complete, starting swap', approveReceipt.transactionHash, chainId);
+      setApproveConfirmed(true);
+      logger.info(`Tx receipt received for approve: ${approveReceipt.transactionHash}`);
+    } catch (error) {
+      logger.error('Failed to approve token', error);
+      setIsModalOpen(false);
+    }
+  };
+
+  // TODO find a way to have this trigger from the onSubmit
+  useEffect(() => {
+    if (isSwapTxLoading || isSwapTxSuccess || !isApproveTxSuccess || !sendSwapTx) return;
+    logger.info('Sending swap tx');
+
+    sendSwapTx()
+      .then((swapResult) => swapResult.wait(1))
+      .then((swapReceipt) => {
+        logger.info(`Tx receipt received for swap: ${swapReceipt.transactionHash}`);
+        toastToYourSuccess('Swap Complete!', swapReceipt.transactionHash, chainId);
+        // dispatch(setFormValues(null));
+      })
+      .catch((e) => {
+        logger.error('Swap failure:', e);
+      })
+      .finally(() => setIsModalOpen(false));
+  }, [isApproveTxSuccess, isSwapTxLoading, isSwapTxSuccess, sendSwapTx, chainId, dispatch]);
+
+  //   const onClickBack = () => {
+  //     dispatch(setFormValues(null));
+  //   };
+
+  const onClickRefresh = () => {
+    // Note, rates automatically re-fetch regularly
+    refetch().catch((e) => logger.error('Failed to refetch quote:', e));
+  };
+
+  return <div>ConfirmUi</div>;
+}

client/app/dash-swap/Currencies.tsx

@@ -0,0 +1,51 @@
+import { Token, TokenList } from '@/lib';
+import { TokenIcon } from '@/public/tokens/TokenIcon';
+import { BottomSheet, Row } from '@/comps';
+import { useSwap } from './useAcctBalance';
+
+export function BottomCurrencies() {
+  const { update, showTokens } = useSwap();
+  return (
+    <BottomSheet
+      show={showTokens}
+      onClose={() => {
+        update({ showTokens: false });
+      }}
+    >
+      <div className="w-full">
+        {TokenList.map((val, i) => (
+          <CurrencyRow key={i} val={val} />
+        ))}
+      </div>
+    </BottomSheet>
+  );
+}
+
+export function CurrencyRow(props: { val: Token }): React.JSX.Element {
+  const { update, lastClicked, selectedToken } = useSwap();
+
+  return (
+    <Row
+      title={props.val.name}
+      subtitle={props.val.id}
+      hideArrow
+      color={props.val.color}
+      // trailingText={'...'}
+      // trailingText={isLoading ? '...' : data?.value.toString()}
+      imgComp={<TokenIcon token={props.val} size="s" className="mr-3" />}
+      onClick={() => {
+        if (lastClicked === 'SEND') {
+          update({
+            selectedToken: { ...selectedToken, fromTokens: props.val },
+            showTokens: false,
+          });
+        } else {
+          update({
+            selectedToken: { ...selectedToken, toTokens: props.val },
+            showTokens: false,
+          });
+        }
+      }}
+    />
+  );
+}

client/app/dash-swap/ValueSection.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { TextP } from '@/comps';
+import { ChainId, Token } from '@/lib';
+import React from 'react';
+import { TokenIcon } from '@/public/tokens/TokenIcon';
+import { BiChevronDown } from 'react-icons/bi';
+import { useBalance } from 'wagmi';
+import { TokenSelector } from '../_comps';
+
+export function ChangeSection(props: {
+  isReadOnly?: boolean;
+  title: string;
+  balance: string;
+  address: string;
+  chainId: number;
+  value: string;
+  onChange: (val: string) => void;
+  token: Token;
+  onTokenClick: VoidFunction;
+}) {
+  // const { address, chainId } = useAccount();
+  const chainValue = props.chainId as ChainId;
+  // const { isLoading, error, data } = useBalance({
+  //   address: props.address as `0x${string}`,
+  //   token: '0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1',
+  //   // token: TokenAddresses[chainValue][props.token.id] as `0x${string}`,
+  //   // token: TokenFn.getTokenAddress(props.val.id, chainId!) as `0x${string}`,
+  //   // token: TokenAddresses[42220].USDC as `0x${string}`,
+  // });
+
+  return (
+    <div className="bg-card w-full mb-1 flex flex-col items-center justify-between rounded-lg px-3 py-4">
+      <div className="flex items-center justify-between w-full">
+        <TextP>{props.title}</TextP>
+        <TextP className="text-muted text-[10px]">Bal: ...</TextP>
+        {/* Bal: {isLoading ? '...' : data?.value!.toString().substring(0, 4)} */}
+      </div>
+
+      <div className="w-full flex items-center justify-between">
+        <input
+          type="number"
+          placeholder="0.00"
+          className={`outline-none w-full
+                border-none bg-transparent font-light
+                px-2 py-2 text-2xl tracking-wide mr-2`}
+          pattern={'[0-9]*'}
+          inputMode="numeric"
+          readOnly={props.isReadOnly}
+          value={props.value}
+          onChange={(e) => {
+            props.onChange(e.target.value);
+          }}
+        />
+        <TokenSelector onClick={props.onTokenClick} token={props.token} />
+      </div>
+
+      <div className="flex justify-between items-center w-full">
+        <TextP className="text-primary text-[10px]"> ~ $9000 Equi</TextP>
+        <TextP className="text-primary text-[10px] font-bold">MAX</TextP>
+      </div>
+    </div>
+  );
+}

client/app/dash-swap/accounts/fetchBalances.ts

@@ -0,0 +1,32 @@
+import { BigNumberish, BrowserProvider, Contract } from 'ethers';
+import { getProvider } from '../providers';
+import { AddressFn, isStale, TokenId, BALANCE_STALE_TIME, TokenFn } from '@/lib';
+import { App3Abi } from '@/contract/abi';
+
+interface FetchBalancesParams {
+  address: string;
+  chainId: number;
+}
+
+export type AccountBalances = Record<TokenId, string>;
+
+export async function fetchBalances(address: string, chainId: number) {
+  AddressFn.validateAddress(address, 'fetchBalances');
+
+  const tokenBalances: Partial<Record<TokenId, string>> = {};
+
+  for (const tokenId of TokenFn.getTokenOptionsByChainId(chainId)) {
+    const tokenAddr = TokenFn.getTokenAddress(tokenId, chainId);
+    // const provider = getProvider(chainId);
+
+    const providerX = new BrowserProvider(window.ethereum);
+
+    const tokenContract = new Contract(tokenAddr, App3Abi.erc20ABI, providerX);
+
+    const balance: BigNumberish = await tokenContract.balanceOf(address);
+
+    tokenBalances[tokenId] = balance.toString();
+  }
+
+  return tokenBalances as Record<TokenId, string>;
+}