Update network switcher layout on history tab (#585)

* Refactor History EmptyView * Update network switcher layout on history tab * Use existing filterChain on History tab
zeriontech · Aug 16, 2024 · 59acff3 · 59acff3
1 parent e3be714
commit 59acff3
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 112 deletions.
diff --git a/src/ui/assets/close_solid.svg b/src/ui/assets/close_solid.svg
diff --git a/src/ui/components/EmptyView/EmptyView.tsx b/src/ui/components/EmptyView/EmptyView.tsx
@@ -5,17 +5,17 @@ import { VStack } from 'src/ui/ui-kit/VStack';
 
 export function EmptyView({
   emoji = '🥺',
-  text,
+  children,
 }: {
   emoji?: React.ReactNode;
-  text: React.ReactNode;
+  children: React.ReactNode;
 }) {
   return (
     <FillView>
       <VStack gap={6} style={{ textAlign: 'center' }}>
         <UIText kind="headline/hero">{emoji}</UIText>
         <UIText kind="small/accent" color="var(--neutral-500)">
-          {text}
+          {children}
         </UIText>
       </VStack>
     </FillView>

diff --git a/src/ui/pages/ConnectedSites/ConnectedSite/ConnectedSiteDialog.tsx b/src/ui/pages/ConnectedSites/ConnectedSite/ConnectedSiteDialog.tsx
@@ -91,7 +91,7 @@ export function ConnectedSiteDialog({
   );
 
   if (!connectedSite) {
-    return <EmptyView emoji="🥺" text="Site not found" />;
+    return <EmptyView>Site not found</EmptyView>;
   }
   const title = getNameFromOrigin(connectedSite.origin);
 

diff --git a/src/ui/pages/Feed/Feed.tsx b/src/ui/pages/Feed/Feed.tsx
@@ -480,7 +480,7 @@ export function Feed() {
         maxHeight={getGrownTabMaxHeight(offsetValuesState)}
       >
         <div style={{ position: 'absolute', left: 0 }}>{feedFilters}</div>
-        {fetching ? <ViewLoading /> : <EmptyView text="No perks yet" />}
+        {fetching ? <ViewLoading /> : <EmptyView>No perks yet</EmptyView>}
       </CenteredFillViewportView>
     );
   }

diff --git a/src/ui/pages/History/History.tsx b/src/ui/pages/History/History.tsx
@@ -4,33 +4,28 @@ import { Client, useAddressActions } from 'defi-sdk';
 import { hashQueryKey, useQuery } from '@tanstack/react-query';
 import { useAddressParams } from 'src/ui/shared/user-address/useAddressParams';
 import { useLocalAddressTransactions } from 'src/ui/transactions/useLocalAddressTransactions';
-import { NetworkSelect } from 'src/ui/pages/Networks/NetworkSelect';
 import type { Chain } from 'src/modules/networks/Chain';
 import { createChain } from 'src/modules/networks/Chain';
 import { useNetworks } from 'src/modules/networks/useNetworks';
-import { HStack } from 'src/ui/ui-kit/HStack';
 import { Spacer } from 'src/ui/ui-kit/Spacer';
 import { VStack } from 'src/ui/ui-kit/VStack';
 import { UnstyledButton } from 'src/ui/ui-kit/UnstyledButton';
 import * as helperStyles from 'src/ui/style/helpers.module.css';
-import { UIText } from 'src/ui/ui-kit/UIText';
 import { NetworkSelectValue } from 'src/modules/networks/NetworkSelectValue';
 import type { AnyAddressAction } from 'src/modules/ethereum/transactions/addressAction';
 import { pendingTransactionToAddressAction } from 'src/modules/ethereum/transactions/addressAction/creators';
 import { ViewLoading } from 'src/ui/components/ViewLoading';
 import { CenteredFillViewportView } from 'src/ui/components/FillView/FillView';
-import { NetworkIcon } from 'src/ui/components/NetworkIcon';
-import AllNetworksIcon from 'jsx:src/ui/assets/network.svg';
-import CloseIcon from 'jsx:src/ui/assets/close_solid.svg';
-import { Button } from 'src/ui/ui-kit/Button';
 import { useStore } from '@store-unit/react';
 import { useDefiSdkClient } from 'src/modules/defi-sdk/useDefiSdkClient';
 import { useCurrency } from 'src/modules/currency/useCurrency';
+import { EmptyView } from 'src/ui/components/EmptyView';
+import { NetworkBalance } from 'src/ui/pages/Overview/Positions/NetworkBalance';
 import {
   getCurrentTabsOffset,
   getGrownTabMaxHeight,
   offsetValues,
-} from '../Overview/getTabsOffset';
+} from 'src/ui/pages/Overview/getTabsOffset';
 import { ActionsList } from './ActionsList';
 import { ActionSearch } from './ActionSearch';
 import { isMatchForAllWords } from './matchSearcQuery';
@@ -96,7 +91,7 @@ function useMinedAndPendingAddressActions({
             transactionObject,
             loadNetworkByChainId,
             currency,
-            client,
+            client
           )
         )
       );
@@ -161,46 +156,48 @@ function useMinedAndPendingAddressActions({
   ]);
 }
 
