chore: merge desktop

README.md

@@ -61,4 +61,4 @@ This is a turbo repo that consist of three main apps.
 
 
 
-<!-- git commit -m "fix: a valid commit message" -->
+<!-- git commit -m "fix: a valid commit message" -->

client/.prettierignore

@@ -7,4 +7,4 @@ dist
 .turbo
 
 
-.next
+.next

client/app/(admin)/_comps/index.ts

@@ -1 +1 @@
-export * from './Sidebar';
+export * from "./Sidebar"

client/app/(core)/settings/_comps/SwitchChains.tsx

@@ -32,7 +32,7 @@ export function SwitchChain() {
             <Row
               key={chain.id}
               title={chain.name}
-              imgComp={<Radial isChecked={chainId === chain.id} />}
+              imgComp={<Radial isChecked={chainId === chain.id} className='mr-4' />}
               hideArrow
               onClick={() => {
                 switchChain({ chainId: chain.id });

client/app/(core)/settings/page.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Navbar, Row, SimpleRow, Spinner, TextH } from '@/comps';
 import { IoMoon, IoPersonOutline } from 'react-icons/io5';
-import { AppStores, use3Wagmi, useAppRouter } from '@/lib';
+import { AppStores, Tokens, use3Wagmi, useAppRouter } from '@/lib';
 import { BiLogOut, BiSun } from 'react-icons/bi';
 import { useBalance } from 'wagmi';
 import { SwitchChain } from './_comps';
@@ -33,6 +33,7 @@ export default function SettingsPage() {
         <div className="w-full my-4 bg-secondary px-4 rounded-md">
           <SimpleRow left={'Name'} right={store.userInfo?.name!} />
           <SimpleRow left={'Email'} right={store.userInfo?.email!} />
+          {/* <Balance address={address} title={Tokens.CELO.symbol} /> */}
           <Balance address={address} title={'celo'} />
           <Balance address={address} title={'cUSD'} tokenAddress="0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1" />
           <SimpleRow left={'Address'} right={AddressFn.shortenAddress(address)} isLast />

client/app/(others)/_comps/Balance.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { use3Wagmi, AddressFn } from '@/lib';
+import { useBalance } from 'wagmi';
+
+export function Balance(props: { tokenAddress?: `0x${string}` }) {
+  const { address } = use3Wagmi();
+
+  const { isLoading, error, data } = useBalance({
+    address: address as `0x${string}`,
+    token: props.tokenAddress,
+  });
+
+  if (isLoading) return <p>...</p>;
+  if (error) return <p>...</p>;
+
+  return <>{AddressFn.shortValue(data.value!)}</>;
+}

client/app/(others)/_comps/TokenSelector.tsx

@@ -1,6 +1,6 @@
-import { Token } from '@/lib';
-import { TokenIcon } from '@/public/tokens/TokenIcon';
-import { BiChevronDown } from 'react-icons/bi';
+import { Token } from "@/lib";
+import { TokenIcon } from "@/public/tokens/TokenIcon";
+import { BiChevronDown } from "react-icons/bi";
 
 export function TokenSelector(props: { onClick: VoidFunction; token: Token }) {
   return (

client/app/(others)/_comps/index.ts

@@ -1 +1,2 @@
 export * from './TokenSelector';
+export * from './Balance';

client/app/(others)/dash-airtime/3.Confirm.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client'
 import React from 'react';
 
 export function ConfirmTransaction() {

client/app/(others)/dash-receive/WalletInfo.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client'
 import { TextP, AppButton, SimpleRow } from '@/comps';
 import { use3Wagmi } from '@/lib';
 import { QRCodeSVG } from 'qrcode.react';

client/app/(others)/dash-swap/Currencies.tsx

@@ -1,7 +1,9 @@
-import { Token, TokenList } from '@/lib';
+import { ChainId, Token, TokenAddresses, TokenList, use3Wagmi } from '@/lib';
 import { TokenIcon } from '@/public/tokens/TokenIcon';
-import { BottomSheet, Row } from '@/comps';
-import { useSwap } from './useAcctBalance';
+import { BottomSheet, Row, TextP } from '@/comps';
+import { useSwap } from './useSwap';
+import { useAccount } from 'wagmi';
+import { Balance } from '../_comps';
 
 export function BottomCurrencies() {
   const { update, showTokens } = useSwap();
@@ -23,15 +25,21 @@ export function BottomCurrencies() {
 
 export function CurrencyRow(props: { val: Token }): React.JSX.Element {
   const { update, lastClicked, selectedToken } = useSwap();
+  const { chainId } = useAccount();
 
   return (
     <Row
       title={props.val.name}
       subtitle={props.val.id}
       hideArrow
       color={props.val.color}
-      // trailingText={'...'}
+      trailingComp={
+        <TextP>
+          <Balance tokenAddress={TokenAddresses[chainId! as ChainId][props.val.id] as `0x${string}`} />
+        </TextP>
+      }
       // trailingText={isLoading ? '...' : data?.value.toString()}
+      // trailingText={balances[props.val.id]}
       imgComp={<TokenIcon token={props.val} size="s" className="mr-3" />}
       onClick={() => {
         if (lastClicked === 'SEND') {

client/app/(others)/dash-swap/Swap.tsx

@@ -0,0 +1,152 @@
+'use client';
+import { AppButton } from '@/comps';
+import { Celo, ChainId, fromWei, fromWeiRounded, TokenAddresses, TokenFn, TokenId, Tokens } from '@/lib';
+import React, { useEffect, useMemo } from 'react';
+import { IoSwapVertical } from 'react-icons/io5';
+import { ChangeSection } from './ValueSection';
+import { useAccount } from 'wagmi';
+import { useSwap } from './useSwap';
+import { useSwapQuote } from './swap/useSwapQuote';
+import { toast } from 'sonner';
+
+export default function Swap() {
+  const { selectedToken, update, exchangeValue, balances, ...store } = useSwap();
+  const { address, chainId, isConnected } = useAccount();
+  // const [fieldValue, setFieldValue] = useState();
+  const tokensForChain = useMemo(() => {
+    return chainId ? TokenFn.getTokenOptionsByChainId(chainId) : TokenFn.getTokenOptionsByChainId(Celo.chainId);
+  }, [chainId]);
+
+  const swappableTokenOptions = useMemo(() => {
+    return TokenFn.getSwappableTokenOptions(selectedToken.fromTokens.id, chainId ? chainId : Celo.chainId);
+  }, [chainId, exchangeValue]);
+
+  const { isLoading, quote, rate } = useSwapQuote(
+    exchangeValue.fromToken,
+    store.direction,
+    selectedToken.fromTokens.id,
+    selectedToken.toTokens.id
+  );
+  // useEffect(() => {
+  //   if (store.address === null || store.chainId === null) {
+  //     if (address && chainId) {
+  //       update({
+  //         address,
+  //         chainId,
+  //       });
+  //     }
+  //   }
+  // }, []);
+
+  useEffect(() => {
+    // setFieldValue('quote', quote);
+    update({
+      quote: store.quote,
+    });
+  }, [store.quote]);
+
+  useEffect(() => {
+    if (
+      chainId &&
+      isConnected &&
+      !TokenFn.isSwappable(selectedToken.fromTokens.id, selectedToken.toTokens.id, chainId)
+    ) {
+      update({
+        selectedToken: {
+          ...selectedToken,
+          toTokens: TokenFn.getTokenById(swappableTokenOptions.length < 1 ? TokenId.cUSD : swappableTokenOptions[0])!,
+        },
+      });
+      // setFieldValue('toTokenId', swappableTokenOptions.length < 1 ? TokenId.cUSD : swappableTokenOptions[0]);
+    }
+  }, [chainId, exchangeValue.fromToken, swappableTokenOptions, isConnected]);
+
+  const roundedBalance = fromWeiRounded(
+    balances[selectedToken.fromTokens.id],
+    Tokens[selectedToken.fromTokens.id].decimals
+  );
+  const isRoundedBalanceGreaterThanZero = Boolean(Number.parseInt(roundedBalance) > 0);
+  const onClickUseMax = () => {
+    update({
+      amount: fromWei(balances[selectedToken.fromTokens.id], Tokens[selectedToken.fromTokens.id].decimals),
+    });
+
+    if (selectedToken.fromTokens.id === TokenId.CELO) {
+      toast.warning('Consider keeping some CELO for transaction fees');
+    }
+  };
+
+  const onSubmit = () => {
+    console.log('selected from', exchangeValue.fromToken.toString());
+    console.log('selected to', exchangeValue.toToken.toString());
+    update({
+      showConfirm: true,
+    });
+  };
+  return (
+    <div>
+      <div className="w-full relative bg-background">
+        <ChangeSection
+          title={'You send'}
+          balance={`4000 ${Tokens.CELO}`}
+          // balance={`4000 ${selectedToken.fromTokens.symbol ?? Tokens.CELO}`}
+          token={selectedToken.fromTokens}
+          onTokenClick={() => {
+            update({
+              showTokens: true,
+              lastClicked: 'SEND',
+            });
+          }}
+          value={exchangeValue.fromToken.toString()}
+          onChange={function (val: string): void {
+            update({
+              exchangeValue: {
+                toToken: parseInt(val) * 1.56,
+                fromToken: parseInt(val),
+              },
+            });
+          }}
+          tokenAddress={TokenAddresses[chainId! as ChainId][selectedToken.fromTokens.id] as `0x${string}`}
+        />
+
+        <div
+          className="my-1 flex items-center justify-center absolute bottom-[40%] left-[45%] "
+          onClick={() => {
+            update({
+              selectedToken: {
+                toTokens: selectedToken.fromTokens,
+                fromTokens: selectedToken.toTokens,
+              },
+            });
+          }}
+        >
+          <div className="bg-card p-2 rounded-lg border-4 border-background">
+            <IoSwapVertical size={24} className="text-primary" />
+          </div>
+        </div>
+
+        <ChangeSection
+          title={'You receive'}
+          balance={`4000 ${selectedToken.toTokens.symbol}`}
+          token={selectedToken.toTokens}
+          isReadOnly
+          onTokenClick={() => {
+            update({
+              showTokens: true,
+              lastClicked: 'RECEIVE',
+            });
+          }}
+          value={exchangeValue.toToken.toString()}
+          onChange={function (val: string): void {}}
+          tokenAddress={TokenAddresses[chainId! as ChainId][selectedToken.toTokens.id] as `0x${string}`}
+        />
+      </div>
+      <div className='flex flex-col items-center justify-center w-full'>
+        {!isLoading && rate ? `${rate} ${selectedToken.fromTokens.id} ~ 1 ${selectedToken.toTokens.id}` : '...'}
+        <AppButton className="w-[75%]" onClick={onSubmit}>
+          Continue
+        </AppButton>
+      </div>
+    </div>
+  );
+}

client/app/(others)/dash-swap/SwapConfirm.tsx

@@ -0,0 +1,91 @@
+'use client';
+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 './useSwap';
+import { AppButton, TextH, TextP } from '@/comps';
+
+export default function SwapConfirm() {
+  // 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 className="px-5 py-2 gap-y-2 w-full flex flex-col items-center space-y-3">
+      ConfirmUi
+      <TextH>You are about to swap 0.03 CELO for 45 cUSD</TextH>
+      <TextP>Rate 0.08/celo</TextP>
+      <AppButton>Confirm Transaction</AppButton>
+    </div>
+  );
+}