chore: add Keycard Shell to the list of supported QR hardware wallets

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -120,6 +120,7 @@ body:
         - AirGap Vault
         - imToken
         - OneKey
+        - Keycard Shell
         - Other (please elaborate in the "Additional Context" section)
   - type: textarea
     id: additional

shared/constants/hardware-wallets.ts

@@ -101,6 +101,9 @@ export enum HardwareAffiliateLinks {
   // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
   // eslint-disable-next-line @typescript-eslint/naming-convention
   onekey = 'https://onekey.so/products/onekey-pro-hardware-wallet/',
+  // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  kshell = 'https://get.keycard.tech/pages/keycard-shell',
 }
 
 export enum HardwareAffiliateTutorialLinks {
@@ -134,6 +137,9 @@ export enum HardwareAffiliateTutorialLinks {
   // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
   // eslint-disable-next-line @typescript-eslint/naming-convention
   onekey = 'https://help.onekey.so/hc/articles/9426592069903',
+  // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  kshell = 'https://keycard.tech/help/connect-keycard-shell-to-a-wallet-app',
 }
 
 /**

ui/pages/create-account/connect-hardware/select-hardware.js

@@ -879,6 +879,41 @@ export default class SelectHardware extends Component {
           </>
         ),
       },
+      {
+        message: (
+          <>
+            <p className="hw-connect__QR-subtitle">
+              {this.context.t('keycardShell')}
+            </p>
+            <Button
+              className="hw-connect__external-btn-first"
+              variant={BUTTON_VARIANT.SECONDARY}
+              onClick={() => {
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Navigation,
+                  event: 'Clicked Keycard Shell Buy Now',
+                });
+                openWindow(HardwareAffiliateLinks.kshell);
+              }}
+            >
+              {this.context.t('buyNow')}
+            </Button>
+            <Button
+              className="hw-connect__external-btn"
+              variant={BUTTON_VARIANT.SECONDARY}
+              onClick={() => {
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Navigation,
+                  event: 'Clicked Keycard Shell Tutorial',
+                });
+                openWindow(HardwareAffiliateTutorialLinks.kshell);
+              }}
+            >
+              {this.context.t('tutorial')}
+            </Button>
+          </>
+        ),
+      },
     );
     return (
       <div className="hw-tutorial">