From 59acff3e5c762b7526c767a55fe905af0c9c6a4a Mon Sep 17 00:00:00 2001 From: Vasiliy Yorkin Date: Fri, 16 Aug 2024 15:16:30 +0300 Subject: [PATCH] Update network switcher layout on history tab (#585) * Refactor History EmptyView * Update network switcher layout on history tab * Use existing filterChain on History tab --- src/ui/assets/close_solid.svg | 3 - src/ui/components/EmptyView/EmptyView.tsx | 6 +- .../ConnectedSite/ConnectedSiteDialog.tsx | 2 +- src/ui/pages/Feed/Feed.tsx | 2 +- src/ui/pages/History/History.tsx | 145 ++++++------------ .../NonFungibleTokens/NonFungibleTokens.tsx | 2 +- src/ui/pages/Overview/Overview.tsx | 6 +- src/ui/pages/Overview/Positions/Positions.tsx | 2 +- 8 files changed, 56 insertions(+), 112 deletions(-) delete mode 100644 src/ui/assets/close_solid.svg diff --git a/src/ui/assets/close_solid.svg b/src/ui/assets/close_solid.svg deleted file mode 100644 index 36a8d7e5c..000000000 --- a/src/ui/assets/close_solid.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/ui/components/EmptyView/EmptyView.tsx b/src/ui/components/EmptyView/EmptyView.tsx index 1a5307cb0..3b31260cd 100644 --- 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 ( {emoji} - {text} + {children} diff --git a/src/ui/pages/ConnectedSites/ConnectedSite/ConnectedSiteDialog.tsx b/src/ui/pages/ConnectedSites/ConnectedSite/ConnectedSiteDialog.tsx index 20c4b38fd..a7173f73d 100644 --- 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 ; + return Site not found; } const title = getNameFromOrigin(connectedSite.origin); diff --git a/src/ui/pages/Feed/Feed.tsx b/src/ui/pages/Feed/Feed.tsx index b07dfcf26..d4b9468e6 100644 --- a/src/ui/pages/Feed/Feed.tsx +++ b/src/ui/pages/Feed/Feed.tsx @@ -480,7 +480,7 @@ export function Feed() { maxHeight={getGrownTabMaxHeight(offsetValuesState)} >
{feedFilters}
- {fetching ? : } + {fetching ? : No perks yet} ); } diff --git a/src/ui/pages/History/History.tsx b/src/ui/pages/History/History.tsx index fe896e148..eda4f04c3 100644 --- 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,7 +156,7 @@ function useMinedAndPendingAddressActions({ ]); } -function EmptyView({ +function HistoryEmptyView({ hasFilters, onReset, }: { @@ -169,38 +164,40 @@ function EmptyView({ onReset(): void; }) { return ( - - 🥺 - - -
No transactions
- {hasFilters ? ( - - Reset all filters - - ) : null} - - - - + + +
No transactions
+ {hasFilters ? ( + + Reset all filters + + ) : null} + + ); } -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(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(); 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 = ( - - +
+ + - { - return ( - - ); - }} - /> - - {filterNetwork ? ( -
- -
- ) : null} - + +
); if (!transactions?.length) { @@ -297,11 +240,11 @@ export function HistoryList() { {isLoading ? ( ) : ( - { setSearchQuery(undefined); - setFilterChain(null); + onChainChange(null); }} /> )} diff --git a/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx b/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx index 64950f549..a99d66056 100644 --- a/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx +++ b/src/ui/pages/Overview/NonFungibleTokens/NonFungibleTokens.tsx @@ -290,7 +290,7 @@ export function NonFungibleTokens({ }} />
- + No NFTs yet
)} diff --git a/src/ui/pages/Overview/Overview.tsx b/src/ui/pages/Overview/Overview.tsx index f38b59b34..ac94f12ea 100644 --- a/src/ui/pages/Overview/Overview.tsx +++ b/src/ui/pages/Overview/Overview.tsx @@ -534,7 +534,11 @@ function OverviewComponent() { - + } /> diff --git a/src/ui/pages/Overview/Positions/Positions.tsx b/src/ui/pages/Overview/Positions/Positions.tsx index bd0be124a..40e75ab47 100644 --- a/src/ui/pages/Overview/Positions/Positions.tsx +++ b/src/ui/pages/Overview/Positions/Positions.tsx @@ -860,7 +860,7 @@ export function Positions({ > {emptyNetworkBalance} - + No assets yet );