From 48bef7d545a517fad93be0bbaf9262ac059368f3 Mon Sep 17 00:00:00 2001
From: Sergey Kintsel <sergey.kintsel@trili.tech>
Date: Thu, 29 Aug 2024 13:23:18 +0100
Subject: [PATCH] Add additional account import feature

---
 .../masterPassword/MasterPassword.tsx         |   8 +-
 .../AccountSelectorModal.tsx                  | 116 +++++++++---------
 apps/web/src/components/AccountTile/index.ts  |   1 +
 .../components/AddressTile/AddressTile.tsx    |   2 +-
 apps/web/src/components/Menu/Menu.tsx         |  17 +--
 .../ImportWallet/ImportWallet.test.tsx        |  37 ++++++
 .../Onboarding/ImportWallet/ImportWallet.tsx  |  21 +++-
 .../Onboarding/ImportWallet/LedgerTab.tsx     |  48 ++++----
 .../Onboarding/ImportWallet/SecretKeyTab.tsx  |   1 +
 .../Onboarding/ImportWallet/SeedPhraseTab.tsx |   2 +-
 .../OnboardOptions/OnboardOptions.tsx         |  74 +++++++++++
 .../OnboardOptions/OnboardOptionsModal.tsx    |  17 +++
 .../OnboardWithEmailButton.tsx                |   4 +-
 .../OnboardWithFacebookButton.tsx             |   2 +-
 .../OnboardWithGoogleButton.tsx               |   2 +-
 .../OnboardWithRedditButton.tsx               |   2 +-
 .../OnboardWithTwitterButton.tsx              |   2 +-
 .../Onboarding/OnboardOptions/index.ts        |   2 +
 .../OnboardOptions}/useOnboardWithSocial.tsx  |   0
 .../SetupPassword/SetupPassword.tsx           |  33 +++--
 .../src/components/TabSwitch/TabSwitch.tsx    |   4 +-
 apps/web/src/styles/theme.ts                  |  12 +-
 apps/web/src/views/Welcome/Welcome.tsx        |  60 +--------
 packages/state/src/hooks/getAccountData.ts    |   2 +
 24 files changed, 290 insertions(+), 179 deletions(-)
 create mode 100644 apps/web/src/components/Onboarding/ImportWallet/ImportWallet.test.tsx
 create mode 100644 apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
 create mode 100644 apps/web/src/components/Onboarding/OnboardOptions/OnboardOptionsModal.tsx
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/OnboardWithEmailButton.tsx (85%)
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/OnboardWithFacebookButton.tsx (91%)
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/OnboardWithGoogleButton.tsx (91%)
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/OnboardWithRedditButton.tsx (91%)
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/OnboardWithTwitterButton.tsx (91%)
 create mode 100644 apps/web/src/components/Onboarding/OnboardOptions/index.ts
 rename apps/web/src/{views/Welcome => components/Onboarding/OnboardOptions}/useOnboardWithSocial.tsx (100%)

