Merge branch 'fix/some-bugs-1' into tmp/20240830

RabbyHub · Sep 2, 2024 · 0e52796 · 0e52796
2 parents b0c4584 + 9616c18
commit 0e52796
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 62 deletions.
diff --git a/src/ui/component/ChainIcon.tsx b/src/ui/component/ChainIcon.tsx
@@ -120,7 +120,7 @@ const ChainIcon = ({
   showCustomRPCToolTip = false,
   nonce,
   innerClassName,
-  tooltipTriggerElement = 'chain',
+  tooltipTriggerElement = 'dot',
   tooltipProps,
 }: Props) => {
   const wallet = useWallet();
@@ -197,7 +197,7 @@ const ChainIcon = ({
     );
   } else {
     return (
-      <div className="chain-icon-comp">
+      <div className="chain-icon-comp relative">
         <Tooltip
           placement="top"
           overlayClassName={clsx('rectangle')}
@@ -213,7 +213,7 @@ const ChainIcon = ({
             />
           </ChainIconWrapper>
         </Tooltip>
-        <Tooltip
+        <TooltipWithMagnetArrow
           placement="top"
           overlayClassName={clsx('rectangle')}
           {...tooltipProps}
@@ -233,7 +233,7 @@ const ChainIcon = ({
             ) : (
               <UnavaliableIcon className={clsx(size)} />
             ))}
-        </Tooltip>
+        </TooltipWithMagnetArrow>
       </div>
     );
   }

diff --git a/src/ui/component/ChainSelector/InForm.tsx b/src/ui/component/ChainSelector/InForm.tsx
@@ -16,10 +16,10 @@ import { SWAP_SUPPORT_CHAINS } from '@/constant';
 import { findChain } from '@/utils/chain';
 
 const ChainWrapper = styled.div`
-  height: 40px;
+  /* height: 40px; */
   background: var(--r-neutral-card-2, #f2f4f7);
   border-radius: 6px;
-  padding: 12px 10px;
+  padding: 12px 12px;
   width: 100%;
   display: flex;
   align-items: center;
@@ -39,6 +39,7 @@ const ChainWrapper = styled.div`
     }
     .name {
       color: var(--r-neutral-title-1, #192945);
+      line-height: 15px;
     }
   }
 `;
@@ -155,6 +156,7 @@ export default function ChainSelectorInForm({
           supportChains={supportChains}
           disabledTips={disabledTips}
           title={title}
+          showRPCStatus
         />
       )}
     </>

diff --git a/src/ui/component/ChainSelector/LargeModal.tsx b/src/ui/component/ChainSelector/LargeModal.tsx
@@ -30,6 +30,18 @@ import NetSwitchTabs, {
 } from '../PillsSwitch/NetSwitchTabs';
 import { useTranslation } from 'react-i18next';
 import { LoadingBalances } from './LoadingBalances';
+import styled from 'styled-components';
+
+const Warper = styled.div`
+  .ant-input {
+    &::placeholder {
+      color: var(--r-neutral-foot);
+    }
+  }
+  .select-chain-item::after {
+    border-bottom-width: 0.5px !important;
+  }
+`;
 
 interface ChainSelectorModalProps {
   visible: boolean;
@@ -190,63 +202,65 @@ export const ChainSelectorLargeModal = ({
       centered
       destroyOnClose
     >
-      <header className={title ? 'pt-[0px]' : 'pt-[20px]'}>
-        <div className="modal-title">{title}</div>
-        {isShowTestnet && (
-          <NetSwitchTabs
-            value={selectedTab}
-            onTabChange={onTabChange}
-            className="h-[28px] box-content mt-[20px] mb-[20px]"
+      <Warper>
+        <header className={title ? 'pt-[0px]' : 'pt-[20px]'}>
+          <div className="modal-title">{title}</div>
+          {isShowTestnet && (
+            <NetSwitchTabs
+              value={selectedTab}
+              onTabChange={onTabChange}
+              className="h-[28px] box-content mt-[20px] mb-[20px]"
+            />
+          )}
+          <Input
+            prefix={<img src={IconSearch} />}
+            // Search chain
+            placeholder={t('component.ChainSelectorModal.searchPlaceholder')}
+            onChange={(e) => setSearch(e.target.value)}
+            value={search}
+            allowClear
+            className="bg-r-neutral-card-1 hover:border-rabby-blue-default"
           />
+        </header>
+        {isLoading ? (
+          <div className="chain-selector-large-modal-content">
+            <LoadingBalances loading={isLoading} />
+          </div>
+        ) : (
+          <div className="chain-selector-large-modal-content">
+            <SelectChainList
+              supportChains={supportChains}
+              data={matteredList}
+              sortable={false /* !supportChains */}
+              pinned={pinned as CHAINS_ENUM[]}
+              onStarChange={handleStarChange}
+              onSort={handleSort}
+              onChange={handleChange}
+              value={value}
+              disabledTips={disabledTips}
+              showRPCStatus={showRPCStatus}
+            ></SelectChainList>
+            <SelectChainList
+              supportChains={supportChains}
+              data={unmatteredList}
+              value={value}
+              pinned={pinned as CHAINS_ENUM[]}
+              onStarChange={handleStarChange}
+              onChange={handleChange}
+              disabledTips={disabledTips}
+              showRPCStatus={showRPCStatus}
+            ></SelectChainList>
+            {matteredList.length === 0 && unmatteredList.length === 0 ? (
+              <div className="select-chain-list pt-[70px] pb-[120px]">
+                <Empty>
+                  {/* No chains */}
+                  {t('component.ChainSelectorModal.noChains')}
+                </Empty>
+              </div>
+            ) : null}
+          </div>
         )}
-        <Input
-          prefix={<img src={IconSearch} />}
-          // Search chain
-          placeholder={t('component.ChainSelectorModal.searchPlaceholder')}
-          onChange={(e) => setSearch(e.target.value)}
-          value={search}
-          allowClear
-          className="bg-r-neutral-card-1"
-        />
-      </header>
-      {isLoading ? (
-        <div className="chain-selector-large-modal-content">
-          <LoadingBalances loading={isLoading} />
-        </div>
-      ) : (
-        <div className="chain-selector-large-modal-content">
-          <SelectChainList
-            supportChains={supportChains}
-            data={matteredList}
-            sortable={false /* !supportChains */}
-            pinned={pinned as CHAINS_ENUM[]}
-            onStarChange={handleStarChange}
-            onSort={handleSort}
-            onChange={handleChange}
-            value={value}
-            disabledTips={disabledTips}
-            showRPCStatus={showRPCStatus}
-          ></SelectChainList>
-          <SelectChainList
-            supportChains={supportChains}
-            data={unmatteredList}
-            value={value}
-            pinned={pinned as CHAINS_ENUM[]}
-            onStarChange={handleStarChange}
-            onChange={handleChange}
-            disabledTips={disabledTips}
-            showRPCStatus={showRPCStatus}
-          ></SelectChainList>
-          {matteredList.length === 0 && unmatteredList.length === 0 ? (
-            <div className="select-chain-list pt-[70px] pb-[120px]">
-              <Empty>
-                {/* No chains */}
-                {t('component.ChainSelectorModal.noChains')}
-              </Empty>
-            </div>
-          ) : null}
-        </div>
-      )}
+      </Warper>
     </Modal>
   );
 };
diff --git a/src/ui/component/ChainSelector/components/SelectChainItem.tsx b/src/ui/component/ChainSelector/components/SelectChainItem.tsx
@@ -109,6 +109,7 @@ export const SelectChainItem = forwardRef(
                         ? customRPC[data.enum].url
                         : ''
                     }
+                    showCustomRPCToolTip
                   />
                 ) : (
                   <img

diff --git a/src/ui/views/Approval/components/AddAsset.tsx b/src/ui/views/Approval/components/AddAsset.tsx
@@ -564,6 +564,7 @@ const AddAsset = ({ params }: { params: AddAssetProps }) => {
             onChange={handleChainChanged}
             onCancel={() => rejectApproval('User rejected the request.')}
             disabledTips={t('page.addToken.noTokenFoundOnThisChain')}
+            showRPCStatus
           />
         </div>
       </AddAssetWrapper>

diff --git a/src/ui/views/Approval/components/TxComponents/GnosisDrawer.tsx b/src/ui/views/Approval/components/TxComponents/GnosisDrawer.tsx
@@ -6,6 +6,7 @@ import { Account } from 'background/service/preference';
 import { useWallet, isSameAddress } from 'ui/utils';
 import { BasicSafeInfo } from '@rabby-wallet/gnosis-sdk';
 import { AddressItem, ownerPriority } from './DrawerAddressItem';
+import clsx from 'clsx';
 
 interface GnosisDrawerProps {
   // safeInfo: SafeInfo;
@@ -122,7 +123,18 @@ const GnosisDrawer = ({ safeInfo, onCancel, onConfirm }: GnosisDrawerProps) => {
         ))}
       </div>
       <div className="footer mx-[-20px] mb-[-24px] py-[16px] px-[20px] border-t-[1px] border-t-r-neutral-card2 bg-r-neutral-card1">
-        <Button type="primary" onClick={onCancel} className="h-[48px]">
+        <Button
+          type="primary"
+          ghost
+          onClick={onCancel}
+          className={clsx(
+            'h-[48px]',
+            'border-blue-light text-blue-light',
+            'hover:bg-[#8697FF1A] active:bg-[#0000001A]',
+            'rounded-[8px]',
+            'before:content-none'
+          )}
+        >
           {t('global.backButton')}
         </Button>
         <Button

diff --git a/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx
@@ -422,6 +422,7 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
         hideTestnetTab
         hideMainnetTab={false}
         visible={chainSelectorState.visible}
+        showRPCStatus
         onCancel={() => {
           setChainSelectorState({
             visible: false,

diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx
@@ -367,6 +367,7 @@ export const AddCustomTestnetTokenPopup = ({
             visible: false,
           });
         }}
+        showRPCStatus
         onChange={(value) => {
           setChainSelectorState({
             visible: false,

diff --git a/src/ui/views/Dashboard/components/ChainAndSiteSelector/index.tsx b/src/ui/views/Dashboard/components/ChainAndSiteSelector/index.tsx
@@ -417,6 +417,7 @@ export default ({
         className="receive-chain-select-modal"
         value={CHAINS_ENUM.ETH}
         visible={isShowReceiveModal}
+        showRPCStatus
         onChange={(chain) => {
           history.push(`/receive?rbisource=dashboard&chain=${chain}`);
           setIsShowReceiveModal(false);
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,6 +109,7 @@ export const SelectChainItem = forwardRef( @@
                             ? customRPC[data.enum].url
                             : ''
                         }
+                        showCustomRPCToolTip
                       />
                     ) : (
                       <img
@@ Expand Down @@