-function EmptyView({
+function HistoryEmptyView({
   hasFilters,
   onReset,
 }: {
   hasFilters: boolean;
   onReset(): void;
 }) {
   return (
-    <VStack gap={6} style={{ textAlign: 'center' }}>
-      <UIText kind="headline/hero">🥺</UIText>
-      <UIText kind="small/accent" color="var(--neutral-500)">
-        <VStack gap={4}>
-          <div>No transactions</div>
-          {hasFilters ? (
-            <UnstyledButton
-              onClick={onReset}
-              style={{ color: 'var(--primary)' }}
-              className={helperStyles.hoverUnderline}
-            >
-              Reset all filters
-            </UnstyledButton>
-          ) : null}
-        </VStack>
-      </UIText>
-      <Spacer height={10} />
-    </VStack>
+    <EmptyView>
+      <VStack gap={4}>
+        <div>No transactions</div>
+        {hasFilters ? (
+          <UnstyledButton
+            onClick={onReset}
+            style={{ color: 'var(--primary)' }}
+            className={helperStyles.hoverUnderline}
+          >
+            Reset all filters
+          </UnstyledButton>
+        ) : null}
+      </VStack>
+    </EmptyView>
   );
 }
 
-export function HistoryList() {
-  const { networks } = useNetworks();
+export function HistoryList({
+  dappChain,
+  filterChain,
+  onChainChange,
+}: {
+  dappChain: string | null;
+  filterChain: string | null;
+  onChainChange: (value: string | null) => void;
+}) {
   const offsetValuesState = useStore(offsetValues);
-  const [filterChain, setFilterChain] = useState<string | null>(null);
+
+  const chainValue = filterChain || dappChain || NetworkSelectValue.All;
   const chain =
-    filterChain && filterChain !== NetworkSelectValue.All
-      ? createChain(filterChain)
+    chainValue && chainValue !== NetworkSelectValue.All
+      ? createChain(chainValue)
       : null;
 
-  const chainValue = filterChain || NetworkSelectValue.All;
-
   const [searchQuery, setSearchQuery] = useState<string | undefined>();
   const {
     value: transactions,
@@ -209,21 +206,15 @@ export function HistoryList() {
     hasMore,
   } = useMinedAndPendingAddressActions({ chain, searchQuery });
 
-  const filterNetwork =
-    chainValue === NetworkSelectValue.All
-      ? null
-      : networks?.getNetworkByName(createChain(chainValue));
-
   const actionFilters = (
-    <VStack gap={8}>
-      <HStack
-        gap={8}
-        alignItems="center"
-        style={{
-          paddingInline: 16,
-          gridTemplateColumns: '1fr auto',
-        }}
-      >
+    <div style={{ paddingInline: 16 }}>
+      <VStack gap={8}>
+        <NetworkBalance
+          dappChain={dappChain}
+          filterChain={filterChain}
+          onChange={onChainChange}
+          value={null}
+        />
         <ActionSearch
           value={searchQuery}
           onChange={setSearchQuery}
@@ -234,56 +225,8 @@ export function HistoryList() {
             });
           }}
         />
-        <NetworkSelect
-          value={chainValue}
-          onChange={setFilterChain}
-          renderButton={({ value, openDialog }) => {
-            return (
-              <Button
-                kind="ghost"
-                size={36}
-                onClick={openDialog}
-                style={{ padding: 8 }}
-              >
-                {!filterNetwork || value === NetworkSelectValue.All ? (
-                  <AllNetworksIcon
-                    style={{ width: 20, height: 20 }}
-                    role="presentation"
-                  />
-                ) : (
-                  <NetworkIcon
-                    size={20}
-                    src={filterNetwork.icon_url}
-                    name={filterNetwork.name}
-                  />
-                )}
-              </Button>
-            );
-          }}
-        />
-      </HStack>
-      {filterNetwork ? (
-        <div style={{ paddingInline: 16 }}>
-          <Button
-            kind="regular"
-            size={32}
-            style={{
-              borderWidth: 2,
-              borderColor: 'var(--neutral-200)',
-              paddingInline: '12px 8px',
-            }}
-            onClick={() => setFilterChain(null)}
-          >
-            <HStack gap={4} alignItems="center">
-              <UIText kind="small/accent">{filterNetwork.name}</UIText>
-              <CloseIcon
-                style={{ width: 16, height: 16, color: 'var(--black)' }}
-              />
-            </HStack>
-          </Button>
-        </div>
-      ) : null}
-    </VStack>
+      </VStack>
+    </div>
   );
 
   if (!transactions?.length) {
@@ -297,11 +240,11 @@ export function HistoryList() {
         {isLoading ? (
           <ViewLoading kind="network" />
         ) : (
-          <EmptyView
+          <HistoryEmptyView
             hasFilters={Boolean(searchQuery || filterChain)}
             onReset={() => {
               setSearchQuery(undefined);
-              setFilterChain(null);
+              onChainChange(null);
             }}
           />
         )}

diff --git a/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx b/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx
@@ -290,7 +290,7 @@ export function NonFungibleTokens({
                 }}
               />
               <div style={{ width: '100%', paddingTop: 164 }}>
-                <EmptyView text="No NFTs yet" />
+                <EmptyView>No NFTs yet</EmptyView>
               </div>
             </>
           )}

diff --git a/src/ui/pages/Overview/Overview.tsx b/src/ui/pages/Overview/Overview.tsx
@@ -534,7 +534,11 @@ function OverviewComponent() {
                 <ViewSuspense logDelays={true} fallback={tabFallback}>
                   <NavigationTitle title={null} documentTitle="History" />
                   <Spacer height={TAB_TOP_PADDING} />
-                  <HistoryList />
+                  <HistoryList
+                    dappChain={dappChain || null}
+                    filterChain={filterChain}
+                    onChainChange={setFilterChain}
+                  />
                 </ViewSuspense>
               }
             />

diff --git a/src/ui/pages/Overview/Positions/Positions.tsx b/src/ui/pages/Overview/Positions/Positions.tsx
@@ -860,7 +860,7 @@ export function Positions({
     >
       {emptyNetworkBalance}
       <DelayedRender delay={50}>
-        <EmptyView text="No assets yet" />
+        <EmptyView>No assets yet</EmptyView>
       </DelayedRender>
     </CenteredFillViewportView>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -290,7 +290,7 @@ export function NonFungibleTokens({ @@
                     }}
                   />
                   <div style={{ width: '100%', paddingTop: 164 }}>
-                    <EmptyView text="No NFTs yet" />
+                    <EmptyView>No NFTs yet</EmptyView>
                   </div>
                 </>
               )}
@@ Expand Down @@