add BitBox02 hardware wallet support

Co-authored-by: thisconnect <this@shiftcrypto.ch>
vacuumlabs · Oct 26, 2021 · 87d14cb · 87d14cb
1 parent 2d03bab
commit 87d14cb
Show file tree

Hide file tree

Showing 14 changed files with 393 additions and 16 deletions.
diff --git a/.env.example b/.env.example
@@ -58,11 +58,12 @@ ADALITE_NETWORK="MAINNET"
 # ADALITE_NETWORK="TESTNET"
 
 # load wallet options
+ADALITE_ENABLE_BITBOX02="true"
 ADALITE_ENABLE_TREZOR="true"
 ADALITE_ENABLE_LEDGER="true"
 
 # delegation by ticker
-ADALITE_ENABLE_SEARCH_BY_TICKER=true 
+ADALITE_ENABLE_SEARCH_BY_TICKER=true
 
 # catalyst next round start and end dates in ISO format (example: 2021-2030)
 ADALITE_NEXT_VOTING_START=2021-01-01T00:00:00.000Z

diff --git a/app/frontend/components/common/svg.tsx b/app/frontend/components/common/svg.tsx
@@ -2,6 +2,15 @@
 // eslint-disable-next-line no-unused-vars
 import {h, ComponentFactory} from 'preact'
 
+const BitBoxLogoWhite = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="86" height="21">
+    <path
+      d="M31.776 15.39c1.713 0 2.62-.767 2.62-2.077s-.928-2.095-2.621-2.095h-3.358v4.171zm-3.36-6.37h3.299c1.451 0 2.257-.671 2.257-1.853 0-1.183-.745-1.733-2.237-1.733H28.41zm8.801 4.515c0 2.499-1.713 4.031-4.434 4.031h-7.195V3.256h6.811c2.52 0 4.314 1.345 4.314 3.69a3.104 3.104 0 0 1-2.217 3.103c1.753.544 2.687 1.693 2.687 3.486m1.86-10.278h2.621v2.62h-2.62zm0 4.01h2.621v10.299h-2.62Zm10.891 10.158a7.073 7.073 0 0 1-2.317.383c-2.016 0-2.923-.948-2.923-2.903V9.263H42.86V7.288h1.834V4.083h2.62v3.205h2.459v2.015h-2.46v5.32c0 .706.303.948 1.029.948a5.619 5.619 0 0 0 1.29-.222zm7.807-2.037c1.712 0 2.62-.765 2.62-2.075s-.928-2.095-2.621-2.095h-3.36v4.171zm-3.36-6.367h3.305c1.452 0 2.258-.672 2.258-1.854 0-1.183-.767-1.733-2.244-1.733h-3.326zm8.827 4.514c0 2.499-1.713 4.031-4.434 4.031h-7.22V3.256h6.81c2.52 0 4.314 1.345 4.314 3.69a3.104 3.104 0 0 1-2.217 3.103c1.753.544 2.72 1.693 2.72 3.486m3.897-1.129c0 2.016 1.068 3.265 2.687 3.265 1.618 0 2.687-1.269 2.687-3.265 0-1.995-1.069-3.265-2.687-3.265-1.62 0-2.687 1.344-2.687 3.265m8.062 0c0 3.265-2.237 5.482-5.375 5.482s-5.375-2.217-5.375-5.482 2.237-5.481 5.375-5.481c3.137 0 5.374 2.216 5.374 5.481m7.477 5.16-2.318-3.527-2.337 3.527H75.14l3.707-5.402-3.366-4.896h2.843l2.015 3.022 1.975-3.022h2.814l-3.32 4.796 3.682 5.502ZM0 15.88v-4.882l3.943-1.696V1.704L7.853 0v12.463zm17.675.04v-4.872L13.73 9.343v-7.59L9.814.041v12.463Zm-8.826-1.744L1.013 17.6 8.84 21l7.861-3.417z"
+      style="fill:#fff;stroke-width:.0711515"
+    />
+  </svg>
+)
+
 const LedgerLogoWhite = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="82" height="20" viewBox="0 0 82 20">
     <g
@@ -367,6 +376,7 @@ const WarningIcon = () => (
 )
 
 export {
+  BitBoxLogoWhite,
   LedgerLogoWhite,
   TrezorLogoWhite,
   AdaLiteLogo,

diff --git a/app/frontend/components/pages/login/hardwareAuth.tsx b/app/frontend/components/pages/login/hardwareAuth.tsx
@@ -1,6 +1,6 @@
 import {Fragment, h} from 'preact'
 import {CryptoProviderType} from '../../../wallet/types'
-import {TrezorLogoWhite, LedgerLogoWhite} from '../../common/svg'
+import {TrezorLogoWhite, LedgerLogoWhite, BitBoxLogoWhite} from '../../common/svg'
 import {ADALITE_CONFIG} from '../../../config'
 import tooltip from '../../common/tooltip'
 import {useActions} from '../../../helpers/connect'
@@ -25,6 +25,12 @@ const LoadByHardwareWalletSection = () => {
     setBulkExport(!enableBulkExport)
   }, [enableBulkExport])
 
