feat: adjusted the entry UI display for Keystone.

Author: slient-coder

build/_raw/images/artifacts/keystone.png

@@ -318,3 +318,24 @@ export const PAYMENT_CHANNELS = {
     img: './images/artifacts/transak.png'
   }
 };
+
+export enum HardwareWalletType {
+  Keystone = 'keystone',
+  Ledger = 'ledger',
+  Trezor = 'trezor'
+}
+
+export const HARDWARE_WALLETS = {
+  [HardwareWalletType.Keystone]: {
+    name: 'Keystone',
+    img: './images/artifacts/keystone.png'
+  },
+  [HardwareWalletType.Ledger]: {
+    name: 'Ledger',
+    img: './images/artifacts/ledger.png'
+  },
+  [HardwareWalletType.Trezor]: {
+    name: 'Trezor',
+    img: './images/artifacts/trezor.png'
+  }
+};

build/_raw/images/artifacts/ledger.png

@@ -1,6 +1,6 @@
 import { Card, Column, Content, Header, Layout, Text } from '@/ui/components';
-
 import { useExtensionIsInTab } from '@/ui/features/browser/tabs';
+
 import { useNavigate } from '../MainRoute';
 
 export default function AddKeyringScreen() {
@@ -51,7 +51,7 @@ export default function AddKeyringScreen() {
             </Column>
           </Card>
 
-          <Text text="Conncet Hardware Wallet" preset="regular-bold" mt="lg" />
+          <Text text="Connect to Hardware Wallet" preset="regular-bold" mt="lg" />
 
           <Card
             justifyCenter

build/_raw/images/artifacts/trezor.png

@@ -0,0 +1,92 @@
+import { HARDWARE_WALLETS, HardwareWalletType } from '@/shared/constant';
+import { Card, Column, Image, Row, Text } from '@/ui/components';
+import { useTools } from '@/ui/components/ActionComponent';
+import { BottomModal } from '@/ui/components/BottomModal';
+import { useExtensionIsInTab } from '@/ui/features/browser/tabs';
+import { colors } from '@/ui/theme/colors';
+import { useWallet } from '@/ui/utils';
+import { CloseOutlined } from '@ant-design/icons';
+
+import { useNavigate } from '../MainRoute';
+
+function WalletItem(props: { walletType: HardwareWalletType; onClick?: () => void; disabled?: boolean }) {
+  const walletInfo = HARDWARE_WALLETS[props.walletType];
+  const tools = useTools();
+
+  return (
+    <Card
+      style={{ backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 10, opacity: props.disabled ? 0.4 : 1 }}
+      mt="lg"
+      onClick={() => {
+        if (props.disabled) {
+          tools.toast('Coming soon');
+        } else {
+          props.onClick && props.onClick();
+        }
+      }}>
+      <Row fullX>
+        <Row itemsCenter>
+          <Image src={walletInfo.img} size={30} />
+          <Text text={walletInfo.name} />
+        </Row>
+      </Row>
+    </Card>
+  );
+}
+
+export const ConnectHardwareModal = ({ onClose }: { onClose: () => void }) => {
+  const wallet = useWallet();
+
+  const isInTab = useExtensionIsInTab();
+  const navigate = useNavigate();
+
+  return (
+    <BottomModal onClose={onClose}>
+      <Column justifyCenter itemsCenter>
+        <Row justifyBetween itemsCenter style={{ height: 20 }} fullX>
+          <Row />
+          <Text text="Connect to Hardware Wallet" textCenter size="md" />
+          <Row
+            onClick={() => {
+              onClose();
+            }}>
+            <CloseOutlined />
+          </Row>
+        </Row>
+
+        <Row fullX style={{ borderTopWidth: 1, borderColor: colors.border }} my="md" />
+
+        <Column gap="zero" mt="sm" mb="lg">
+          <Text
+            size="sm"
+            color="textDim"
+            text={`The hardware wallet feature is experimental. Use it with caution as potential issues may arise`}
+          />
+
+          <WalletItem
+            walletType={HardwareWalletType.Keystone}
+            onClick={async () => {
+              const isBooted = await wallet.isBooted();
+              if (!isInTab) {
+                if (isBooted) {
+                  window.open('#/account/create-keystone-wallet');
+                } else {
+                  window.open('#/account/create-password?isKeystone=true');
+                }
+                return;
+              }
+              if (isBooted) {
+                navigate('CreateKeystoneWalletScreen');
+              } else {
+                navigate('CreatePasswordScreen', { isKeystone: true });
+              }
+            }}
+          />
+
+          <WalletItem walletType={HardwareWalletType.Ledger} disabled />
+          <WalletItem walletType={HardwareWalletType.Trezor} disabled />
+        </Column>
+      </Column>
+    </BottomModal>
+  );
+};

src/shared/constant/index.ts

@@ -1,15 +1,20 @@
 /* eslint-disable quotes */
+import { useState } from 'react';
+
 import { Button, Column, Content, Layout, Logo, Row, Text } from '@/ui/components';
+import { useExtensionIsInTab } from '@/ui/features/browser/tabs';
 import { useWallet } from '@/ui/utils';
 
-import { useExtensionIsInTab } from '@/ui/features/browser/tabs';
 import { useNavigate } from '../MainRoute';
+import { ConnectHardwareModal } from './ConnectHardwareModal';
 
 export default function WelcomeScreen() {
   const navigate = useNavigate();
   const wallet = useWallet();
   const isInTab = useExtensionIsInTab();
 
+  const [connectHardwareModalVisible, setConnectHardwareModalVisible] = useState(false);
+
   return (
     <Layout>
       <Content preset="middle">
@@ -49,25 +54,20 @@ export default function WelcomeScreen() {
               }}
             />
             <Button
-              text="Connect Keystone"
+              text="Connect to Hardware Wallet"
               preset="default"
               onClick={async () => {
-                const isBooted = await wallet.isBooted();
-                if (!isInTab) {
-                  if (isBooted) {
-                    window.open('#/account/create-keystone-wallet');
-                  } else {
-                    window.open('#/account/create-password?isKeystone=true');
-                  }
-                  return
-                }
-                if (isBooted) {
-                  navigate('CreateKeystoneWalletScreen');
-                } else {
-                  navigate('CreatePasswordScreen', { isKeystone: true });
-                }
+                setConnectHardwareModalVisible(true);
               }}
             />
+
+            {connectHardwareModalVisible && (
+              <ConnectHardwareModal
+                onClose={() => {
+                  setConnectHardwareModalVisible(false);
+                }}
+              />
+            )}
           </Column>
         </Column>
       </Content>