feat(evm): add activity section (#395)

bob-collective · Jan 24, 2025 · e4adea0 · e4adea0
1 parent 73c8f7b
commit e4adea0
Show file tree

Hide file tree

Showing 79 changed files with 1,443 additions and 998 deletions.
diff --git a/apps/evm/package.json b/apps/evm/package.json
@@ -37,7 +37,6 @@
     "@sentry/nextjs": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-store": "catalog:",
-    "@tanstack/react-virtual": "catalog:",
     "@vercel/kv": "catalog:",
     "@wagmi/core": "catalog:",
     "big.js": "catalog:",

diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.style.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.style.tsx
@@ -1,12 +1,9 @@
-import { Card, Flex } from '@gobob/ui';
+import { Card } from '@gobob/ui';
 import styled from 'styled-components';
 
-const StyledFlex = styled(Flex)`
-  width: 100%;
-`;
-
 const StyledCard = styled(Card)`
   width: 100%;
+  min-width: 100%;
 `;
 
-export { StyledCard, StyledFlex };
+export { StyledCard };
diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx
@@ -1,18 +1,23 @@
 'use client';
 
 import { ChainId, getChainIdByChainName, getChainName } from '@gobob/chains';
-import { Tabs, TabsItem } from '@gobob/ui';
+import { useAccount as useSatsAccount } from '@gobob/sats-wagmi';
+import { Button, Card, Flex, Skeleton, SolidClock, Span, Spinner, Tabs, TabsItem } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { useRouter } from 'next/navigation';
 import { Key, useCallback, useEffect, useMemo, useState } from 'react';
+import { useAccount } from 'wagmi';
 
-import { Layout, TransactionList } from '../components';
+import { BannerCarousel } from '../components/BannerCarousel';
 
-import { StyledCard, StyledFlex } from './Bridge.style';
+import { StyledCard } from './Bridge.style';
 import { BridgeForm } from './components';
-import { useGetTransactions } from './hooks';
 
+import { Main } from '@/components';
+import { useConnectModal } from '@/connect-ui';
 import { L1_CHAIN, L2_CHAIN } from '@/constants';
+import { useGetBridgeTransactions } from '@/hooks';
+import { SharedStoreProfileTxStatus, SharedStoreProfileTxType, store } from '@/lib/store';
 import { TransactionDirection } from '@/types';
 
 const externalUnsupportedTokens = ['LBTC'];
@@ -50,15 +55,16 @@ interface Props {
 }
 
 const Bridge = ({ searchParams }: Props) => {
-  const {
-    data: transactions,
-    isInitialLoading: isTransactionsInitialLoading,
-    refetch,
-    txPendingUserAction
-  } = useGetTransactions();
-
   const router = useRouter();
 
+  const { txPendingUserAction, isPending } = useGetBridgeTransactions();
+  const { open } = useConnectModal();
+
+  const { address: evmAddress } = useAccount();
+  const { address: btcAddress } = useSatsAccount();
+
+  const isLoggedIn = !!(evmAddress || btcAddress);
+
   const urlSearchParams = useMemo(() => new URLSearchParams(searchParams), [searchParams]);
   const type = (urlSearchParams.get('type') as Type) || Type.Deposit;
   const direction = type === Type.Deposit ? TransactionDirection.L1_TO_L2 : TransactionDirection.L2_TO_L1;
@@ -122,6 +128,37 @@ const Bridge = ({ searchParams }: Props) => {
     urlSearchParams.set('network', network);
   };
 
+  const hasPendingTx = txPendingUserAction && txPendingUserAction > 0;
+
+  const handleOpenProfile = () => {
+    store.setState((state) => ({
+      ...state,
+      shared: {
+        ...state.shared,
+        profile: {
+          ...state.shared.profile,
+          isOpen: true,
+          selectedTab: 'activity',
+          transactions: {
+            filters: {
+              ...state.shared.profile.transactions.filters,
+              status: hasPendingTx ? SharedStoreProfileTxStatus.NEEDED_ACTION : undefined,
+              type: SharedStoreProfileTxType.NATIVE_BRIDGE
+            }
+          }
+        }
+      }
+    }));
+  };
+
+  const handleActivity = () => {
+    if (!isLoggedIn) {
+      return open({ onConnectBtc: handleOpenProfile, onConnectEvm: handleOpenProfile });
+    }
+
+    handleOpenProfile();
+  };
+
   useEffect(() => {
     const chain = getChain();
 
@@ -140,51 +177,72 @@ const Bridge = ({ searchParams }: Props) => {
   const tabsDisabledKeys = isWithdrawTabDisabled ? [Type.Withdraw] : undefined;
 
   return (
-    <Layout>
-      <StyledFlex alignItems='flex-start' direction={{ base: 'column', md: 'row' }} gap='2xl' marginTop='xl'>
-        <StyledCard>
-          <Tabs
-            fullWidth
-            disabledKeys={tabsDisabledKeys}
-            selectedKey={type}
-            size='lg'
-            onSelectionChange={handleChangeTab}
-          >
-            <TabsItem key={Type.Deposit} title={<Trans>Deposit</Trans>}>
-              <></>
-            </TabsItem>
-            <TabsItem
-              key={Type.Withdraw}
-              title={<Trans>Withdraw</Trans>}
-              tooltipProps={{
-                isDisabled: !isWithdrawTabDisabled,
-                label: <Trans>Withdrawals back to BTC are currently not supported</Trans>
-              }}
+    <Main maxWidth='lg' padding='md'>
+      <BannerCarousel hasImgOpacity />
+      <Flex justifyContent='center' marginTop='2xl' style={{ width: '100%' }}>
+        <Flex direction='column' gap='md' style={{ width: '100%' }}>
+          <Flex justifyContent='flex-end'>
+            <Button size='s' style={{ gap: 4, alignItems: 'center' }} onPress={handleActivity}>
+              <SolidClock />
+              {isLoggedIn && isPending ? (
+                <Skeleton height='1.5rem' width='5rem' />
+              ) : txPendingUserAction && txPendingUserAction > 0 ? (
+                <Card
+                  alignItems='center'
+                  background='primary-500'
+                  direction='row'
+                  gap='s'
+                  paddingX='md'
+                  paddingY='xs'
+                  rounded='s'
+                >
+                  <Span size='xs'>
+                    <Trans>Action needed</Trans>
+                  </Span>
+                  <Spinner color='default' size='12' thickness={2} />
+                </Card>
+              ) : (
+                <Trans>Activity</Trans>
+              )}
+            </Button>
+          </Flex>
+          <StyledCard>
+            <Tabs
+              fullWidth
+              disabledKeys={tabsDisabledKeys}
+              selectedKey={type}
+              size='lg'
+              onSelectionChange={handleChangeTab}
             >
-              <></>
-            </TabsItem>
-          </Tabs>
-          <BridgeForm
-            bridgeOrigin={bridgeOrigin}
-            chain={chain}
-            direction={direction}
-            isBobBridgeDisabled={isBobBridgeDisabled}
-            isExternalBridgeDisabled={isExternalBridgeDisabled}
-            symbol={symbol}
-            onChangeChain={handleChangeChain}
-            onChangeOrigin={handleChangeOrigin}
-            onChangeSymbol={handleChangeSymbol}
-          />
-        </StyledCard>
-        <TransactionList
-          data={transactions}
-          isInitialLoading={isTransactionsInitialLoading}
-          txPendingUserAction={txPendingUserAction}
-          onProveSuccess={refetch.bridge}
-          onRelaySuccess={refetch.bridge}
-        />
-      </StyledFlex>
-    </Layout>
+              <TabsItem key={Type.Deposit} title={<Trans>Deposit</Trans>}>
+                <></>
+              </TabsItem>
+              <TabsItem
+                key={Type.Withdraw}
+                title={<Trans>Withdraw</Trans>}
+                tooltipProps={{
+                  isDisabled: !isWithdrawTabDisabled,
+                  label: <Trans>Withdrawals back to BTC are currently not supported</Trans>
+                }}
+              >
+                <></>
+              </TabsItem>
+            </Tabs>
+            <BridgeForm
+              bridgeOrigin={bridgeOrigin}
+              chain={chain}
+              direction={direction}
+              isBobBridgeDisabled={isBobBridgeDisabled}
+              isExternalBridgeDisabled={isExternalBridgeDisabled}
+              symbol={symbol}
+              onChangeChain={handleChangeChain}
+              onChangeOrigin={handleChangeOrigin}
+              onChangeSymbol={handleChangeSymbol}
+            />
+          </StyledCard>
+        </Flex>
+      </Flex>
+    </Main>
   );
 };
 

diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BobBridgeForm.tsx
@@ -205,7 +205,8 @@ const BobBridgeForm = ({
         to: recipient,
         l1Token: l1Address,
         l2Token: l2Address,
-        type: TransactionType.Bridge
+        type: TransactionType.Bridge,
+        logoUrl: selectedToken.l1Token.logoUrl
       };
 
       const to = recipient || address!;
@@ -297,7 +298,8 @@ const BobBridgeForm = ({
         to: recipient,
         l1Token: l1Address,
         l2Token: l2Address,
-        type: TransactionType.Bridge
+        type: TransactionType.Bridge,
+        logoUrl: selectedToken.l2Token.logoUrl
       };
 
       const to = recipient || address!;

diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/components/BridgeForm/BridgeForm.tsx
@@ -13,7 +13,6 @@ import { useAccount as useSatsAccount } from '@gobob/sats-wagmi';
 
 import { BridgeTransactionModal, GatewayTransactionModal } from '../../../components';
 import { BridgeOrigin } from '../../Bridge';
-import { useGetTransactions } from '../../hooks';
 import { ChainSelect } from '../ChainSelect';
 import { ExternalBridgeForm } from '../ExternalBridgeForm';
 
@@ -22,7 +21,7 @@ import { StyledChainsGrid, StyledRadio } from './BridgeForm.style';
 import { BtcBridgeForm } from './BtcBridgeForm';
 
 import { INTERVAL, L1_CHAIN, L2_CHAIN } from '@/constants';
-import { TokenData } from '@/hooks';
+import { TokenData, useGetBridgeTransactions, useGetGatewayTransactions } from '@/hooks';
 import { gatewaySDK } from '@/lib/bob-sdk';
 import { bridgeKeys } from '@/lib/react-query';
 import { BridgeTransaction, InitBridgeTransaction, InitGatewayTransaction, TransactionDirection } from '@/types';
@@ -80,7 +79,9 @@ const BridgeForm = ({
   const { i18n } = useLingui();
   const { connector } = useSatsAccount();
 
-  const { refetch: refetchTransactions, addPlaceholderTransaction } = useGetTransactions();
+  const { refetch: refetchBridgeTransactions, addPlaceholderTransaction: addBridgePlaceholderTransaction } =
+    useGetBridgeTransactions();
+  const { refetch: refetchGatewayTransactions } = useGetGatewayTransactions();
 
   const [bridgeModalState, setBridgeModalState] = useState<TransactionModalState>({
     isOpen: false,
@@ -120,9 +121,9 @@ const BridgeForm = ({
   };
 
   const handleBridgeSuccess = (data: BridgeTransaction) => {
-    addPlaceholderTransaction.bridge(data);
+    addBridgePlaceholderTransaction(data);
 
-    refetchTransactions.bridge();
+    refetchBridgeTransactions();
 
     setBridgeModalState({ isOpen: true, data, step: 'submitted' });
   };
@@ -140,7 +141,7 @@ const BridgeForm = ({
   };
 
   const handleGatewaySuccess = (data: InitGatewayTransaction) => {
-    refetchTransactions.gateway();
+    refetchGatewayTransactions();
 
     setGatewayModalState({ isOpen: true, data });
 

diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/hooks/index.ts b/apps/evm/src/app/[lang]/(bridge)/bridge/hooks/index.ts
diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/hooks/useGetTransactions.ts b/apps/evm/src/app/[lang]/(bridge)/bridge/hooks/useGetTransactions.ts