add connect wallet modal & aave/arrakis data

src/components/ConnectWallet.tsx

@@ -0,0 +1,21 @@
+import { useModal } from '../hooks/useModal';
+import Button from './Button';
+
+export default function ConnectWallet() {
+  const { dispatch } = useModal();
+  return (
+    <Button
+      onClick={() =>
+        dispatch({
+          type: 'SET_MODAL',
+          payload: {
+            type: 'CONNECTORS',
+            title: 'Connect Wallet',
+          },
+        })
+      }
+    >
+      Connect
+    </Button>
+  );
+}

src/components/ConnectWalletButton/ConnectWalletButton.tsx → src/components/Connectors/Connectors.tsx

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
 import { useConnect } from 'wagmi';
 
+import { useModal } from '../../hooks/useModal';
 import { useToast } from '../../hooks/useToast';
 import Button from '../Button';
 
-function ConnectWalletButton() {
+export default function Connectors() {
   // const { connector: activeConnector, isConnected } = useAccount();
-  const { connect, connectors, error } = useConnect();
+  const { connect, connectors, error, isSuccess } = useConnect();
   const { dispatch: toastDispatch } = useToast();
+  const { dispatch: modalDispatch } = useModal();
 
   // if (!!activeConnector && isConnected) throw new Error('Connector error!');
 
@@ -19,8 +21,15 @@ function ConnectWalletButton() {
       });
   }, [error]);
 
