refactor(onboarding): simplify onboarding side-effects and support QR code log in

package.json

@@ -116,6 +116,7 @@
     "@visx/tooltip": "^3.1.2",
     "@visx/xychart": "^3.1.2",
     "@wagmi/core": "^2.16.3",
+    "@yudiel/react-qr-scanner": "^2.5.0",
     "bignumber.js": "^9.1.1",
     "bs58": "^6.0.0",
     "cmdk": "^0.2.0",
@@ -126,6 +127,7 @@
     "fast-json-stable-stringify": "^2.1.0",
     "graz": "^0.1.19",
     "immer": "^10.1.1",
+    "input-otp": "^1.4.2",
     "jsdom": "^24.1.0",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",

src/bonsai/lifecycles/usdcRebalanceLifecycle.ts

@@ -64,7 +64,11 @@ export function setUpUsdcRebalanceLifecycle(store: RootStore) {
         const { localDydxWallet, parentSubaccountInfo, sourceAccount, rebalanceAction } = data!;
 
         // context: Cosmos wallets do not support our lifecycle methods and are instead handled within useNotificationTypes
-        if (rebalanceAction == null || sourceAccount.chain === WalletNetworkType.Cosmos) {
+        if (
+          rebalanceAction == null ||
+          sourceAccount.chain === WalletNetworkType.Cosmos ||
+          sourceAccount.chain == null
+        ) {
           return;
         }
 

src/bonsai/rest/lib/nobleTransactionStoreEffect.ts

@@ -65,13 +65,15 @@ const selectNobleTxAuthorizedAccount = createAppSelector(
     }
 
     const localNobleWallet = localWalletManager.getLocalNobleWallet(localWalletNonce);
+
     const nobleAddress = convertBech32Address({
       address: parentSubaccountInfo.wallet,
       bech32Prefix: NOBLE_BECH32_PREFIX,
     });
+
     const isCorrectWallet = localNobleWallet?.address === nobleAddress;
 
-    if (!isCorrectWallet || localNobleWallet == null) return undefined;
+    if (!isCorrectWallet) return undefined;
 
     return {
       localNobleWallet,

src/components/InputOtp.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+
+import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from 'input-otp';
+import styled, { createGlobalStyle } from 'styled-components';
+
+const InputOTP = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) => {
+  return (
+    <React.Fragment>
+      <InputOtpContainerStyle />
+      <OTPInput
+        data-slot="input-otp"
+        containerClassName="input-otp-container"
+        tw="disabled:cursor-not-allowed"
+        className={className}
+        pattern={REGEXP_ONLY_DIGITS}
+        {...props}
+      />
+    </React.Fragment>
+  );
+};
+
+const InputOTPGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return (
+    <div data-slot="input-otp-group" tw="flex items-center" className={className} {...props} />
+  );
+};
+
+const InputOTPSlot = ({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return (
+    <$InputOTPSlot
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={className}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div tw="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div tw="h-0.5 w-px duration-1000" />
+        </div>
+      )}
+    </$InputOTPSlot>
+  );
+};
+
+const InputOTPSeparator = ({ ...props }: React.ComponentProps<'div'>) => {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <span>-</span>
+    </div>
+  );
+};
+
+/**
+ * This is necessary to access containerClassName.
+ * Our twin.macro tailwind classes do not work in this case so we fall back on good ole CSS.
+ */
+const InputOtpContainerStyle = createGlobalStyle`
+  .input-otp-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:has(input:disabled) {
+        opacity: 0.5;
+      }
+    }
+`;
+
+const $InputOTPSlot = styled.div`
+  position: relative;
+  display: flex;
+  height: 3rem;
+  width: 2.625rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border: var(--default-border-width) solid var(--input-otp-slot-border-color, var(--color-border));
+  outline: none;
+  transition: all 0.15s ease-in-out;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  &:first-child {
+    border-left: 1px solid var(--input-otp-slot-border-color, var(--color-border));
+    border-top-left-radius: var(--input-otp-slot-border-radius, 0.75rem);
+    border-bottom-left-radius: var(--input-otp-slot-border-radius, 0.75rem);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--input-otp-slot-border-radius, 0.75rem);
+    border-bottom-right-radius: var(--input-otp-slot-border-radius, 0.75rem);
+  }
+
+  &[data-active='true'] {
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
+    z-index: 10;
+  }
+
+  &[aria-invalid='true'] {
+    border-color: var(--color-error);
+  }
+
+  &[data-active='true'][aria-invalid='true'] {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px var(--color-error);
+  }
+`;
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

src/constants/account.ts

@@ -1,9 +1,5 @@
-import type { DydxAddress, EvmAddress } from './wallets';
-import { SolAddress } from './wallets';
-
 export enum OnboardingSteps {
   SignIn = 'SignIn',
-  ChooseWallet = 'ChooseWallet',
   KeyDerivation = 'KeyDerivation',
 }
 
@@ -48,24 +44,6 @@ export enum SpotWalletStatus {
   Connected = 'Connected',
 }
 
-export type EvmDerivedAddresses = {
-  version?: string;
-  [EvmAddress: EvmAddress]: {
-    encryptedSignature?: string;
-    dydxAddress?: DydxAddress;
-  };
-};
-
-export type SolDerivedAddresses = {
-  version?: string;
-} & Record<
-  SolAddress,
-  {
-    encryptedSignature?: string;
-    dydxAddress?: DydxAddress;
-  }
->;
-
 export type Hdkey = {
   mnemonic: string;
   privateKey: Uint8Array | null;

src/constants/localStorage.ts

@@ -5,9 +5,10 @@ export enum LocalStorageKey {
   DydxAddress = 'dydx.DydxAddress',
   OnboardingSelectedWallet = 'dydx.OnboardingSelectedWallet',
   OnboardingHasAcknowledgedTerms = 'dydx.OnboardingHasAcknowledgedTerms',
-  EvmDerivedAddresses = 'dydx.EvmDerivedAddresses', // Deprecated
   KeplrCompliance = 'dydx.KeplrCompliance',
-  SolDerivedAddresses = 'dydx.SolDerivedAddresses',
+
+  EvmDerivedAddresses = 'dydx.EvmDerivedAddresses', // Deprecated
+  SolDerivedAddresses = 'dydx.SolDerivedAddresses', // Deprecated
 
   // Gas
   SelectedGasDenom = 'dydx.SelectedGasDenom',

src/constants/wallets.ts

@@ -78,12 +78,14 @@ export enum ConnectorType {
   Privy = 'privy',
   PhantomSolana = 'phantomSolana',
   Turnkey = 'turnkey',
+  Import = 'import',
 }
 
 export enum WalletNetworkType {
   Evm = 'evm',
   Cosmos = 'cosmos',
   Solana = 'solana',
+  Dydx = 'dydx',
 }
 
 // This is the type stored in localstorage, so it must consist of only serializable fields
@@ -112,6 +114,7 @@ export type WalletInfo =
       name: CosmosWalletType;
     }
   | { connectorType: ConnectorType.Test; name: WalletType.TestWallet }
+  | { connectorType: ConnectorType.Import; name: 'Import' }
   | { connectorType: ConnectorType.DownloadWallet; name: string; downloadLink: string };
 
 type WalletConfig = {