+  const BitBox02AffiliateLink = (title) => (
+    <a href="https://shiftcrypto.shop/" target="blank">
+      {title}
+    </a>
+  )
+
   const TrezorAffiliateLink = (title) => (
     <a href="https://shop.trezor.io/?offer_id=10&aff_id=1071" target="blank">
       {title}
@@ -40,6 +46,39 @@ const LoadByHardwareWalletSection = () => {
   return (
     <Fragment>
       <div className="authentication-content hardware">
+        <div className="authentication-wallet">
+          <div className="authentication-image-container">
+            <img className="authentication-image" src="assets/bitbox02.png" alt="BitBox02" />
+          </div>
+          <div className="authentication-paragraph">BitBox02</div>
+          <div className="authentication-paragraph small">
+            {BitBox02AffiliateLink('Support us by buying one')}
+          </div>
+          <div
+            className="authentication-paragraph small"
+            dangerouslySetInnerHTML={{__html: '&nbsp;'}}
+          />
+          <button
+            disabled={!ADALITE_CONFIG.ADALITE_ENABLE_BITBOX02 || isMobileOnly}
+            {...tooltip(
+              'Support for BitBox02 is temporarily disabled',
+              !ADALITE_CONFIG.ADALITE_ENABLE_BITBOX02
+            )}
+            {...tooltip('Not supported on mobile devices', isMobileOnly)}
+            className="button primary bitbox thin-data-balloon"
+            onClick={() =>
+              loadWallet({
+                cryptoProviderType: CryptoProviderType.BITBOX02,
+                shouldExportPubKeyBulk: enableBulkExport,
+              })
+            }
+          >
+            Unlock with
+            <div className="bitbox-logo-container">
+              <BitBoxLogoWhite />
+            </div>
+          </button>
+        </div>
         <div className="authentication-wallet">
           <div className="authentication-image-container">
             <img className="authentication-image" src="assets/trezor.jpg" alt="Trezor model T" />

diff --git a/app/frontend/components/pages/login/loginPage.tsx b/app/frontend/components/pages/login/loginPage.tsx
@@ -131,7 +131,7 @@ const AuthCardInitial = () => (
       />
       <AuthOption
         tabName={AuthMethodType.HW_WALLET}
-        texts={['Trezor T', 'Ledger Nano S/X', 'Android device & Ledger']}
+        texts={['Trezor T', 'Ledger Nano S/X', 'Android device & Ledger', 'BitBox02']}
         tag={'recommended'}
       />
       <AuthOption tabName={AuthMethodType.KEY_FILE} texts={['Encrypted .JSON file']} tag={''} />

diff --git a/app/frontend/selectors.ts b/app/frontend/selectors.ts
@@ -36,7 +36,11 @@ export const shouldShowExportOptionSelector = (state: State): boolean => {
 }
 
 export const usingHwWalletSelector = (state: State): boolean => {
-  return state.hwWalletName === WalletName.TREZOR || state.hwWalletName === WalletName.LEDGER
+  return (
+    state.hwWalletName == WalletName.BITBOX02 ||
+    state.hwWalletName === WalletName.TREZOR ||
+    state.hwWalletName === WalletName.LEDGER
+  )
 }
 
 /*

diff --git a/app/frontend/wallet/constants.ts b/app/frontend/wallet/constants.ts
@@ -69,6 +69,26 @@ export const WANTED_DELEGATOR_STAKING_ADDRESSES = []
 
 export const SATURATION_POINT = 62224967000000
 
+export const BITBOX02_VERSIONS = {
+  [CryptoProviderFeature.MINIMAL]: {
+    major: 9,
+    minor: 8,
+    patch: 0,
+  },
+  [CryptoProviderFeature.WITHDRAWAL]: {
+    major: 9,
+    minor: 8,
+    patch: 0,
+  },
+  [CryptoProviderFeature.BULK_EXPORT]: {
+    major: 9,
+    minor: 8,
+    patch: 0,
+  },
+}
+
+export const BITBOX02_ERRORS = {}
+
 export const LEDGER_VERSIONS = {
   [CryptoProviderFeature.MINIMAL]: {
     major: 2,