From 0d7865b36055eb54a2a71df659d3f411c036ae4c Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Tue, 5 Mar 2024 18:24:54 -0500
Subject: [PATCH 1/2] fix: onboarding steps

---
 components/account/OnboardingModal.tsx | 30 ++++++++++++++++++--------
 lib/constants/index.ts                 |  1 +
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/account/OnboardingModal.tsx b/components/account/OnboardingModal.tsx
index 17f5b86c7..44ee1a8fe 100644
--- a/components/account/OnboardingModal.tsx
+++ b/components/account/OnboardingModal.tsx
@@ -1,9 +1,11 @@
 import { Dialog } from "@headlessui/react";
-import { range } from "lodash-es";
+import { get, range } from "lodash-es";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useWallet } from "lib/state/wallet";
 import WalletSelect from "./WalletSelect";
 import WalletIcon from "./WalletIcon";
+import { getWallets } from "@talismn/connect-wallets";
+import { SUPPORTED_WALLET_NAMES } from "lib/constants";
 
 interface StepperProps {
   start: number;
@@ -153,7 +155,7 @@ export const ButtonList: React.FC<ButtonListProps> = ({ buttonList }) => {
           key={index}
           disabled={button.disabled}
           onClick={button.onClick}
-          className={`flex h-[56px] w-full items-center justify-center rounded-lg bg-mystic text-center hover:bg-gray-100 ${
+          className={`flex min-h-[56px] w-full items-center justify-center rounded-lg bg-mystic p-2 text-center hover:bg-gray-100 ${
             button.disabled === true ? "bg-gray-light-2" : "border"
           }`}
         >
@@ -176,13 +178,13 @@ export const ResourceList: React.FC<ButtonListProps> = ({ buttonList }) => {
             key={index}
             disabled={resource.disabled}
             onClick={resource.onClick}
-            className={`col-span-3 flex h-[56px] w-full items-center justify-center rounded-lg bg-mystic text-center hover:bg-gray-100 ${
+            className={`col-span-3 flex min-h-[56px] w-full items-center justify-center rounded-lg bg-mystic p-2 text-center hover:bg-gray-100 ${
               resource.disabled === true ? "bg-gray-light-2" : "border"
             }`}
           >
-            <div className="ml-4 flex items-center gap-2 text-lg font-medium">
-              <span>{resource.title}</span>
-            </div>
+            <span className="ml-4 flex items-center gap-2 text-lg font-medium">
+              {resource.title}
+            </span>
           </button>
         ) : (
           <WalletIcon
@@ -203,13 +205,23 @@ export const DesktopOnboardingModal = (props: {
   notice?: string;
 }) => {
   const [step, setStep] = useState(props.step ?? 0);
-  const { walletId } = useWallet();
+  const { walletId, activeAccount } = useWallet();
+
+  const hasWallet =
+    typeof window !== "undefined" &&
+    getWallets().some(
+      (wallet) =>
+        wallet?.installed &&
+        SUPPORTED_WALLET_NAMES.some(
+          (walletName) => walletName === wallet.extensionName,
+        ),
+    );
 
   useEffect(() => {
-    if (walletId) {
+    if (hasWallet && activeAccount) {
       setStep(1);
     }
-  }, [walletId]);
+  }, [hasWallet, activeAccount]);
 
   const screens = [
     <TextSection
diff --git a/lib/constants/index.ts b/lib/constants/index.ts
index 3e6bfc4b5..6f8684b08 100644
--- a/lib/constants/index.ts
+++ b/lib/constants/index.ts
@@ -34,6 +34,7 @@ export const SUPPORTED_WALLET_NAMES = [
   "talisman",
   "subwallet-js",
   "polkadot-js",
+  "web3auth",
 ];
 
 export const endpoints: EndpointOption[] = [

From 940cbffe16f73b3dc0fd00f0ac0cfe2ca39825c7 Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Tue, 5 Mar 2024 23:52:32 -0500
Subject: [PATCH 2/2] fix: remove unused code

---
 components/account/OnboardingModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/account/OnboardingModal.tsx b/components/account/OnboardingModal.tsx
index 44ee1a8fe..c49367710 100644
--- a/components/account/OnboardingModal.tsx
+++ b/components/account/OnboardingModal.tsx
@@ -1,5 +1,5 @@
 import { Dialog } from "@headlessui/react";
-import { get, range } from "lodash-es";
+import { range } from "lodash-es";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useWallet } from "lib/state/wallet";
 import WalletSelect from "./WalletSelect";