+  useEffect(() => {
+    if (isSuccess)
+      modalDispatch({
+        type: 'CLEAR_MODAL',
+      });
+  }, [isSuccess]);
+
   return (
-    <div className="md:mt-10">
+    <div>
       <div className="max-w-72 m-auto flex flex-col gap-4">
         {connectors &&
           connectors.map((connector) => (
@@ -38,5 +47,3 @@ function ConnectWalletButton() {
     </div>
   );
 }
-
-export default ConnectWalletButton;

src/components/Connectors/index.tsx

@@ -0,0 +1,3 @@
+import Connectors from './Connectors';
+
+export default Connectors;

src/components/Modal/ConnectorsModal.tsx

@@ -0,0 +1,20 @@
+import ConnectWalletButton from '../Connectors';
+import { CloseModalButton, Container, Inner } from './ui';
+
+export default function ConnectorsModal({
+  handleCloseModal,
+}: {
+  handleCloseModal: () => void;
+}) {
+  return (
+    <Container>
+      <Inner>
+        <CloseModalButton handleClick={handleCloseModal} />
+        <div className="flex flex-col gap-8 md:gap-12">
+          <h1 className="text-lg">Connect Wallet</h1>
+          <ConnectWalletButton />
+        </div>
+      </Inner>
+    </Container>
+  );
+}

src/components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import AddTokens from './AddTokens';
 import { CloseModalButton, Container, Heading, Inner, Message } from './ui';
 
 import { html as disclaimerHtml } from '../../markdown/disclaimer.md';
+import ConnectorsModal from './ConnectorsModal';
 
 type TProps = {
   type: TModalType;
@@ -23,6 +24,8 @@ function Modal({ type, title, status }: TProps) {
     modalDispatch({ type: 'CLEAR_MODAL' });
   };
   switch (type) {
+    case 'CONNECTORS':
+      return <ConnectorsModal handleCloseModal={handleCloseModal} />;
     case 'DISCLAIMER':
       return (
         <Container>

src/components/Modal/ui.tsx

@@ -4,7 +4,7 @@ export function Container({ children }: { children: ReactNode }) {
   return (
     <section
       data-test="modal"
-      className="fixed z-30 flex h-full w-full items-center justify-center bg-breadgray-darkest bg-opacity-95 p-2 sm:p-6"
+      className="fixed z-30 flex h-full w-full items-center justify-center bg-breadgray-darkest bg-opacity-95 p-4"
     >
       {children}
       {/* <div className="flex h-full overflow-auto ">
@@ -15,7 +15,7 @@ export function Container({ children }: { children: ReactNode }) {
 
 export function Inner({ children }: { children: ReactNode }) {
   return (
-    <section className="relative flex max-h-full flex-col items-start rounded bg-breadgray-og-dark bg-opacity-100 px-1 py-14 sm:px-4 md:p-16">
+    <section className="relative flex max-h-full flex-col items-start rounded bg-breadgray-og-dark bg-opacity-100 px-6 py-14 sm:px-8 md:p-16 md:px-12">
       {children}
     </section>
   );

src/hooks/useModal.tsx

@@ -14,7 +14,8 @@ export type TModalType =
   | 'APPROVAL'
   | 'BAKING'
   | 'BURNING'
-  | 'CLAIMING';
+  | 'CLAIMING'
+  | 'CONNECTORS';
 
 export type TModalStatus = 'LOCKED' | 'UNLOCKED';
 

src/modules/dashboard/components/AAVE.tsx

@@ -1,19 +1,26 @@
 import useAAVE from '../hooks/useAAVE';
 
+export const yieldRateFormatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 2,
+  minimumIntegerDigits: 1,
+  maximumFractionDigits: 2,
+  useGrouping: true,
+});
+
 export default function AAVE() {
   const { data } = useAAVE();
 
   return (
-    <section className="flex flex-col gap-4 py-8">
-      <h2 className="font-bold">AAVE</h2>
-      {data && (
-        <dl className="grid grid-cols-2">
-          <dt>Current Yield:</dt>
-          <dd>{data.currentYield}</dd>
-          <dt>% of Pool:</dt>
-          <dd>{data.poolPercentage}</dd>
-        </dl>
-      )}
+    <section className="m-auto flex w-2/3 items-center justify-between p-6">
+      <span>Current Yield</span>
+      <span>
+        {data && (
+          <span className="flex gap-2">
+            <div>%</div>
+            <span>{yieldRateFormatter.format(data.currentYield)}</span>
+          </span>
+        )}
+      </span>
     </section>
   );
 }

src/modules/dashboard/components/Arrakis.tsx

@@ -0,0 +1,13 @@
+import useArrakis from '../hooks/useArrakis';
+import { yieldFormatter } from './Yield/Yield';
+
+export default function Arrakis() {
+  const { data } = useArrakis();
+
+  return (
+    <section className="m-auto flex w-2/3 items-center justify-between p-6">
+      <span>Arrakis TVL </span>
+      {data && yieldFormatter.format(parseFloat(data.tvl))}
+    </section>
+  );
+}

src/modules/dashboard/components/EconomyDisplay.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 
 import { WRAPPER_CLASSES } from '../../../util';
 import useBread from '../hooks/useBread';
+import AAVE from './AAVE';
+import Arrakis from './Arrakis';
 import BreadChart from './BreadChart';
 import Yield from './Yield/Yield';
 
@@ -20,7 +22,8 @@ export default function EconomyDisplay() {
           {data && <BreadChart chartData={data} />}
         </div>
         <Yield />
-        {/* <AAVE /> */}
+        <AAVE />
+        <Arrakis />
       </section>
     </div>
   );

src/modules/dashboard/components/Yield/ClaimYield.tsx

@@ -4,7 +4,7 @@ import { useContractWrite } from 'wagmi';
 
 import BREADABI from '../../../../BreadPolygon.json';
 import Button from '../../../../components/Button';
-import ConnectWalletButton from '../../../../components/ConnectWalletButton';
+import ConnectWallet from '../../../../components/ConnectWallet';
 import { ChainConfiguration } from '../../../../config';
 import { useConnectedUser } from '../../../../hooks/useConnectedUser';
 import { useModal } from '../../../../hooks/useModal';
@@ -93,7 +93,7 @@ export default function ClaimYield({ amount }: IProps) {
       ) : (
         <>
           <span>connect wallet to claim</span>
-          <ConnectWalletButton />
+          <ConnectWallet />
         </>
       )}
     </section>

src/modules/dashboard/hooks/useArrakis.ts

@@ -1,60 +1,19 @@
-import { ApolloClient, InMemoryCache, gql, useQuery } from '@apollo/client';
-import { useMemo } from 'react';
-import { formatUnits } from 'viem';
-
-const SUBGRAPH_URL =
-  'https://api.thegraph.com/subgraphs/name/messari/arrakis-finance-polygon';
-
-const arrakisClient = new ApolloClient({
-  uri: SUBGRAPH_URL,
-  cache: new InMemoryCache(),
-});
-
-const ARRAKIS_QUERY = gql`
-  query vault {
-    vault(id: "0x3055c602454dde1bda3e98b1bcfd2ed68ab9789e") {
-      name
-      totalValueLockedUSD
-      _token0 {
-        name
-      }
-      _token0Amount
-      _token1 {
-        name
-      }
-      _token1Amount
-    }
-  }
-`;
+import { useEffect, useState } from 'react';
 
 export default function useArrakis() {
-  const { data: apolloData, loading } = useQuery(ARRAKIS_QUERY, {
-    client: arrakisClient,
-  });
-
-  const data = useMemo(() => {
-    if (!apolloData) return null;
-    const {
-      vault: {
-        name,
-        totalValueLockedUSD,
-        _token0: { name: token0Name },
-        _token0Amount,
-        _token1: { name: token1Name },
-        _token1Amount,
-      },
-    } = apolloData;
+  const [data, setData] = useState<{ tvl: string } | null>(null);
 
-    return {
-      vaultName: name,
-      totalValueLockedUSD,
-      token0: { name: token0Name, amount: formatUnits(_token0Amount, 18) },
-      token1: { name: token1Name, amount: formatUnits(_token1Amount, 18) },
-    };
-  }, [apolloData]);
+  useEffect(() => {
+    fetch('https://indexer.api.arrakis.finance/api/vault?version=V1&name=bread')
+      .then((res) => res.json())
+      .then((jsonData) => {
+        setData({
+          tvl: jsonData.vaults[0].tvl,
+        });
+      });
+  }, []);
 
   return {
     data,
-    loading,
   };
 }

src/routes/bake.tsx

@@ -1,9 +1,9 @@
 import { Suspense, lazy } from 'react';
 import { useAccount, useNetwork } from 'wagmi';
-import ConnectWalletButton from '../components/ConnectWalletButton';
 
 import BakeLayout from '../components/BakeLayout';
 
+import ConnectWallet from '../components/ConnectWallet';
 import UnsupportedNetwork from '../components/UnsupportedNetwork/UnsupportedNetwork';
 import config from '../config';
 
@@ -25,7 +25,7 @@ export function Bake() {
   if (!activeConnector || !activeChain || !accountAddress || !isConnected) {
     return (
       <BakeLayout>
-        <ConnectWalletButton />
+        <ConnectWallet />
       </BakeLayout>
     );
   }