fix: disable ledger on firefox

RabbyHub · Jan 7, 2025 · 06cdfec · 06cdfec
1 parent 5fb19e5
commit 06cdfec
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/ui/component/Item/index.tsx b/src/ui/component/Item/index.tsx
@@ -22,6 +22,7 @@ const ItemWrapper = styled.div<{
   bgColor: string;
   // default var(--r-blue-light-1, #eef1ff);
   hoverBgColor: string;
+  disabled?: boolean;
 }>`
   width: 100%;
 
@@ -35,9 +36,10 @@ const ItemWrapper = styled.div<{
   padding-bottom: ${({ py: y }) => (typeof y === 'number' ? y + 'px' : y)};
   padding-left: ${({ px: x }) => (typeof x === 'number' ? x + 'px' : x)};
   padding-right: ${({ px: x }) => (typeof x === 'number' ? x + 'px' : x)};
+  opacity: ${(p) => (p.disabled ? 0.6 : 1)};
 
   ${(p) =>
-    p.hoverBorder
+    p.hoverBorder && !p.disabled
       ? css`
           &:hover {
             background-color: ${p.hoverBgColor};
@@ -69,6 +71,7 @@ interface ItemProps extends ComponentPropsWithoutRef<'div'> {
   rightIconClassName?: string;
   left?: ReactNode;
   right?: ReactNode;
+  disabled?: boolean;
 }
 
 export const Item = (props: PropsWithChildren<ItemProps>) => {

diff --git a/src/ui/views/NewUserImport/ImportList.tsx b/src/ui/views/NewUserImport/ImportList.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/constant';
 import { Item } from '@/ui/component';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'antd';
 
 export const ImportWalletList = () => {
   const { t } = useTranslation();
@@ -34,6 +35,10 @@ export const ImportWalletList = () => {
         {
           type: KEYRING_CLASS.HARDWARE.LEDGER,
           logo: WALLET_BRAND_CONTENT[WALLET_BRAND_TYPES.LEDGER].icon,
+          preventClick:
+            WALLET_BRAND_CONTENT[WALLET_BRAND_TYPES.LEDGER].preventClick,
+          tipI18nKey:
+            WALLET_BRAND_CONTENT[WALLET_BRAND_TYPES.LEDGER].tipI18nKey,
         },
         {
           type: KEYRING_CLASS.HARDWARE.TREZOR,
@@ -103,20 +108,30 @@ export const ImportWalletList = () => {
       <div className="mt-24 flex flex-col items-center justify-center gap-16">
         {tipList.map((item, index) => {
           return (
-            <Item
+            <Tooltip
+              title={item.tipI18nKey ? t(item.tipI18nKey) : undefined}
               key={item.type}
-              bgColor="var(--r-neutral-card2, #F2F4F7)"
-              px={16}
-              py={20}
-              leftIcon={item.logo}
-              leftIconClassName="w-24 h-24 mr-12"
-              onClick={() => {
-                gotoImport(item.type);
-              }}
-              className="rounded-[8px] text-[17px] font-medium text-r-neutral-title1"
+              overlayClassName="rectangle"
             >
-              {BRAND_ALIAN_TYPE_TEXT[item.type]}
-            </Item>
+              <Item
+                key={item.type}
+                bgColor="var(--r-neutral-card2, #F2F4F7)"
+                px={16}
+                py={20}
+                leftIcon={item.logo}
+                leftIconClassName="w-24 h-24 mr-12"
+                disabled={item.preventClick}
+                onClick={() => {
+                  if (item.preventClick) {
+                    return;
+                  }
+                  gotoImport(item.type);
+                }}
+                className="rounded-[8px] text-[17px] font-medium text-r-neutral-title1"
+              >
+                {BRAND_ALIAN_TYPE_TEXT[item.type]}
+              </Item>
+            </Tooltip>
           );
         })}
       </div>