fix: style & behaviors.

RabbyHub · Apr 26, 2024 · 5595d1a · 5595d1a
1 parent 5e4fc45
commit 5595d1a
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 63 deletions.
diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
@@ -1112,21 +1112,23 @@
           "selectChain": "Select chain",
           "searching": "Searching Token",
           "tokenAddress": "Token Address",
+          "tokenAddressPlaceholder": "Token Address",
           "notFound": "Token not found"
         },
         "AddTestnetToken": {
           "title": "Add Custom Network Token",
           "selectChain": "Select chain",
           "searching": "Searching Token",
           "tokenAddress": "Token Address",
+          "tokenAddressPlaceholder": "Token Address",
           "notFound": "Token not found"
         },
         "TestnetAssetListContainer": {
           "add": "Token",
           "addTestnet": "Network"
         },
         "noTestnetAssets": "No Custom Network Assets",
-        "addTokenEntryText": "Add Tokens"
+        "addTokenEntryText": "Token"
       },
       "hd": {
         "howToConnectLedger": "How to Connect Ledger",

diff --git a/src/ui/views/CommonPopup/AssetList/AddTokenEntry.tsx b/src/ui/views/CommonPopup/AssetList/AddTokenEntry.tsx
@@ -4,14 +4,19 @@ import { ReactComponent as RcAddEntryCC } from './icons/add-entry-cc.svg';
 import clsx from 'clsx';
 import { AddCustomTokenPopup } from './CustomAssetList/AddCustomTokenPopup';
 import { TokenItem } from '@rabby-wallet/rabby-api/dist/types';
-import { TokenDetailPopup } from '@/ui/views/Dashboard/components/TokenDetailPopup';
 import { useTranslation } from 'react-i18next';
+import { SpecialTokenListPopup } from './components/TokenButton';
+import { useRabbySelector } from '@/ui/store';
+import useSortToken from '@/ui/hooks/useSortTokens';
 
+type Props = {
+  onConfirm?: React.ComponentProps<typeof AddCustomTokenPopup>['onConfirm'];
+};
 export type AddTokenEntryInst = {
   startAddToken: () => void;
 };
-const AddTokenEntry = React.forwardRef<AddTokenEntryInst, { foo?: any }>(
-  function AddTokenEntryPorto(_, ref) {
+const AddTokenEntry = React.forwardRef<AddTokenEntryInst, Props>(
+  function AddTokenEntryPorto({ onConfirm }, ref) {
     const { t } = useTranslation();
     const [isShowAddModal, setIsShowAddModal] = React.useState<boolean>(false);
 
@@ -21,16 +26,25 @@ const AddTokenEntry = React.forwardRef<AddTokenEntryInst, { foo?: any }>(
       },
     }));
 
-    const [focusingToken, setFocusingToken] = React.useState<TokenItem | null>(
-      null
+    // const [focusingToken, setFocusingToken] = React.useState<TokenItem | null>(
+    //   null
+    // );
+
+    const { customize } = useRabbySelector((store) => store.account.tokens);
+    const tokens = useSortToken(customize);
+
+    const [showCustomizedTokens, setShowCustomizedTokens] = React.useState(
+      false
     );
 
     return (
       <>
         <div
           className={clsx(
             'flex flex-row justify-start items-center',
-            'px-[14px] py-[8px] bg-r-neutral-card2 rounded-[6px] cursor-pointer',
+            'border-[1px] border-transparent',
+            'hover:border-rabby-blue-default hover:bg-r-blue-light1',
+            'h-[32px] px-[14px] py-[8px] bg-r-neutral-card2 rounded-[6px] cursor-pointer',
             'text-r-neutral-body text-[13px] text-center',
             'whitespace-nowrap'
           )}
@@ -49,16 +63,25 @@ const AddTokenEntry = React.forwardRef<AddTokenEntryInst, { foo?: any }>(
           }}
           onConfirm={(addedToken) => {
             setIsShowAddModal(false);
-            setFocusingToken(addedToken?.token || null);
+            setShowCustomizedTokens(true);
+
+            // setFocusingToken(addedToken?.token || null);
             // refreshAsync();
           }}
         />
 
-        <TokenDetailPopup
+        {/* <TokenDetailPopup
           variant="add"
           token={focusingToken}
           visible={!!focusingToken}
           onClose={() => setFocusingToken(null)}
+        /> */}
+
+        <SpecialTokenListPopup
+          label={t('page.dashboard.tokenDetail.customizedButton')}
+          tokens={tokens}
+          visible={showCustomizedTokens}
+          onClose={() => setShowCustomizedTokens(false)}
         />
       </>
     );

diff --git a/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx
@@ -144,6 +144,15 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
         address: currentAccount!.address,
         chainServerId: chain.serverId,
         q: tokenId,
+      }).then((lists) => {
+        if (!lists?.tokenList.length) {
+          form.setFields([
+            {
+              name: 'address',
+              errors: [t('page.dashboard.assets.AddMainnetToken.notFound')],
+            },
+          ]);
+        }
       });
     },
     {
@@ -289,6 +298,9 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
               name="address"
             >
               <Input
+                placeholder={t(
+                  'page.dashboard.assets.AddMainnetToken.tokenAddressPlaceholder'
+                )}
                 onChange={(e) => {
                   setTokenId(e.target.value);
                 }}
@@ -378,6 +390,7 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
         </Wraper>
       </Popup>
       <ChainSelectorModal
+        value={chainSelectorState.chain || CHAINS_ENUM.ETH}
         hideTestnetTab
         hideMainnetTab={false}
         visible={chainSelectorState.visible}

diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx
@@ -256,6 +256,9 @@ export const AddCustomTestnetTokenPopup = ({
               name="address"
             >
               <Input
+                placeholder={t(
+                  'page.dashboard.assets.AddTestnetToken.tokenAddressPlaceholder'
+                )}
                 onChange={(e) => {
                   setTokenId(e.target.value);
                 }}
@@ -343,6 +346,7 @@ export const AddCustomTestnetTokenPopup = ({
       <ChainSelectorModal
         hideTestnetTab={false}
         hideMainnetTab={true}
+        value={chainSelectorState.chain || CHAINS_ENUM.ETH}
         visible={chainSelectorState.visible}
         onCancel={() => {
           setChainSelectorState({

diff --git a/...ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx b/...ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/CustomTestnetTokenDetail.tsx
@@ -159,9 +159,7 @@ export const CustomTestnetTokenDetail = ({
               type="primary"
               size="large"
               disabled
-              style={{
-                width: 114,
-              }}
+              className="w-[114px] h-[36px] py-[0]"
             >
               {t('page.dashboard.tokenDetail.swap')}
             </Button>
@@ -171,7 +169,7 @@ export const CustomTestnetTokenDetail = ({
             type="primary"
             ghost
             size="large"
-            className="w-[114px] rabby-btn-ghost"
+            className="w-[114px] h-[36px] py-[0] rabby-btn-ghost"
             onClick={goToSend}
           >
             {t('page.dashboard.tokenDetail.send')}
@@ -180,7 +178,7 @@ export const CustomTestnetTokenDetail = ({
             type="primary"
             ghost
             size="large"
-            className="w-[114px] rabby-btn-ghost"
+            className="w-[114px] h-[36px] py-[0] rabby-btn-ghost"
             onClick={goToReceive}
           >
             {t('page.dashboard.tokenDetail.receive')}

diff --git a/src/ui/views/CommonPopup/AssetList/CustomizedButton.tsx b/src/ui/views/CommonPopup/AssetList/CustomizedButton.tsx
@@ -4,10 +4,10 @@ import { useRabbySelector } from '@/ui/store';
 import useSortToken from '@/ui/hooks/useSortTokens';
 import { useTranslation } from 'react-i18next';
 
-interface Props {
+type Props = {
   onClickButton: () => void;
   isTestnet: boolean;
-}
+};
 
 export const CustomizedButton: React.FC<Props> = ({
   onClickButton,

diff --git a/src/ui/views/CommonPopup/AssetList/components/TokenButton.tsx b/src/ui/views/CommonPopup/AssetList/components/TokenButton.tsx
@@ -9,7 +9,9 @@ import { useCommonPopupView } from '@/ui/utils';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'antd';
 
-export interface Props {
+interface TokenButtonPopupProps {
+  visible?: boolean;
+  onClose?: () => void;
   label: string;
   onClickButton?: () => void;
   tokens?: AbstractPortfolioToken[];
@@ -20,6 +22,68 @@ export interface Props {
   hiddenSubTitle?: boolean;
 }
 
+export function SpecialTokenListPopup({
+  visible,
+  onClose,
+  label,
+  tokens,
+  onClickLink,
+  linkText,
+  onClickButton,
+  buttonText,
+  description,
+  hiddenSubTitle,
+}: TokenButtonPopupProps) {
+  const { t } = useTranslation();
+  const len = tokens?.length ?? 0;
+
+  return (
+    <Popup
+      height={494}
+      visible={visible}
+      closable
+      push={false}
+      onClose={onClose}
+      title={`${len} ${label}`}
+      isSupportDarkMode
+    >
+      {!hiddenSubTitle && (
+        <div className="text-r-neutral-foot text-13 mb-[30px] text-center -m-8">
+          {t('page.dashboard.assets.tokenButton.subTitle')}
+        </div>
+      )}
+      <TokenTable
+        list={tokens}
+        EmptyComponent={
+          <div className="space-y-24 text-13 text-center mt-[100px]">
+            <EmptySVG className="w-[52px] h-[52px] m-auto" />
+            <div className="text-r-neutral-body">{description}</div>
+            {linkText && (
+              <div
+                onClick={onClickLink}
+                className="text-r-blue-default underline cursor-pointer"
+              >
+                {linkText}
+              </div>
+            )}
+            {buttonText && (
+              <Button
+                onClick={onClickButton}
+                type="primary"
+                className="w-[200px] h-[44px]"
+              >
+                {buttonText}
+              </Button>
+            )}
+          </div>
+        }
+      />
+    </Popup>
+  );
+}
+
+export type Props = TokenButtonPopupProps;
+
 export const TokenButton: React.FC<Props> = ({
   label,
   tokens,
@@ -33,7 +97,6 @@ export const TokenButton: React.FC<Props> = ({
   const { visible: commonPopupVisible } = useCommonPopupView();
   const [visible, setVisible] = React.useState(false);
   const len = tokens?.length ?? 0;
-  const { t } = useTranslation();
 
   const handleClickLink = React.useCallback(() => {
     setVisible(false);
@@ -68,47 +131,18 @@ export const TokenButton: React.FC<Props> = ({
         <LowValueArrowSVG className="w-14 h-14" />
       </button>
 
-      <Popup
-        height={494}
+      <SpecialTokenListPopup
         visible={visible}
-        closable
-        push={false}
         onClose={() => setVisible(false)}
-        title={`${len} ${label}`}
-        isSupportDarkMode
-      >
-        {!hiddenSubTitle && (
-          <div className="text-r-neutral-foot text-13 mb-[30px] text-center -m-8">
-            {t('page.dashboard.assets.tokenButton.subTitle')}
-          </div>
-        )}
-        <TokenTable
-          list={tokens}
-          EmptyComponent={
-            <div className="space-y-24 text-13 text-center mt-[100px]">
-              <EmptySVG className="w-[52px] h-[52px] m-auto" />
-              <div className="text-r-neutral-body">{description}</div>
-              {linkText && (
-                <div
-                  onClick={handleClickLink}
-                  className="text-r-blue-default underline cursor-pointer"
-                >
-                  {linkText}
-                </div>
-              )}
-              {buttonText && (
-                <Button
-                  onClick={handleClickButton}
-                  type="primary"
-                  className="w-[200px] h-[44px]"
-                >
-                  {buttonText}
-                </Button>
-              )}
-            </div>
-          }
-        />
-      </Popup>
+        label={label}
+        tokens={tokens}
+        onClickLink={handleClickLink}
+        linkText={linkText}
+        onClickButton={handleClickButton}
+        buttonText={buttonText}
+        description={description}
+        hiddenSubTitle={hiddenSubTitle}
+      />
     </div>
   );
 };
diff --git a/src/ui/views/Dashboard/components/TokenDetailPopup/TokenDetail.tsx b/src/ui/views/Dashboard/components/TokenDetailPopup/TokenDetail.tsx
@@ -269,9 +269,7 @@ const TokenDetail = ({
                 size="large"
                 onClick={goToSwap}
                 disabled={!tokenSupportSwap}
-                style={{
-                  width: 114,
-                }}
+                className="w-[114px] h-[36px] py-[0]"
               >
                 {t('page.dashboard.tokenDetail.swap')}
               </Button>
@@ -281,7 +279,7 @@ const TokenDetail = ({
               type="primary"
               ghost
               size="large"
-              className="w-[114px] rabby-btn-ghost"
+              className="w-[114px] h-[36px] py-[0] rabby-btn-ghost"
               onClick={goToSend}
             >
               {t('page.dashboard.tokenDetail.send')}
@@ -290,7 +288,7 @@ const TokenDetail = ({
               type="primary"
               ghost
               size="large"
-              className="w-[114px] rabby-btn-ghost"
+              className="w-[114px] h-[36px] py-[0] rabby-btn-ghost"
               onClick={goToReceive}
             >
               {t('page.dashboard.tokenDetail.receive')}

diff --git a/src/ui/views/Dashboard/components/TokenDetailPopup/index.tsx b/src/ui/views/Dashboard/components/TokenDetailPopup/index.tsx
@@ -98,7 +98,7 @@ export const TokenDetailPopup = ({
           onClose={onClose}
           canClickToken={canClickToken}
           hideOperationButtons={hideOperationButtons}
-        ></TokenDetail>
+        />
       )}
     </Popup>
   );