From 2687152edcedf3d9d43b0f1d734593a80bb87956 Mon Sep 17 00:00:00 2001 From: slient-coder Date: Fri, 6 Dec 2024 19:49:33 +0800 Subject: [PATCH] chore: Adjust UI --- src/shared/constant/index.ts | 11 ++++- src/ui/components/RunesBalanceCard/index.tsx | 20 ++++---- src/ui/components/SwitchNetworkBar/index.tsx | 2 + src/ui/components/TickUsd/index.tsx | 12 +++-- .../Main/DiscoverTabComponents/SearchBar.tsx | 2 +- src/ui/pages/Main/DiscoverTabScreen.tsx | 47 ++++++++++++------- .../Main/WalletTabScreen/OrdinalsTab.tsx | 6 +-- .../pages/Main/WalletTabScreen/RunesList.tsx | 8 ++-- src/ui/state/discovery/reducer.ts | 6 ++- 9 files changed, 72 insertions(+), 42 deletions(-) diff --git a/src/shared/constant/index.ts b/src/shared/constant/index.ts index 9f266a9d..58273040 100644 --- a/src/shared/constant/index.ts +++ b/src/shared/constant/index.ts @@ -223,6 +223,7 @@ export const NETWORK_TYPES = [ type TypeChain = { enum: ChainType; label: string; + iconLabel: string; icon: string; unit: string; networkType: NetworkType; @@ -242,7 +243,8 @@ type TypeChain = { export const CHAINS_MAP: { [key: string]: TypeChain } = { [ChainType.BITCOIN_MAINNET]: { enum: ChainType.BITCOIN_MAINNET, - label: 'Bitcoin Mainnet', + label: 'Bitcoin', + iconLabel: 'Bitcoin', icon: './images/artifacts/bitcoin-mainnet.png', unit: 'BTC', networkType: NetworkType.MAINNET, @@ -258,6 +260,7 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = { [ChainType.BITCOIN_TESTNET]: { enum: ChainType.BITCOIN_TESTNET, label: 'Bitcoin Testnet', + iconLabel: 'Bitcoin', icon: './images/artifacts/bitcoin-testnet.svg', unit: 'tBTC', networkType: NetworkType.TESTNET, @@ -273,6 +276,7 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = { [ChainType.BITCOIN_TESTNET4]: { enum: ChainType.BITCOIN_TESTNET4, label: 'Bitcoin Testnet4 (Beta)', + iconLabel: 'Bitcoin', icon: './images/artifacts/bitcoin-testnet.svg', unit: 'tBTC', networkType: NetworkType.TESTNET, @@ -288,6 +292,7 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = { [ChainType.BITCOIN_SIGNET]: { enum: ChainType.BITCOIN_SIGNET, label: 'Bitcoin Signet', + iconLabel: 'Bitcoin', icon: './images/artifacts/bitcoin-signet.svg', unit: 'sBTC', networkType: NetworkType.TESTNET, @@ -302,7 +307,8 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = { }, [ChainType.FRACTAL_BITCOIN_MAINNET]: { enum: ChainType.FRACTAL_BITCOIN_MAINNET, - label: 'Fractal Bitcoin Mainnet', + label: 'Fractal Bitcoin', + iconLabel: 'Fractal', icon: './images/artifacts/fractal-mainnet.svg', unit: 'FB', networkType: NetworkType.MAINNET, @@ -321,6 +327,7 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = { [ChainType.FRACTAL_BITCOIN_TESTNET]: { enum: ChainType.FRACTAL_BITCOIN_TESTNET, label: 'Fractal Bitcoin Testnet', + iconLabel: 'Fractal', icon: './images/artifacts/fractal-testnet.svg', unit: 'tFB', networkType: NetworkType.MAINNET, diff --git a/src/ui/components/RunesBalanceCard/index.tsx b/src/ui/components/RunesBalanceCard/index.tsx index f9453e84..3fb690f8 100644 --- a/src/ui/components/RunesBalanceCard/index.tsx +++ b/src/ui/components/RunesBalanceCard/index.tsx @@ -1,29 +1,29 @@ import { runesUtils } from '@/shared/lib/runes-utils'; import { RuneBalance, TickPriceItem } from '@/shared/types'; +import { TickPriceChange, TickUsd } from '@/ui/components/TickUsd'; +import { showLongNumber } from '@/ui/utils'; import { Card } from '../Card'; import { Column } from '../Column'; import { Row } from '../Row'; import { RunesTicker } from '../RunesTicker'; import { Text } from '../Text'; -import { showLongNumber } from '@/ui/utils'; -import { TickPriceChange, TickUsd } from '@/ui/components/TickUsd'; export interface RunesBalanceCardProps { tokenBalance: RuneBalance; onClick?: () => void; - showPrice?: boolean, - price?: TickPriceItem + showPrice?: boolean; + price?: TickPriceItem; } export default function RunesBalanceCard(props: RunesBalanceCardProps) { - const { tokenBalance, onClick,showPrice,price } = props; + const { tokenBalance, onClick, showPrice, price } = props; const balance = runesUtils.toDecimalNumber(tokenBalance.amount, tokenBalance.divisibility); let str = balance.toString(); if (balance.lt(0.0001)) { str = '<0.0001'; - }else { - str = showLongNumber(balance.toString()) + } else { + str = showLongNumber(balance.toString()); } return ( - { - showPrice && + {showPrice && price?.curPrice !== 0 && ( + - } + )} ); diff --git a/src/ui/components/SwitchNetworkBar/index.tsx b/src/ui/components/SwitchNetworkBar/index.tsx index 7118f8d3..c8dd6dda 100644 --- a/src/ui/components/SwitchNetworkBar/index.tsx +++ b/src/ui/components/SwitchNetworkBar/index.tsx @@ -7,6 +7,7 @@ import { Card } from '../Card'; import { Icon } from '../Icon'; import { Image } from '../Image'; import { Row } from '../Row'; +import { Text } from '../Text'; export function SwitchNetworkBar() { const [switchChainModalVisible, setSwitchChainModalVisible] = useState(false); @@ -28,6 +29,7 @@ export function SwitchNetworkBar() { setSwitchChainModalVisible(true); }}> + {switchChainModalVisible && ( diff --git a/src/ui/components/TickUsd/index.tsx b/src/ui/components/TickUsd/index.tsx index 65882ada..293d37a6 100644 --- a/src/ui/components/TickUsd/index.tsx +++ b/src/ui/components/TickUsd/index.tsx @@ -80,7 +80,9 @@ export function TickUsdWithoutPrice( .getBrc20sPrice([tick]) .then((priceMap) => { setPrice(priceMap[tick]); - setShown(true); + if (priceMap[tick].curPrice > 0) { + setShown(true); + } }) .catch(() => { setShown(false); @@ -90,7 +92,9 @@ export function TickUsdWithoutPrice( .getRunesPrice([tick]) .then((priceMap) => { setPrice(priceMap[tick]); - setShown(true); + if (priceMap[tick].curPrice > 0) { + setShown(true); + } }) .catch(() => { setShown(false); @@ -100,7 +104,9 @@ export function TickUsdWithoutPrice( .getCAT20sPrice([tick]) .then((priceMap) => { setPrice(priceMap[tick]); - setShown(true); + if (priceMap[tick].curPrice > 0) { + setShown(true); + } }) .catch(() => { setShown(false); diff --git a/src/ui/pages/Main/DiscoverTabComponents/SearchBar.tsx b/src/ui/pages/Main/DiscoverTabComponents/SearchBar.tsx index 3e23429b..691c727e 100644 --- a/src/ui/pages/Main/DiscoverTabComponents/SearchBar.tsx +++ b/src/ui/pages/Main/DiscoverTabComponents/SearchBar.tsx @@ -171,7 +171,7 @@ export function SearchBar() { bg={'search_bar_bg'} style={{ borderRadius: 8, - overflow:'hidden' + overflow: 'hidden' }}> {searchContent} diff --git a/src/ui/pages/Main/DiscoverTabScreen.tsx b/src/ui/pages/Main/DiscoverTabScreen.tsx index d83bcd15..16e01809 100644 --- a/src/ui/pages/Main/DiscoverTabScreen.tsx +++ b/src/ui/pages/Main/DiscoverTabScreen.tsx @@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'; import { ChainType } from '@/shared/constant'; import { AppInfo } from '@/shared/types'; import { Card, Column, Content, Footer, Header, Image, Layout, Row, Text } from '@/ui/components'; -import { Empty } from '@/ui/components/Empty'; import { NavTabBar } from '@/ui/components/NavTabBar'; import { SwitchNetworkBar } from '@/ui/components/SwitchNetworkBar'; import { TabBar } from '@/ui/components/TabBar'; @@ -25,7 +24,14 @@ function BannerItem({ img, link }: { img: string; link: string }) { onClick={() => { window.open(link); }}> - + ); } @@ -88,13 +94,15 @@ export default function DiscoverTabScreen() { if (lastFetchInfo.lasfFetchChainType === chainType && Date.now() - lastFetchInfo.lastFetchTime < 1000 * 60 * 1) { return; } + const fetchTime = Date.now(); wallet .getBannerList() .then((data) => { dispatch( discoveryActions.setBannerList({ bannerList: data, - chainType + chainType, + fetchTime }) ); }) @@ -102,7 +110,8 @@ export default function DiscoverTabScreen() { dispatch( discoveryActions.setBannerList({ bannerList: [], - chainType + chainType, + fetchTime }) ); }); @@ -113,7 +122,8 @@ export default function DiscoverTabScreen() { dispatch( discoveryActions.setAppList({ appList: data, - chainType + chainType, + fetchTime }) ); }) @@ -121,11 +131,12 @@ export default function DiscoverTabScreen() { dispatch( discoveryActions.setAppList({ appList: [], - chainType + chainType, + fetchTime }) ); }); - }, [chainType, lastFetchInfo]); + }, [chainType, lastFetchInfo.lasfFetchChainType, lastFetchInfo.lastFetchTime]); useEffect(() => { if (tabKey > appList.length - 1) { @@ -147,6 +158,8 @@ export default function DiscoverTabScreen() { }; }); + const hasBanner = bannerList && bannerList.length > 0; + return (
)} - - {bannerList.map((v) => ( - - ))} - + {hasBanner ? ( + + {bannerList.map((v) => ( + + ))} + + ) : null} - + {hasBanner ? : null} - {tabItems.length == 0 ? ( - - ) : ( + {tabItems.length > 1 ? ( - )} + ) : null} {tabItems[tabKey] ? tabItems[tabKey].children : null} diff --git a/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx b/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx index d3471642..d54c4c8a 100644 --- a/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx +++ b/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx @@ -28,12 +28,12 @@ export function OrdinalsTab() { const items = [ { key: OrdinalsAssetTabKey.ALL, - label: `ALL (${addressSummary.inscriptionCount})`, + label: `All (${addressSummary.inscriptionCount})`, children: }, { key: OrdinalsAssetTabKey.BRC20, - label: `BRC-20 (${addressSummary.brc20Count})`, + label: `brc-20 (${addressSummary.brc20Count})`, children: } ]; @@ -41,7 +41,7 @@ export function OrdinalsTab() { if (!chain.isFractal) { items.push({ key: OrdinalsAssetTabKey.BRC20_5BYTE, - label: `BRC-20[5-byte] (${addressSummary.brc20Count5Byte || 0})`, + label: `brc-20[5-byte] (${addressSummary.brc20Count5Byte || 0})`, children: }); } diff --git a/src/ui/pages/Main/WalletTabScreen/RunesList.tsx b/src/ui/pages/Main/WalletTabScreen/RunesList.tsx index 67d1faf9..76ec1c65 100644 --- a/src/ui/pages/Main/WalletTabScreen/RunesList.tsx +++ b/src/ui/pages/Main/WalletTabScreen/RunesList.tsx @@ -22,7 +22,7 @@ export function RunesList() { const [tokens, setTokens] = useState([]); const [total, setTotal] = useState(-1); const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 100 }); - const [priceMap, setPriceMap] = useState<{[key:string]:TickPriceItem}>(); + const [priceMap, setPriceMap] = useState<{ [key: string]: TickPriceItem }>(); const tools = useTools(); const fetchData = async () => { @@ -34,8 +34,8 @@ export function RunesList() { ); setTokens(list); setTotal(total); - if(list.length>0) { - wallet.getRunesPrice(list.map(item=>item.spacedRune)).then(setPriceMap) + if (list.length > 0) { + wallet.getRunesPrice(list.map((item) => item.spacedRune)).then(setPriceMap); } } catch (e) { tools.toastError((e as Error).message); @@ -71,7 +71,7 @@ export function RunesList() { { navigate('RunesTokenScreen', { diff --git a/src/ui/state/discovery/reducer.ts b/src/ui/state/discovery/reducer.ts index 74ed8dd3..17bbeb13 100644 --- a/src/ui/state/discovery/reducer.ts +++ b/src/ui/state/discovery/reducer.ts @@ -29,13 +29,14 @@ const slice = createSlice({ payload: { bannerList: { id: string; img: string; link: string }[]; chainType: ChainType; + fetchTime: number; }; } ) { const { payload } = action; state.bannerList = payload.bannerList; state.lastFetchChainType = payload.chainType; - state.lastFetchTime = Date.now(); + state.lastFetchTime = payload.fetchTime; }, setAppList( state, @@ -43,13 +44,14 @@ const slice = createSlice({ payload: { appList: { tab: string; items: AppInfo[] }[]; chainType: ChainType; + fetchTime: number; }; } ) { const { payload } = action; state.appList = payload.appList; state.lastFetchChainType = payload.chainType; - state.lastFetchTime = Date.now(); + state.lastFetchTime = payload.fetchTime; } } });