feat: add OneKey on device selection screen

MetaMask · Jan 10, 2025 · ab9e7c2 · ab9e7c2
1 parent ec75a8b
commit ab9e7c2
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 3 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -4890,6 +4890,7 @@ export default class MetamaskController extends EventEmitter {
     let keyringName = null;
     switch (deviceName) {
       case HardwareDeviceNames.trezor:
+      case HardwareDeviceNames.oneKeyViaTrezor:
         keyringName = keyringOverrides?.trezor?.type || TrezorKeyring.type;
         break;
       case HardwareDeviceNames.ledger:

diff --git a/ui/components/ui/logo/logo-onekey.js b/ui/components/ui/logo/logo-onekey.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LogoOnekey = ({
+  width = '100%',
+  color = 'var(--color-text-default)',
+  className,
+  ariaLabel,
+}) => {
+  return (
+    <svg
+      width={width}
+      fill={color}
+      className={className}
+      aria-label={ariaLabel}
+      viewBox="60 0 520 288"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M272.329 177.513C266.429 177.513 261.011 176.119 256.074 173.331C251.137 170.542 247.224 166.693 244.335 161.783C241.445 156.812 240 151.205 240 144.961C240 138.778 241.445 133.232 244.335 128.321C247.224 123.351 251.137 119.471 256.074 116.683C261.011 113.894 266.429 112.5 272.329 112.5C278.289 112.5 283.707 113.894 288.584 116.683C293.52 119.471 297.403 123.351 300.233 128.321C303.122 133.232 304.567 138.778 304.567 144.961C304.567 151.205 303.122 156.812 300.233 161.783C297.403 166.693 293.52 170.542 288.584 173.331C283.647 176.119 278.229 177.513 272.329 177.513ZM272.329 166.147C276.122 166.147 279.463 165.299 282.353 163.601C285.242 161.844 287.5 159.358 289.125 156.145C290.751 152.933 291.564 149.205 291.564 144.961C291.564 140.718 290.751 137.02 289.125 133.868C287.5 130.655 285.242 128.2 282.353 126.503C279.463 124.806 276.122 123.957 272.329 123.957C268.536 123.957 265.165 124.806 262.215 126.503C259.325 128.2 257.067 130.655 255.442 133.868C253.816 137.02 253.004 140.718 253.004 144.961C253.004 149.205 253.816 152.933 255.442 156.145C257.067 159.358 259.325 161.844 262.215 163.601C265.165 165.299 268.536 166.147 272.329 166.147Z"></path>
+      <path d="M337.181 125.775C343.141 125.775 347.957 127.685 351.63 131.504C355.302 135.262 357.138 140.536 357.138 147.325V176.877H344.496V149.053C344.496 145.052 343.502 141.991 341.516 139.869C339.529 137.687 336.82 136.596 333.388 136.596C329.897 136.596 327.127 137.687 325.08 139.869C323.094 141.991 322.1 145.052 322.1 149.053V176.877H309.458V126.503H322.1V132.777C323.786 130.595 325.923 128.897 328.512 127.685C331.161 126.412 334.051 125.775 337.181 125.775Z"></path>
+      <path d="M412.055 150.599C412.055 152.417 411.935 154.054 411.694 155.509H375.121C375.422 159.146 376.686 161.995 378.914 164.056C381.141 166.117 383.88 167.148 387.131 167.148C391.827 167.148 395.168 165.117 397.155 161.055H410.791C409.346 165.905 406.577 169.906 402.483 173.058C398.389 176.149 393.362 177.695 387.402 177.695C382.586 177.695 378.251 176.634 374.398 174.513C370.606 172.331 367.626 169.269 365.458 165.329C363.351 161.389 362.298 156.842 362.298 151.69C362.298 146.477 363.351 141.9 365.458 137.96C367.565 134.02 370.515 130.989 374.308 128.867C378.101 126.745 382.465 125.685 387.402 125.685C392.158 125.685 396.402 126.715 400.135 128.776C403.928 130.837 406.848 133.777 408.894 137.596C411.002 141.354 412.055 145.689 412.055 150.599ZM398.961 146.962C398.901 143.688 397.727 141.082 395.439 139.142C393.151 137.141 390.352 136.141 387.041 136.141C383.91 136.141 381.261 137.111 379.094 139.051C376.987 140.93 375.693 143.567 375.211 146.962H398.961Z"></path>
+      <path d="M454.154 176.877L431.216 148.598V176.877H418.574V113.409H431.216V141.87L454.154 113.409H469.415L443.407 144.87L470.137 176.877H454.154Z"></path>
+      <path d="M515.026 150.599C515.026 152.417 514.906 154.054 514.665 155.509H478.092C478.393 159.146 479.657 161.995 481.885 164.056C484.112 166.117 486.851 167.148 490.102 167.148C494.798 167.148 498.139 165.117 500.126 161.055H513.762C512.317 165.905 509.548 169.906 505.454 173.058C501.36 176.149 496.333 177.695 490.373 177.695C485.557 177.695 481.222 176.634 477.369 174.513C473.577 172.331 470.597 169.269 468.429 165.329C466.322 161.389 465.269 156.842 465.269 151.69C465.269 146.477 466.322 141.9 468.429 137.96C470.536 134.02 473.486 130.989 477.279 128.867C481.072 126.745 485.437 125.685 490.373 125.685C495.129 125.685 499.374 126.715 503.106 128.776C506.899 130.837 509.819 133.777 511.866 137.596C513.973 141.354 515.026 145.689 515.026 150.599ZM501.932 146.962C501.872 143.688 500.698 141.082 498.41 139.142C496.123 137.141 493.323 136.141 490.012 136.141C486.881 136.141 484.233 137.111 482.065 139.051C479.958 140.93 478.664 143.567 478.182 146.962H501.932Z"></path>
+      <path d="M567.6 126.503L536.626 200.7H523.171L534.007 175.604L513.96 126.503H528.137L541.051 161.692L554.145 126.503H567.6Z"></path>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M144 216C193.706 216 216 193.706 216 144C216 94.2944 193.706 72 144 72C94.2944 72 72 94.2944 72 144C72 193.706 94.2944 216 144 216ZM130.475 102.531H150.505V135.538H138.086V113.156H126.961L130.475 102.531ZM144 185.469C156.616 185.469 166.844 175.242 166.844 162.626C166.844 150.01 156.616 139.783 144 139.783C131.384 139.783 121.157 150.01 121.157 162.626C121.157 175.242 131.384 185.469 144 185.469ZM144 175.099C150.889 175.099 156.473 169.515 156.473 162.626C156.473 155.738 150.889 150.153 144 150.153C137.112 150.153 131.528 155.738 131.528 162.626C131.528 169.515 137.112 175.099 144 175.099Z"
+      ></path>
+    </svg>
+  );
+};
+
+LogoOnekey.propTypes = {
+  /**
+   * The width of the logo. Defaults to 100%
+   */
+  width: PropTypes.string,
+  /**
+   * The color of the logo defaults to var(--color-text-default)
+   */
+  color: PropTypes.string,
+  /**
+   * Additional className to add to the root svg
+   */
+  className: PropTypes.string,
+  /**
+   * Aria label to add to the logo component
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default LogoOnekey;
diff --git a/ui/pages/create-account/connect-hardware/index.js b/ui/pages/create-account/connect-hardware/index.js
@@ -128,6 +128,7 @@ class ConnectHardwareForm extends Component {
   async checkIfUnlocked() {
     for (const device of [
       HardwareDeviceNames.trezor,
+      HardwareDeviceNames.oneKeyViaTrezor,
       HardwareDeviceNames.ledger,
       HardwareDeviceNames.lattice,
     ]) {

diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js
@@ -14,6 +14,7 @@ import {
 import LogoLedger from '../../../components/ui/logo/logo-ledger';
 import LogoQRBased from '../../../components/ui/logo/logo-qr-based';
 import LogoTrezor from '../../../components/ui/logo/logo-trezor';
+import LogoOnekey from '../../../components/ui/logo/logo-onekey';
 import LogoLattice from '../../../components/ui/logo/logo-lattice';
 
 import {
@@ -67,8 +68,14 @@ export default class SelectHardware extends Component {
 
   connect = async () => {
     if (this.state.selectedDevice) {
-      if (this.state.selectedDevice === 'trezor' && isUSBSupported) {
-        this.setState({ trezorRequestDevicePending: true });
+      if (
+        (this.state.selectedDevice === HardwareDeviceNames.trezor ||
+          this.state.selectedDevice === HardwareDeviceNames.oneKeyViaTrezor) &&
+        isUSBSupported
+      ) {
+        this.setState({
+          trezorRequestDevicePending: true,
+        });
         try {
           await window.navigator.usb.requestDevice({
             filters: [
@@ -107,6 +114,23 @@ export default class SelectHardware extends Component {
     );
   }
 
+  renderConnectToOnekeyButton() {
+    return (
+      <button
+        data-testid="connect-onekey-btn"
+        className={classnames('hw-connect__btn', {
+          selected:
+            this.state.selectedDevice === HardwareDeviceNames.oneKeyViaTrezor,
+        })}
+        onClick={(_) =>
+          this.setState({ selectedDevice: HardwareDeviceNames.oneKeyViaTrezor })
+        }
+      >
+        <LogoOnekey className="hw-connect__btn__img" ariaLabel="OneKey" />
+      </button>
+    );
+  }
+
   renderConnectToLatticeButton() {
     return (
       <button
@@ -161,12 +185,13 @@ export default class SelectHardware extends Component {
         <div className="hw-connect__btn-wrapper">
           {this.renderConnectToLedgerButton()}
           {this.renderConnectToTrezorButton()}
+          {this.renderConnectToLatticeButton()}
         </div>
         <div
           className="hw-connect__btn-wrapper"
           style={{ margin: '10px 0 0 0' }}
         >
-          {this.renderConnectToLatticeButton()}
+          {this.renderConnectToOnekeyButton()}
           {this.renderConnectToQRButton()}
         </div>
       </>
@@ -307,6 +332,8 @@ export default class SelectHardware extends Component {
         return this.renderLedgerTutorialSteps();
       case HardwareDeviceNames.trezor:
         return this.renderTrezorTutorialSteps();
+      case HardwareDeviceNames.oneKeyViaTrezor:
+        return this.renderOnekeyTutorialSteps();
       case HardwareDeviceNames.lattice:
         return this.renderLatticeTutorialSteps();
       case HardwareDeviceNames.qr:
@@ -574,6 +601,86 @@ export default class SelectHardware extends Component {
     );
   }
 
+  renderOnekeyTutorialSteps() {
+    const steps = [
+      {
+        asset: 'plug-in-wallet',
+        dimensions: { width: '225px', height: '75px' },
+        title: this.context.t('step1OnekeyWallet'),
+        message: this.context.t('step1OnekeyWalletMsg', [
+          <a
+            className="hw-connect__msg-link"
+            href={ZENDESK_URLS.HARDWARE_CONNECTION}
+            rel="noopener noreferrer"
+            target="_blank"
+            key="onekey-support-link"
+          >
+            {this.context.t('hardwareWalletSupportLinkConversion')}
+          </a>,
+        ]),
+      },
+    ];
+
+    return (
+      <div className="hw-tutorial">
+        {steps.map((step, index) => (
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            alignItems={AlignItems.center}
+            className="hw-connect"
+            key={index}
+          >
+            <h3 className="hw-connect__title">{step.title}</h3>
+            <Box
+              display={Display.Flex}
+              flexDirection={FlexDirection.Row}
+              justifyContent={JustifyContent.center}
+              marginBottom={2}
+            >
+              <Button
+                className="hw-connect__external-btn-first"
+                variant={BUTTON_VARIANT.SECONDARY}
+                onClick={() => {
+                  this.context.trackEvent({
+                    category: MetaMetricsEventCategory.Navigation,
+                    event: 'Clicked OneKey Buy Now',
+                  });
+                  openWindow(HardwareAffiliateLinks.onekey);
+                }}
+              >
+                {this.context.t('buyNow')}
+              </Button>
+              <Button
+                className="hw-connect__external-btn"
+                variant={BUTTON_VARIANT.SECONDARY}
+                onClick={() => {
+                  this.context.trackEvent({
+                    category: MetaMetricsEventCategory.Navigation,
+                    event: 'Clicked OneKey Tutorial',
+                  });
+                  openWindow(HardwareAffiliateTutorialLinks.onekey);
+                }}
+              >
+                {this.context.t('tutorial')}
+              </Button>
+            </Box>
+
+            <p className="hw-connect__msg">{step.message}</p>
+            {step.asset && (
+              <img
+                className="hw-connect__step-asset"
+                src={`images/${step.asset}.svg`}
+                {...step.dimensions}
+                alt=""
+              />
+            )}
+          </Box>
+        ))}
+      </div>
+    );
+  }
+
   renderQRHardwareWalletSteps() {
     const steps = [];
     steps.push(