chore: Adjust UI

unisat-wallet · Dec 6, 2024 · 2687152 · 2687152
1 parent b55f490
commit 2687152
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 42 deletions.
diff --git 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
@@ -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 (
     <Card
@@ -47,12 +47,12 @@ export default function RunesBalanceCard(props: RunesBalanceCardProps) {
             <Text text={tokenBalance.symbol} size="xs" mx="sm" />
           </Row>
         </Row>
-        {
-          showPrice && <Row justifyBetween mt={'xs'}>
+        {showPrice && price?.curPrice !== 0 && (
+          <Row justifyBetween mt={'xs'}>
             <TickPriceChange price={price} />
             <TickUsd price={price} balance={balance.toString()} />
           </Row>
-        }
+        )}
       </Column>
     </Card>
   );

diff --git 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);
         }}>
         <Image src={chain.icon} size={22} style={{}} />
+        <Text text={chain.iconLabel} color="white" size="xs" />
         <Icon icon="down" color="textDim" size={10} />
       </Row>
       {switchChainModalVisible && (

diff --git 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
@@ -171,7 +171,7 @@ export function SearchBar() {
         bg={'search_bar_bg'}
         style={{
           borderRadius: 8,
-          overflow:'hidden'
+          overflow: 'hidden'
         }}>
         {searchContent}
       </Column>

diff --git 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);
       }}>
-      <Image src={img} width={300} height={98} />
+      <Image
+        src={img}
+        width={'100%'}
+        height={'auto'}
+        style={{
+          maxWidth: '512px'
+        }}
+      />
     </Row>
   );
 }
@@ -88,21 +94,24 @@ 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
           })
         );
       })
       .catch((e) => {
         dispatch(
           discoveryActions.setBannerList({
             bannerList: [],
-            chainType
+            chainType,
+            fetchTime
           })
         );
       });
@@ -113,19 +122,21 @@ export default function DiscoverTabScreen() {
         dispatch(
           discoveryActions.setAppList({
             appList: data,
-            chainType
+            chainType,
+            fetchTime
           })
         );
       })
       .catch((e) => {
         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 (
     <Layout>
       <Header
@@ -166,17 +179,17 @@ export default function DiscoverTabScreen() {
               <Row mt="md" />
             </>
           )}
-          <Carousel autoplay>
-            {bannerList.map((v) => (
-              <BannerItem key={v.img} img={v.img} link={v.link} />
-            ))}
-          </Carousel>
+          {hasBanner ? (
+            <Carousel autoplay>
+              {bannerList.map((v) => (
+                <BannerItem key={v.img} img={v.img} link={v.link} />
+              ))}
+            </Carousel>
+          ) : null}
 
-          <Row mt="md" />
+          {hasBanner ? <Row mt="md" /> : null}
 
-          {tabItems.length == 0 ? (
-            <Empty />
-          ) : (
+          {tabItems.length > 1 ? (
             <TabBar
               defaultActiveKey={tabKey}
               activeKey={tabKey}
@@ -186,7 +199,7 @@ export default function DiscoverTabScreen() {
                 setTabKey(key);
               }}
             />
-          )}
+          ) : null}
 
           {tabItems[tabKey] ? tabItems[tabKey].children : null}
         </Column>

diff --git a/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx b/src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx
@@ -28,20 +28,20 @@ export function OrdinalsTab() {
     const items = [
       {
         key: OrdinalsAssetTabKey.ALL,
-        label: `ALL (${addressSummary.inscriptionCount})`,
+        label: `All (${addressSummary.inscriptionCount})`,
         children: <InscriptionList />
       },
       {
         key: OrdinalsAssetTabKey.BRC20,
-        label: `BRC-20 (${addressSummary.brc20Count})`,
+        label: `brc-20 (${addressSummary.brc20Count})`,
         children: <BRC20List />
       }
     ];
 
     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: <BRC20List5Byte />
       });
     }

diff --git 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<RuneBalance[]>([]);
   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() {
           <RunesBalanceCard
             key={index}
             tokenBalance={data}
-            showPrice={priceMap!==undefined}
+            showPrice={priceMap !== undefined}
             price={priceMap?.[data.spacedRune]}
             onClick={() => {
               navigate('RunesTokenScreen', {

diff --git a/src/ui/state/discovery/reducer.ts b/src/ui/state/discovery/reducer.ts
@@ -29,27 +29,29 @@ 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,
       action: {
         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;
     }
   }
 });