diff --git a/apps/desktop/src/components/Onboarding/masterPassword/MasterPassword.tsx b/apps/desktop/src/components/Onboarding/masterPassword/MasterPassword.tsx
index 7ece532bc7..30f3d90f99 100644
--- a/apps/desktop/src/components/Onboarding/masterPassword/MasterPassword.tsx
+++ b/apps/desktop/src/components/Onboarding/masterPassword/MasterPassword.tsx
@@ -1,6 +1,7 @@
 import { useToast } from "@chakra-ui/react";
 import {
   useAsyncActionHandler,
+  useIsPasswordSet,
   useRestoreFromMnemonic,
   useRestoreFromSecretKey,
   useValidateMasterPassword,
@@ -20,15 +21,14 @@ export const MasterPassword = ({
   const restoreFromMnemonic = useRestoreFromMnemonic();
   const restoreFromSecretKey = useRestoreFromSecretKey();
   const checkPassword = useValidateMasterPassword();
-  const passwordHasBeenSet = checkPassword !== null;
+  const passwordHasBeenSet = useIsPasswordSet();
 
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
   const toast = useToast();
   const handleSubmit = (password: string) =>
     handleAsyncAction(async () => {
-      if (passwordHasBeenSet) {
-        await checkPassword(password);
-      }
+      await checkPassword?.(password);
+
       switch (account.type) {
         case "secret_key":
           await restoreFromSecretKey(account.secretKey, password, account.label);
diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
index 4f42ee567d..178eaa5b54 100644
--- a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
+++ b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
@@ -22,16 +22,15 @@ import { ThreeDotsIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountTile } from "../AccountTile";
 import { ModalCloseButton } from "../CloseButton";
+import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 import { useCheckVerified } from "../Onboarding/useCheckUnverified";
 
 export const AccountSelectorModal = () => {
   const accounts = useImplicitAccounts();
   const color = useColor();
   const getBalance = useGetAccountBalance();
-  // TODO: add ConnectOptions onboarding modal
-  const { onOpen: openOnboardingModal, modalElement } = { modalElement: null, onOpen: () => {} };
-  const { onClose } = useDynamicModalContext();
   const isVerified = useCheckVerified();
+  const { openWith, onClose } = useDynamicModalContext();
 
   const dispatch = useDispatch();
 
@@ -41,64 +40,61 @@ export const AccountSelectorModal = () => {
     .value();
 
   return (
-    <>
-      {modalElement}
-      <ModalContent>
-        <ModalHeader>
-          <ModalCloseButton />
-        </ModalHeader>
-        <ModalBody flexDirection="column" gap="18px">
-          <VStack overflowY="auto" width="100%" maxHeight="400px" divider={<Divider />}>
-            {Object.entries(groupedAccounts).map(([type, accounts]) => (
-              <Flex key={type} flexDirection="column" width="100%">
-                <Center
-                  justifyContent="space-between"
-                  marginBottom="18px"
-                  paddingRight="20px"
-                  paddingLeft="12px"
-                >
-                  <Heading color={color("900")} size="sm">
-                    {type.split("_").map(capitalize).join(" ")}
-                  </Heading>
-                  <IconButton
-                    color={color("500")}
-                    background="transparent"
-                    aria-label="actions"
-                    icon={<ThreeDotsIcon />}
-                    size="xs"
-                    variant="ghost"
-                  />
-                </Center>
-                {accounts.map(account => {
-                  const address = account.address.pkh;
-                  const balance = getBalance(address);
-                  const onClick = () => {
-                    dispatch(accountsActions.setCurrent(address));
-                    onClose();
-                  };
+    <ModalContent>
+      <ModalHeader>
+        <ModalCloseButton />
+      </ModalHeader>
+      <ModalBody flexDirection="column" gap="18px">
+        <VStack overflowY="auto" width="100%" maxHeight="400px" divider={<Divider />}>
+          {Object.entries(groupedAccounts).map(([type, accounts]) => (
+            <Flex key={type} flexDirection="column" width="100%">
+              <Center
+                justifyContent="space-between"
+                marginBottom="18px"
+                paddingRight="20px"
+                paddingLeft="12px"
+              >
+                <Heading color={color("900")} size="sm">
+                  {type.split("_").map(capitalize).join(" ")}
+                </Heading>
+                <IconButton
+                  color={color("500")}
+                  background="transparent"
+                  aria-label="actions"
+                  icon={<ThreeDotsIcon />}
+                  size="xs"
+                  variant="ghost"
+                />
+              </Center>
+              {accounts.map(account => {
+                const address = account.address.pkh;
+                const balance = getBalance(address);
+                const onClick = () => {
+                  dispatch(accountsActions.setCurrent(address));
+                  onClose();
+                };
 
-                  return (
-                    <AccountTile key={address} account={account} onClick={onClick}>
-                      <Flex justifyContent="center" flexDirection="column" gap="2px">
-                        {isVerified && <AccountSelectorPopover account={account} />}
-                        <Text color={color("700")} size="sm">
-                          {balance ? prettyTezAmount(balance) : "\u00A0"}
-                        </Text>
-                      </Flex>
-                    </AccountTile>
-                  );
-                })}
-              </Flex>
-            ))}
-          </VStack>
+                return (
+                  <AccountTile key={address} account={account} onClick={onClick}>
+                    <Flex justifyContent="center" flexDirection="column" gap="2px">
+                      {isVerified && <AccountSelectorPopover account={account} />}
+                      <Text color={color("700")} size="sm">
+                        {balance ? prettyTezAmount(balance) : "\u00A0"}
+                      </Text>
+                    </Flex>
+                  </AccountTile>
+                );
+              })}
+            </Flex>
+          ))}
+        </VStack>
 
-          {isVerified && (
-            <Button width="full" onClick={openOnboardingModal} variant="primary">
-              Add Account
-            </Button>
-          )}
-        </ModalBody>
-      </ModalContent>
-    </>
+        {isVerified && (
+          <Button width="full" onClick={() => openWith(<OnboardOptionsModal />)} variant="primary">
+            Add Account
+          </Button>
+        )}
+      </ModalBody>
+    </ModalContent>
   );
 };
diff --git a/apps/web/src/components/AccountTile/index.ts b/apps/web/src/components/AccountTile/index.ts
index 475d078bf7..5f0f4a08d8 100644
--- a/apps/web/src/components/AccountTile/index.ts
+++ b/apps/web/src/components/AccountTile/index.ts
@@ -1 +1,2 @@
 export * from "./AccountTile";
+export * from "./AccountTileWrapper";
diff --git a/apps/web/src/components/AddressTile/AddressTile.tsx b/apps/web/src/components/AddressTile/AddressTile.tsx
index bcf7fc224a..f640bac535 100644
--- a/apps/web/src/components/AddressTile/AddressTile.tsx
+++ b/apps/web/src/components/AddressTile/AddressTile.tsx
@@ -5,7 +5,7 @@ import { type Address, prettyTezAmount } from "@umami/tezos";
 
 import { AddressTileIcon } from "./AddressTileIcon";
 import { useColor } from "../../styles/useColor";
-import { AccountTileWrapper } from "../AccountTile/AccountTileWrapper";
+import { AccountTileWrapper } from "../AccountTile";
 import { CopyAddressButton } from "../CopyAddressButton";
 
 /**
diff --git a/apps/web/src/components/Menu/Menu.tsx b/apps/web/src/components/Menu/Menu.tsx
index 167723cf22..e2934c9688 100644
--- a/apps/web/src/components/Menu/Menu.tsx
+++ b/apps/web/src/components/Menu/Menu.tsx
@@ -17,19 +17,13 @@ import {
   SettingsIcon,
   UserPlusIcon,
 } from "../../assets/icons";
+import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 import { useCheckVerified } from "../Onboarding/useCheckUnverified";
 
-// TODO: Make this work
-export const useOnboardingModal = () => ({
-  onOpen: () => {},
-  modalElement: <></>,
-});
-
 export const Menu = () => {
   const { openWith: openModal } = useDynamicModalContext();
   const { openWith: openDrawer } = useDynamicDrawerContext();
   const { colorMode, toggleColorMode } = useColorMode();
-  const { onOpen: openOnboardingModal, modalElement } = useOnboardingModal();
   const isVerified = useCheckVerified();
 
   const colorModeSwitchLabel = colorMode === "light" ? "Light mode" : "Dark mode";
@@ -44,7 +38,7 @@ export const Menu = () => {
     {
       label: "Add Account",
       icon: <UserPlusIcon />,
-      onClick: openOnboardingModal,
+      onClick: () => openModal(<OnboardOptionsModal />),
     },
     {
       label: "Save Backup",
@@ -86,10 +80,5 @@ export const Menu = () => {
     ],
   ];
 
-  return (
-    <>
-      <GenericMenu menuItems={menuItems} />
-      {modalElement}
-    </>
-  );
+  return <GenericMenu menuItems={menuItems} />;
 };
diff --git a/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.test.tsx b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.test.tsx
new file mode 100644
index 0000000000..6426b1caa4
--- /dev/null
+++ b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.test.tsx
@@ -0,0 +1,37 @@
+import { mockImplicitAccount } from "@umami/core";
+import { addTestAccount, makeStore } from "@umami/state";
+
+import { ImportWallet } from "./ImportWallet";
+import { renderInModal, screen, waitFor } from "../../../testUtils";
+
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(map => map["lg"]),
+}));
+
+describe("<ImportWallet />", () => {
+  it.each(["Seed Phrase", "Secret Key", "Ledger"])("renders %s tab", async tabName => {
+    await renderInModal(<ImportWallet />);
+
+    await waitFor(() => expect(screen.getByText(tabName)).toBeVisible());
+  });
+
+  describe("when the user has not onboarded", () => {
+    it("renders the Backup tab", async () => {
+      await renderInModal(<ImportWallet />);
+
+      await waitFor(() => expect(screen.getByText("Backup")).toBeVisible());
+    });
+  });
+
+  describe("when the user has onboarded", () => {
+    it("does not render the Backup tab", async () => {
+      const store = makeStore();
+      addTestAccount(store, mockImplicitAccount(0));
+
+      await renderInModal(<ImportWallet />, store);
+
+      expect(screen.queryByText("Backup")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
index 03784e9c78..04fe1a0acb 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/ImportWallet.tsx
@@ -9,6 +9,7 @@ import {
   TabPanels,
   Tabs,
 } from "@chakra-ui/react";
+import { useImplicitAccounts } from "@umami/state";
 
 import { ImportBackupTab } from "./ImportBackupTab";
 import { LedgerTab } from "./LedgerTab";
@@ -19,8 +20,12 @@ import { useColor } from "../../../styles/useColor";
 import { ModalCloseButton } from "../../CloseButton";
 import { TabSwitch } from "../../TabSwitch/TabSwitch";
 
+const BEFORE_ONBOARDING_OPTIONS = ["Seed Phrase", "Secret Key", "Backup", "Ledger"];
+const AFTER_ONBOARDING_OPTIONS = ["Seed Phrase", "Secret Key", "Ledger"];
+
 export const ImportWallet = () => {
   const color = useColor();
+  const hasOnboarded = useImplicitAccounts().length > 0;
 
   return (
     <ModalContent>
@@ -31,20 +36,28 @@ export const ImportWallet = () => {
           <Heading size="xl">Import Wallet</Heading>
         </Center>
       </ModalHeader>
+
       <ModalBody>
         <Tabs isLazy variant="onboarding">
-          <TabSwitch options={["Seed Phrase", "Secret Key", "Backup", "Ledger"]} />
+          <TabSwitch
+            options={hasOnboarded ? AFTER_ONBOARDING_OPTIONS : BEFORE_ONBOARDING_OPTIONS}
+          />
 
           <TabPanels padding="30px 0 0 0">
             <TabPanel>
               <SeedPhraseTab />
             </TabPanel>
+
             <TabPanel>
               <SecretKeyTab />
             </TabPanel>
-            <TabPanel>
-              <ImportBackupTab />
-            </TabPanel>
+
+            {!hasOnboarded && (
+              <TabPanel>
+                <ImportBackupTab />
+              </TabPanel>
+            )}
+
             <TabPanel>
               <LedgerTab />
             </TabPanel>
diff --git a/apps/web/src/components/Onboarding/ImportWallet/LedgerTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/LedgerTab.tsx
index d25919539b..4e75e73325 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/LedgerTab.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/LedgerTab.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Heading, Link, ListItem, OrderedList } from "@chakra-ui/react";
+import { Button, Flex, Heading, Link, ListItem, OrderedList, Text } from "@chakra-ui/react";
 import { type Curves } from "@taquito/signer";
 import { useDynamicModalContext, useMultiForm } from "@umami/components";
 import {
@@ -76,32 +76,38 @@ export const LedgerTab = () => {
               <Heading color={color("black")} size="lg">
                 3
               </Heading>
-              Ensure your ledger has the{" "}
-              <Link
-                textDecoration="underline"
-                _hover={{ color: color("600") }}
-                href="https://support.ledger.com/article/360002731113-zd"
-                isExternal
-              >
-                latest firmware
-              </Link>{" "}
-              version
+
+              <Text>
+                Ensure your ledger has the{" "}
+                <Link
+                  textDecoration="underline"
+                  _hover={{ color: color("600") }}
+                  href="https://support.ledger.com/article/360002731113-zd"
+                  isExternal
+                >
+                  latest firmware
+                </Link>{" "}
+                version
+              </Text>
             </ListItem>
 
             <ListItem>
               <Heading color={color("black")} size="lg">
                 4
               </Heading>
-              Install & open the{" "}
-              <Link
-                textDecoration="underline"
-                _hover={{ color: color("600") }}
-                href="https://support.ledger.com/article/360016057774-zd"
-                isExternal
-              >
-                Tezos Wallet
-              </Link>{" "}
-              app on your ledger
+
+              <Text>
+                Install & open the{" "}
+                <Link
+                  textDecoration="underline"
+                  _hover={{ color: color("600") }}
+                  href="https://support.ledger.com/article/360016057774-zd"
+                  isExternal
+                >
+                  Tezos Wallet
+                </Link>{" "}
+                app on your ledger
+              </Text>
             </ListItem>
 
             <ListItem>
diff --git a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
index 54dc0d36ff..f8fa7e2347 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/SecretKeyTab.tsx
@@ -42,6 +42,7 @@ export const SecretKeyTab = () => {
             <FormLabel>Secret Key</FormLabel>
             <Textarea
               minHeight="120px"
+              fontSize="18px"
               {...register("secretKey", {
                 required: "Secret Key is required",
                 onChange: event => setIsEncrypted(isEncryptedSecretKeyPrefix(event.target.value)),
diff --git a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx b/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx
index 519614960a..690dff38c0 100644
--- a/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx
+++ b/apps/web/src/components/Onboarding/ImportWallet/SeedPhraseTab.tsx
@@ -120,7 +120,7 @@ export const SeedPhraseTab = () => {
                   zIndex={1}
                   marginTop={{ lg: "10px", base: "8px" }}
                   marginLeft={{ lg: "16px", base: "10px" }}
-                  color={color("white", "black")}
+                  color={color("black")}
                   textAlign="right"
                   size={{ lg: "lg", base: "xs" }}
                 >
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
new file mode 100644
index 0000000000..7a81c2a67d
--- /dev/null
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx
@@ -0,0 +1,74 @@
+import { Button, Center, Divider, Flex, Heading, Text } from "@chakra-ui/react";
+import { useDynamicModalContext } from "@umami/components";
+import { type PropsWithChildren } from "react";
+
+import { OnboardWithFacebookButton } from "./OnboardWithFacebookButton";
+import { OnboardWithGoogleButton } from "./OnboardWithGoogleButton";
+import { OnboardWithRedditButton } from "./OnboardWithRedditButton";
+import { OnboardWithTwitterButton } from "./OnboardWithTwitterButton";
+import { useColor } from "../../../styles/useColor";
+import { AccountTileWrapper } from "../../AccountTile";
+import { ImportWallet } from "../ImportWallet";
+
+export const OnboardOptions = ({ children }: PropsWithChildren) => {
+  const color = useColor();
+
+  const { openWith } = useDynamicModalContext();
+
+  return (
+    <Flex alignItems="center" flexDirection="column">
+      <Heading color={color("900")} size="lg">
+        Continue with:
+      </Heading>
+
+      <Center flexDirection="column" gap="36px" width="full" height="full">
+        <Flex gap={{ base: "24px", lg: "30px" }} marginTop="30px" color={color("white", "black")}>
+          <AccountTileWrapper>
+            <OnboardWithGoogleButton />
+          </AccountTileWrapper>
+
+          <AccountTileWrapper>
+            <OnboardWithFacebookButton />
+          </AccountTileWrapper>
+
+          <AccountTileWrapper>
+            <OnboardWithTwitterButton />
+          </AccountTileWrapper>
+
+          <AccountTileWrapper>
+            <OnboardWithRedditButton />
+          </AccountTileWrapper>
+        </Flex>
+
+        <Center gap="4px" width="full">
+          <Divider width="full" />
+          <Text color={color("500")} size="lg">
+            or
+          </Text>
+          <Divider width="full" />
+        </Center>
+
+        <Flex flexDirection="column" gap="12px" width="full">
+          <Button width="full" size="lg" variant="primary">
+            Create a new wallet
+          </Button>
+          <Button
+            width="full"
+            onClick={() =>
+              openWith(<ImportWallet />, {
+                size: "xl",
+                variant: "onboarding",
+              })
+            }
+            size="lg"
+            variant="secondary"
+          >
+            I already have a wallet
+          </Button>
+        </Flex>
+
+        {children}
+      </Center>
+    </Flex>
+  );
+};
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptionsModal.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptionsModal.tsx
new file mode 100644
index 0000000000..eebe2f6c76
--- /dev/null
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardOptionsModal.tsx
@@ -0,0 +1,17 @@
+import { ModalBody, ModalContent, ModalHeader } from "@chakra-ui/react";
+
+import { OnboardOptions } from "./OnboardOptions";
+import { ModalBackButton } from "../../BackButton";
+import { ModalCloseButton } from "../../CloseButton";
+
+export const OnboardOptionsModal = () => (
+  <ModalContent>
+    <ModalHeader margin="0">
+      <ModalBackButton />
+      <ModalCloseButton />
+    </ModalHeader>
+    <ModalBody>
+      <OnboardOptions />
+    </ModalBody>
+  </ModalContent>
+);
diff --git a/apps/web/src/views/Welcome/OnboardWithEmailButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithEmailButton.tsx
similarity index 85%
rename from apps/web/src/views/Welcome/OnboardWithEmailButton.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/OnboardWithEmailButton.tsx
index de228da717..f7daf4946c 100644
--- a/apps/web/src/views/Welcome/OnboardWithEmailButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithEmailButton.tsx
@@ -1,8 +1,8 @@
 import { IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
-import { EnvelopeIcon } from "../../assets/icons";
-import { useColor } from "../../styles/useColor";
+import { EnvelopeIcon } from "../../../assets/icons";
+import { useColor } from "../../../styles/useColor";
 
 // eslint-disable-next-line import/no-unused-modules
 export const OnboardWithEmailButton = ({ onAuth }: { onAuth: () => void }) => {
diff --git a/apps/web/src/views/Welcome/OnboardWithFacebookButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
similarity index 91%
rename from apps/web/src/views/Welcome/OnboardWithFacebookButton.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
index 3004534baa..7a137bfccd 100644
--- a/apps/web/src/views/Welcome/OnboardWithFacebookButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithFacebookButton.tsx
@@ -1,7 +1,7 @@
 import { type ButtonProps, IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
-import { FacebookIcon } from "../../assets/icons";
+import { FacebookIcon } from "../../../assets/icons";
 
 export const OnboardWithFacebookButton = ({
   onAuth,
diff --git a/apps/web/src/views/Welcome/OnboardWithGoogleButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
similarity index 91%
rename from apps/web/src/views/Welcome/OnboardWithGoogleButton.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
index dc4d10ddc4..83ac5249d1 100644
--- a/apps/web/src/views/Welcome/OnboardWithGoogleButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithGoogleButton.tsx
@@ -1,7 +1,7 @@
 import { type ButtonProps, IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
-import { GoogleIcon } from "../../assets/icons";
+import { GoogleIcon } from "../../../assets/icons";
 
 export const OnboardWithGoogleButton = ({
   onAuth,
diff --git a/apps/web/src/views/Welcome/OnboardWithRedditButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
similarity index 91%
rename from apps/web/src/views/Welcome/OnboardWithRedditButton.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
index 7b98565b9b..ef982d17bc 100644
--- a/apps/web/src/views/Welcome/OnboardWithRedditButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithRedditButton.tsx
@@ -1,7 +1,7 @@
 import { type ButtonProps, IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
-import { RedditIcon } from "../../assets/icons";
+import { RedditIcon } from "../../../assets/icons";
 
 export const OnboardWithRedditButton = ({
   onAuth,
diff --git a/apps/web/src/views/Welcome/OnboardWithTwitterButton.tsx b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
similarity index 91%
rename from apps/web/src/views/Welcome/OnboardWithTwitterButton.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
index 492f32a40a..d2c16f97bd 100644
--- a/apps/web/src/views/Welcome/OnboardWithTwitterButton.tsx
+++ b/apps/web/src/components/Onboarding/OnboardOptions/OnboardWithTwitterButton.tsx
@@ -1,7 +1,7 @@
 import { type ButtonProps, IconButton } from "@chakra-ui/react";
 
 import { useOnboardWithSocial } from "./useOnboardWithSocial";
-import { TwitterIcon } from "../../assets/icons";
+import { TwitterIcon } from "../../../assets/icons";
 
 export const OnboardWithTwitterButton = ({
   onAuth,
diff --git a/apps/web/src/components/Onboarding/OnboardOptions/index.ts b/apps/web/src/components/Onboarding/OnboardOptions/index.ts
new file mode 100644
index 0000000000..187875d187
--- /dev/null
+++ b/apps/web/src/components/Onboarding/OnboardOptions/index.ts
@@ -0,0 +1,2 @@
+export * from "./OnboardOptions";
+export * from "./OnboardOptionsModal";
diff --git a/apps/web/src/views/Welcome/useOnboardWithSocial.tsx b/apps/web/src/components/Onboarding/OnboardOptions/useOnboardWithSocial.tsx
similarity index 100%
rename from apps/web/src/views/Welcome/useOnboardWithSocial.tsx
rename to apps/web/src/components/Onboarding/OnboardOptions/useOnboardWithSocial.tsx
diff --git a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
index fb5c4eba88..ce51cc393b 100644
--- a/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
+++ b/apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx
@@ -14,8 +14,11 @@ import { useDynamicModalContext, useMultiForm } from "@umami/components";
 import { DEFAULT_ACCOUNT_LABEL } from "@umami/core";
 import {
   useAsyncActionHandler,
+  useGetNextAvailableAccountLabels,
+  useIsPasswordSet,
   useRestoreFromMnemonic,
   useRestoreFromSecretKey,
+  useValidateMasterPassword,
 } from "@umami/state";
 import { decryptSecretKey, defaultDerivationPathTemplate } from "@umami/tezos";
 import { FormProvider } from "react-hook-form";
@@ -39,6 +42,10 @@ export const SetupPassword = ({ mode }: { mode: "mnemonic" | "secret_key" }) =>
   const { allFormValues, onClose } = useDynamicModalContext();
   const restoreFromMnemonic = useRestoreFromMnemonic();
   const restoreFromSecretKey = useRestoreFromSecretKey();
+  const checkPassword = useValidateMasterPassword();
+  const getNextAvailableAccountLabels = useGetNextAvailableAccountLabels();
+  const isPasswordSet = useIsPasswordSet();
+
   const form = useMultiForm<FormFields>({
     mode: "onBlur",
     defaultValues: {
@@ -54,6 +61,10 @@ export const SetupPassword = ({ mode }: { mode: "mnemonic" | "secret_key" }) =>
 
   const onSubmit = ({ password, curve, derivationPath }: FormFields) =>
     handleAsyncAction(async () => {
+      const label = getNextAvailableAccountLabels(DEFAULT_ACCOUNT_LABEL)[0];
+
+      await checkPassword?.(password);
+
       switch (mode) {
         case "mnemonic": {
           const mnemonic = allFormValues.mnemonic.map(({ val }: { val: string }) => val).join(" ");
@@ -62,7 +73,7 @@ export const SetupPassword = ({ mode }: { mode: "mnemonic" | "secret_key" }) =>
             mnemonic,
             password,
             derivationPathTemplate: derivationPath,
-            label: DEFAULT_ACCOUNT_LABEL,
+            label,
             curve,
           });
           break;
@@ -72,9 +83,10 @@ export const SetupPassword = ({ mode }: { mode: "mnemonic" | "secret_key" }) =>
             allFormValues.secretKey,
             allFormValues.secretKeyPassword
           );
-          await restoreFromSecretKey(secretKey, password, DEFAULT_ACCOUNT_LABEL);
+          await restoreFromSecretKey(secretKey, password, label);
         }
       }
+
       return onClose();
     });
 
@@ -92,15 +104,20 @@ export const SetupPassword = ({ mode }: { mode: "mnemonic" | "secret_key" }) =>
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <Flex flexDirection="column" gap="24px">
-              <PasswordInput inputName="password" label="Set Password" />
-
               <PasswordInput
-                inputName="passwordConfirmation"
-                label="Confirm Password"
-                required="Password confirmation is required"
-                validate={value => value === getValues("password") || "Passwords do not match"}
+                inputName="password"
+                label={isPasswordSet ? "Password" : "Set Password"}
               />
 
+              {!isPasswordSet && (
+                <PasswordInput
+                  inputName="passwordConfirmation"
+                  label="Confirm Password"
+                  required="Password confirmation is required"
+                  validate={value => value === getValues("password") || "Passwords do not match"}
+                />
+              )}
+
               {mode === "mnemonic" && <AdvancedAccountSettings />}
 
               <Button
diff --git a/apps/web/src/components/TabSwitch/TabSwitch.tsx b/apps/web/src/components/TabSwitch/TabSwitch.tsx
index 431603e90e..04467c865d 100644
--- a/apps/web/src/components/TabSwitch/TabSwitch.tsx
+++ b/apps/web/src/components/TabSwitch/TabSwitch.tsx
@@ -99,7 +99,9 @@ export const TabSwitch = ({ options }: { options: string[] }) => {
       data-testid="tab-switch-tabs"
     >
       {options.map(option => (
-        <Tab key={option}>{option}</Tab>
+        <Tab key={option} width="full" paddingX="5px">
+          {option}
+        </Tab>
       ))}
     </TabList>
   );
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index f293ed590a..7ff965dea8 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -149,7 +149,7 @@ const theme = extendTheme({
             _placeholder: {
               color: "gray.400",
             },
-            color: light.grey.white,
+            color: "black",
           },
         },
         filled: {
@@ -447,9 +447,15 @@ const theme = extendTheme({
           },
         },
         socialLogin: {
-          backgroundColor: "black",
+          backgroundColor: "white",
+          _dark: {
+            backgroundColor: "black",
+          },
           _hover: {
-            backgroundColor: "gray.700",
+            backgroundColor: "gray.300",
+            _dark: {
+              backgroundColor: "gray.700",
+            },
           },
         },
         empty: {
diff --git a/apps/web/src/views/Welcome/Welcome.tsx b/apps/web/src/views/Welcome/Welcome.tsx
index 90fd62949e..5661f488e3 100644
--- a/apps/web/src/views/Welcome/Welcome.tsx
+++ b/apps/web/src/views/Welcome/Welcome.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Center,
   Divider,
   Flex,
@@ -15,21 +14,15 @@ import {
   useBreakpointValue,
 } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { useState } from "react";
 
-import { OnboardWithFacebookButton } from "./OnboardWithFacebookButton";
-import { OnboardWithGoogleButton } from "./OnboardWithGoogleButton";
-import { OnboardWithRedditButton } from "./OnboardWithRedditButton";
-import { OnboardWithTwitterButton } from "./OnboardWithTwitterButton";
 import { LogoLightIcon, TezosLogoIcon } from "../../assets/icons";
-import { ImportWallet } from "../../components/Onboarding/ImportWallet";
+import { OnboardOptions } from "../../components/Onboarding/OnboardOptions";
 import { useColor } from "../../styles/useColor";
 
 export const Welcome = () => {
-  const [isOnboarding, setIsOnboarding] = useState(false);
   const color = useColor();
   const isMobile = useBreakpointValue({ base: true, lg: false });
-  const { openWith } = useDynamicModalContext();
+  const { isOpen: isOnboarding } = useDynamicModalContext();
 
   return (
     <Grid
@@ -82,58 +75,13 @@ export const Welcome = () => {
           borderBottomRadius={{ base: 0, lg: "30px" }}
           backgroundColor={color("white")}
         >
-          <Heading color={color("900")} size="lg">
-            Continue with:
-          </Heading>
-
-          <Center flexDirection="column" gap="36px" width="full" height="full">
-            <Flex
-              gap={{ base: "24px", lg: "30px" }}
-              marginTop="30px"
-              color={color("white", "black")}
-            >
-              <OnboardWithGoogleButton />
-              <OnboardWithFacebookButton />
-              <OnboardWithTwitterButton />
-              <OnboardWithRedditButton />
-            </Flex>
-
-            <Center gap="4px" width="full">
-              <Divider width="full" />
-              <Text color={color("500")} size="lg">
-                or
-              </Text>
-              <Divider width="full" />
-            </Center>
-
-            <Flex flexDirection="column" gap="12px" width="full">
-              <Button width="full" size="lg" variant="primary">
-                Create a new wallet
-              </Button>
-              <Button
-                width="full"
-                onClick={() => {
-                  setIsOnboarding(true);
-                  return openWith(<ImportWallet />, {
-                    size: "xl",
-                    variant: "onboarding",
-                    onClose: () => setIsOnboarding(false),
-                  });
-                }}
-                size="lg"
-                variant="secondary"
-              >
-                I already have a wallet
-              </Button>
-            </Flex>
-
+          <OnboardOptions>
             <Text color={color("700")} size="sm">
               By proceeding, you agree to Umami's{" "}
               <Link fontWeight="600" href="https://umamiwallet.com/tos.html" isExternal>
                 Terms of Use
               </Link>
             </Text>
-
             {isMobile && (
               <>
                 <Flex gap="10px">
@@ -152,7 +100,7 @@ export const Welcome = () => {
                 <Logo />
               </>
             )}
-          </Center>
+          </OnboardOptions>
         </Flex>
       </Flex>
       {!isMobile && (
diff --git a/packages/state/src/hooks/getAccountData.ts b/packages/state/src/hooks/getAccountData.ts
index eb16ba8bf7..c7f2f083bc 100644
--- a/packages/state/src/hooks/getAccountData.ts
+++ b/packages/state/src/hooks/getAccountData.ts
@@ -106,6 +106,8 @@ export const useValidateMasterPassword = () => {
   };
 };
 
+export const useIsPasswordSet = () => !!useValidateMasterPassword();
+
 export const useIsOwnedAddress = () => {
   const ownedAccounts = useAllAccounts();
   const addressesSet = new Set(ownedAccounts.map(acc => acc.address.pkh));