swap tabs, rename TokenPrice to TokenValue, I missed that in previous PR

onflow · Feb 11, 2025 · e443604 · e443604
1 parent 9987b70
commit e443604
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 45 deletions.
diff --git a/src/ui/views/NFT/SendNFT/SendToAddress.tsx b/src/ui/views/NFT/SendNFT/SendToAddress.tsx
@@ -34,9 +34,9 @@ import SearchList from '../../Send/SearchList';
 import SendNFTConfirmation from './SendNFTConfirmation';
 
 export enum SendPageTabOptions {
+  Accounts = 'Accounts',
   Recent = 'Recent',
   AddressBook = 'AddressBook',
-  Accounts = 'Accounts',
 }
 
 const useStyles = makeStyles((_theme) => ({
@@ -509,18 +509,19 @@ const SendToAddress = () => {
                 style={{ height: '100%', width: '100%' }}
               >
                 <TabPanel value={tabValue} index={0} dir={theme.direction}>
-                  <RecentList
-                    filteredContacts={recentContacts}
+                  <AccountsList
+                    filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
                       setConfirmationOpen(true);
                     }}
+                    isSend={false}
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={1} dir={theme.direction}>
-                  <AddressBookList
-                    filteredContacts={filteredContacts}
+                  <RecentList
+                    filteredContacts={recentContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
@@ -529,14 +530,13 @@ const SendToAddress = () => {
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={2} dir={theme.direction}>
-                  <AccountsList
+                  <AddressBookList
                     filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
                       setConfirmationOpen(true);
                     }}
-                    isSend={false}
                   />
                 </TabPanel>
               </SwipeableViews>

diff --git a/src/ui/views/NftEvm/SendNFT/SendToAddress.tsx b/src/ui/views/NftEvm/SendNFT/SendToAddress.tsx
@@ -34,9 +34,9 @@ import SearchList from '../../Send/SearchList';
 import SendNFTConfirmation from './SendNFTConfirmation';
 
 export enum SendPageTabOptions {
+  Accounts = 'Accounts',
   Recent = 'Recent',
   AddressBook = 'AddressBook',
-  Accounts = 'Accounts',
 }
 
 const useStyles = makeStyles((_theme) => ({
@@ -503,18 +503,19 @@ const SendToAddress = () => {
                 style={{ height: '100%', width: '100%' }}
               >
                 <TabPanel value={tabValue} index={0} dir={theme.direction}>
-                  <RecentList
-                    filteredContacts={recentContacts}
+                  <AccountsList
+                    filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
                       setConfirmationOpen(true);
                     }}
+                    isSend={false}
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={1} dir={theme.direction}>
-                  <AddressBookList
-                    filteredContacts={filteredContacts}
+                  <RecentList
+                    filteredContacts={recentContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
@@ -523,14 +524,13 @@ const SendToAddress = () => {
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={2} dir={theme.direction}>
-                  <AccountsList
+                  <AddressBookList
                     filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       searchResult = eachgroup;
                       setConfirmationOpen(true);
                     }}
-                    isSend={false}
                   />
                 </TabPanel>
               </SwipeableViews>

diff --git a/src/ui/views/Send/SendAmount.tsx b/src/ui/views/Send/SendAmount.tsx
@@ -9,7 +9,7 @@ import { withPrefix } from '@/shared/utils/address';
 import { LLHeader } from '@/ui/FRWComponent';
 import SlideRelative from '@/ui/FRWComponent/SlideRelative';
 import { useProfileStore } from '@/ui/stores/profileStore';
-import { TokenPrice } from '@/ui/views/TokenDetail/TokenValue';
+import { TokenValue } from '@/ui/views/TokenDetail/TokenValue';
 import { type CoinItem } from 'background/service/coinList';
 import { LLContactCard } from 'ui/FRWComponent';
 import { useWallet } from 'ui/utils';
@@ -241,9 +241,9 @@ const SendAmount = () => {
                       fontSize: '15px',
                     }}
                   >
-                    <TokenPrice value={coinInfo.balance} postFix={coinInfo.unit.toUpperCase()} />
+                    <TokenValue value={coinInfo.balance} postFix={coinInfo.unit.toUpperCase()} />
                     {' ≈ '}
-                    <TokenPrice value={coinInfo.total} prefix={'$'} />
+                    <TokenValue value={coinInfo.total} prefix={'$'} />
                   </Typography>
                 </Box>
               </>

diff --git a/src/ui/views/Send/SendEth/EvmConfirmation.tsx b/src/ui/views/Send/SendEth/EvmConfirmation.tsx
@@ -14,6 +14,8 @@ import IconNext from 'ui/FRWAssets/svg/next.svg';
 import { LLSpinner, LLProfile, FRWProfile } from 'ui/FRWComponent';
 import { useWallet } from 'ui/utils';
 
+import { TokenValue } from '../../TokenDetail/TokenValue';
+
 interface ToEthConfirmationProps {
   isConfirmationOpen: boolean;
   data: any;
@@ -274,7 +276,10 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
             variant="body1"
             sx={{ fontSize: '18px', fontWeight: '400', textAlign: 'end' }}
           >
-            {props.data.amount} {props.data.coinInfo.unit}
+            <TokenValue
+              value={props.data.amount}
+              postFix={props.data.coinInfo.unit.toUpperCase()}
+            />
           </Typography>
         </Stack>
         <Stack direction="column" spacing={1}>
@@ -283,7 +288,7 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
             color="info"
             sx={{ fontSize: '14px', fontWeight: 'semi-bold', textAlign: 'end' }}
           >
-            $ {props.data.secondAmount}
+            <TokenValue value={props.data.secondAmount} prefix={'$'} />
           </Typography>
         </Stack>
       </Box>

diff --git a/src/ui/views/Send/SendEth/ToEthConfirmation.tsx b/src/ui/views/Send/SendEth/ToEthConfirmation.tsx
@@ -12,6 +12,8 @@ import IconNext from 'ui/FRWAssets/svg/next.svg';
 import { LLSpinner, LLProfile, FRWProfile, FRWTargetProfile } from 'ui/FRWComponent';
 import { useWallet } from 'ui/utils';
 
+import { TokenValue } from '../../TokenDetail/TokenValue';
+
 interface ToEthConfirmationProps {
   isConfirmationOpen: boolean;
   data: any;
@@ -288,7 +290,10 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
             variant="body1"
             sx={{ fontSize: '18px', fontWeight: '400', textAlign: 'end' }}
           >
-            {props.data.amount} {props.data.coinInfo.unit}
+            <TokenValue
+              value={props.data.amount}
+              postFix={props.data.coinInfo.unit.toUpperCase()}
+            />
           </Typography>
         </Stack>
         <Stack direction="column" spacing={1}>
@@ -297,7 +302,7 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
             color="info"
             sx={{ fontSize: '14px', fontWeight: 'semi-bold', textAlign: 'end' }}
           >
-            $ {props.data.secondAmount}
+            <TokenValue value={props.data.secondAmount} prefix={'$'} />
           </Typography>
         </Stack>
       </Box>

diff --git a/src/ui/views/Send/SendEth/index.tsx b/src/ui/views/Send/SendEth/index.tsx
@@ -15,7 +15,7 @@ import { LLContactCard } from 'ui/FRWComponent';
 import { useWallet } from 'ui/utils';
 
 import CancelIcon from '../../../../components/iconfont/IconClose';
-import { TokenPrice } from '../../TokenDetail/TokenValue';
+import { TokenValue } from '../../TokenDetail/TokenValue';
 import TransferAmount from '../TransferAmount';
 
 import EvmConfirmation from './EvmConfirmation';
@@ -246,9 +246,9 @@ const SendEth = () => {
                       fontSize: '15px',
                     }}
                   >
-                    <TokenPrice value={coinInfo.balance} postFix={coinInfo.unit.toUpperCase()} />
+                    <TokenValue value={coinInfo.balance} postFix={coinInfo.unit.toUpperCase()} />
                     {' ≈ '}
-                    <TokenPrice value={coinInfo.total} prefix={'$'} />
+                    <TokenValue value={coinInfo.total} prefix={'$'} />
                   </Typography>
                 </Box>
               </>

diff --git a/src/ui/views/Send/TransferAmount.tsx b/src/ui/views/Send/TransferAmount.tsx
@@ -19,7 +19,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 
 import SlideRelative from '@/ui/FRWComponent/SlideRelative';
 import { useCoinStore } from '@/ui/stores/coinStore';
-import { TokenPrice } from '@/ui/views/TokenDetail/TokenValue';
+import { TokenValue } from '@/ui/views/TokenDetail/TokenValue';
 
 import CancelIcon from '../../../components/iconfont/IconClose';
 import IconFlow from '../../../components/iconfont/IconFlow';
@@ -329,10 +329,10 @@ const TransferAmount = ({
             <Typography>≈</Typography>
             {coinType ? (
               <>
-                <IconFlow size={16} /> <TokenPrice value={amount} />
+                <IconFlow size={16} /> <TokenValue value={amount} />
               </>
             ) : (
-              <TokenPrice value={secondAmount} prefix={'$'} />
+              <TokenValue value={secondAmount} prefix={'$'} />
             )}
             <IconButton onClick={swap}>
               <IconSwitch size={14} />

diff --git a/src/ui/views/Send/TransferConfirmation.tsx b/src/ui/views/Send/TransferConfirmation.tsx
@@ -8,7 +8,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative';
 import StorageExceededAlert from '@/ui/FRWComponent/StorageExceededAlert';
 import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar';
 import { useStorageCheck } from '@/ui/utils/useStorageCheck';
-import { TokenPrice } from '@/ui/views/TokenDetail/TokenValue';
+import { TokenValue } from '@/ui/views/TokenDetail/TokenValue';
 import IconNext from 'ui/FRWAssets/svg/next.svg';
 import { LLSpinner, LLProfile, FRWProfile, FRWTargetProfile } from 'ui/FRWComponent';
 import { useWallet, isEmoji } from 'ui/utils';
@@ -356,7 +356,10 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
             variant="body1"
             sx={{ fontSize: '18px', fontWeight: '400', textAlign: 'end' }}
           >
-            {props.data.amount} {props.data.coinInfo.unit}
+            <TokenValue
+              value={props.data.amount}
+              postFix={props.data.coinInfo.unit.toUpperCase()}
+            />
           </Typography>
         </Stack>
         <Stack direction="column" spacing={1}>
@@ -365,7 +368,7 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
             color="info"
             sx={{ fontSize: '14px', fontWeight: 'semi-bold', textAlign: 'end' }}
           >
-            <TokenPrice value={props.data.secondAmount} prefix={'$'} />
+            <TokenValue value={props.data.secondAmount} prefix={'$'} />
           </Typography>
         </Stack>
       </Box>

diff --git a/src/ui/views/Send/index.tsx b/src/ui/views/Send/index.tsx
@@ -36,9 +36,9 @@ import RecentList from './RecentList';
 import SearchList from './SearchList';
 
 export enum SendPageTabOptions {
+  Accounts = 'Accounts',
   Recent = 'Recent',
   AddressBook = 'AddressBook',
-  Accounts = 'Accounts',
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -516,8 +516,8 @@ const Send = () => {
                 style={{ height: '100%', width: '100%' }}
               >
                 <TabPanel value={tabValue} index={0} dir={theme.direction}>
-                  <RecentList
-                    filteredContacts={recentContacts}
+                  <AccountsList
+                    filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       const isEvmAddress = isValidEthereumAddress(eachgroup.address);
@@ -534,8 +534,8 @@ const Send = () => {
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={1} dir={theme.direction}>
-                  <AddressBookList
-                    filteredContacts={filteredContacts}
+                  <RecentList
+                    filteredContacts={recentContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       const isEvmAddress = isValidEthereumAddress(eachgroup.address);
@@ -552,7 +552,7 @@ const Send = () => {
                   />
                 </TabPanel>
                 <TabPanel value={tabValue} index={2} dir={theme.direction}>
-                  <AccountsList
+                  <AddressBookList
                     filteredContacts={filteredContacts}
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {

diff --git a/src/ui/views/TokenDetail/TokenInfoCard.tsx b/src/ui/views/TokenDetail/TokenInfoCard.tsx
@@ -11,7 +11,7 @@ import { addDotSeparators } from 'ui/utils/number';
 
 import IconChevronRight from '../../../components/iconfont/IconChevronRight';
 
-import { TokenPrice } from './TokenValue';
+import { TokenValue } from './TokenValue';
 
 // import tips from 'ui/FRWAssets/svg/tips.svg';
 
@@ -223,7 +223,7 @@ const TokenInfoCard = ({
           </Box>
           <Typography variant="body1" color="text.secondary" sx={{ fontSize: '16px' }}>
             <Box component="span" sx={{ marginRight: '0.25rem' }}>
-              <TokenPrice
+              <TokenValue
                 value={balance * price}
                 prefix="$"
                 postFix={chrome.i18n.getMessage('USD')}

diff --git a/src/ui/views/TokenDetail/TokenValue.tsx b/src/ui/views/TokenDetail/TokenValue.tsx
@@ -10,10 +10,10 @@ interface TokenPriceProps {
   postFix?: string;
 }
 
-export const TokenPrice: React.FC<TokenPriceProps> = ({
+export const TokenValue: React.FC<TokenPriceProps> = ({
   value,
   className = '',
-  prefix = '$',
+  prefix = '',
   postFix = '',
 }) => {
   if (value === 0 || value === null || value === undefined) {

diff --git a/src/ui/views/Wallet/Coinlist.tsx b/src/ui/views/Wallet/Coinlist.tsx
@@ -16,7 +16,7 @@ import { useHistory } from 'react-router-dom';
 import { formatLargeNumber } from 'ui/utils/number';
 
 import IconCreate from '../../../components/iconfont/IconCreate';
-import { TokenPrice } from '../TokenDetail/TokenValue';
+import { TokenValue } from '../TokenDetail/TokenValue';
 
 const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
   // const wallet = useWallet();
@@ -110,7 +110,7 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
                     }}
                   >
                     {props.change === null ? '-' : ''}
-                    <TokenPrice value={props.price} prefix="$" />
+                    <TokenValue value={props.price} prefix="$" />
                   </Typography>
                   {props.change !== 0 && (
                     <Typography
@@ -191,7 +191,7 @@ const CoinList = ({ data, ableFt, isActive, childType, coinLoading }) => {
                   secondaryAction={
                     <EndListItemText
                       primary={parseFloat(coin.balance).toFixed(3)}
-                      secondary={<TokenPrice value={coin.balance * coin.price} prefix="$" />}
+                      secondary={<TokenValue value={coin.balance * coin.price} prefix="$" />}
                       unit={coin.unit}
                       change={parseFloat(coin.change24h.toFixed(2))}
                     />

diff --git a/src/ui/views/Wallet/TransferList.tsx b/src/ui/views/Wallet/TransferList.tsx
@@ -24,7 +24,7 @@ import { useTransferListStore } from '@/ui/stores/transferListStore';
 import activity from 'ui/FRWAssets/svg/activity.svg';
 import { useWallet } from 'ui/utils';
 
-import { TokenPrice } from '../TokenDetail/TokenValue';
+import { TokenValue } from '../TokenDetail/TokenValue';
 
 dayjs.extend(relativeTime);
 
@@ -87,7 +87,7 @@ const TransferList = () => {
               }}
             >
               {props.type === 1 ? (
-                <TokenPrice
+                <TokenValue
                   value={`${props.amount}`.replace(/^-/, '')}
                   prefix={!isContractCall ? (isReceive ? '+' : '-') : ''}
                 />