Add welcome view

apps/web/src/App/App.test.tsx

@@ -0,0 +1,29 @@
+import { mockImplicitAccount } from "@umami/core";
+import { addTestAccount, makeStore } from "@umami/state";
+
+import { App } from "./App";
+import { render, screen } from "../testUtils";
+
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(map => map["lg"]),
+}));
+
+describe("<App />", () => {
+  it("renders welcome screen for a new user", () => {
+    render(<App />);
+
+    expect(screen.getByTestId("welcome-view")).toBeVisible();
+    expect(screen.queryByTestId("signed-in-layout")).not.toBeInTheDocument();
+  });
+
+  it("renders signed-in layout for an existing user", () => {
+    const store = makeStore();
+    addTestAccount(store, mockImplicitAccount(0));
+
+    render(<App />, { store });
+
+    expect(screen.getByTestId("signed-in-layout")).toBeVisible();
+    expect(screen.queryByTestId("welcome-view")).not.toBeInTheDocument();
+  });
+});

apps/web/src/App/App.tsx

@@ -0,0 +1,17 @@
+import { useCurrentAccount } from "@umami/state";
+
+import { BeaconProvider } from "../components/beacon";
+import { Layout } from "../Layout";
+import { Welcome } from "../views/Welcome";
+
+export const App = () => {
+  const currentAccount = useCurrentAccount();
+
+  return currentAccount ? (
+    <BeaconProvider>
+      <Layout />
+    </BeaconProvider>
+  ) : (
+    <Welcome />
+  );
+};

apps/web/src/App/index.ts

@@ -0,0 +1 @@
+export * from "./App";

apps/web/src/Layout.tsx

@@ -22,6 +22,7 @@ export const Layout = () => {
       }}
       height={{ lg: "100vh", base: "100dvh" }}
       padding={{ lg: "20px 46px 0", base: "54px 0 0" }}
+      data-testid="signed-in-layout"
     >
       <GridItem
         position={{ base: "fixed", lg: "static" }}

apps/web/src/assets/icons/index.ts

@@ -1,4 +1,5 @@
 export { default as AddContactIcon } from "./add-contact-s.svg";
+export { default as AlertCircleIcon } from "./alert-circle.svg";
 export { default as AlertIcon } from "./alert.svg";
 export { default as ArrowDownLeftIcon } from "./arrow-down-left.svg";
 export { default as ArrowLeftCircleIcon } from "./arrow-left-circle.svg";
@@ -15,10 +16,10 @@ export { default as CrossedCircleIcon } from "./crossed-circle.svg";
 export { default as DelegateIcon } from "./delegate-s.svg";
 export { default as DownloadIcon } from "./download.svg";
 export { default as EditIcon } from "./edit.svg";
-export { default as EyeIcon } from "./eye.svg";
-export { default as EyeOffIcon } from "./eye-off.svg";
 export { default as EnvelopeIcon } from "./envelope.svg";
 export { default as ExternalLinkIcon } from "./external-link.svg";
+export { default as EyeIcon } from "./eye.svg";
+export { default as EyeOffIcon } from "./eye-off.svg";
 export { default as FA12Icon } from "./fa12.svg";
 export { default as FA2Icon } from "./fa2.svg";
 export { default as FacebookIcon } from "./facebook.svg";
@@ -28,6 +29,7 @@ export { default as GoogleIcon } from "./google.svg";
 export { default as HourglassIcon } from "./hourglass.svg";
 export { default as IncomingArrowIcon } from "./incoming-arrow.svg";
 export { default as KeyIcon } from "./key.svg";
+export { default as LockIcon } from "./lock.svg";
 export { default as LogoDarkIcon } from "./logo-dark.svg";
 export { default as LogoLightIcon } from "./logo-light.svg";
 export { default as LogoutIcon } from "./logout.svg";
@@ -37,11 +39,13 @@ export { default as MoonIcon } from "./moon.svg";
 export { default as MultisigIcon } from "./multisig.svg";
 export { default as OutgoingArrowIcon } from "./outgoing-arrow.svg";
 export { default as PlusIcon } from "./plus.svg";
+export { default as RadioIcon } from "./radio.svg";
 export { default as RedditIcon } from "./reddit.svg";
 export { default as SearchIcon } from "./search.svg";
 export { default as SelectorIcon } from "./selector.svg";
 export { default as SettingsIcon } from "./settings.svg";
 export { default as TagIcon } from "./tag.svg";
+export { default as TezosLogoIcon } from "./tezos-logo.svg";
 export { default as ThreeDotsIcon } from "./three-dots.svg";
 export { default as TrashIcon } from "./trash.svg";
 export { default as TwitterIcon } from "./twitter.svg";
@@ -50,9 +54,6 @@ export { default as USBIcon } from "./usb.svg";
 export { default as UserPlusIcon } from "./user-plus.svg";
 export { default as VerifiedIcon } from "./verified.svg";
 export { default as WalletIcon } from "./wallet.svg";
-export { default as RadioIcon } from "./radio.svg";
-export { default as LockIcon } from "./lock.svg";
-export { default as AlertCircleIcon } from "./alert-circle.svg";
 export { TokenIcon } from "./TokenIcon";
 
 import CloseIcon from "./close.svg";

apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx

@@ -22,13 +22,13 @@ import { ThreeDotsIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountTile } from "../AccountTile";
 import { ModalCloseButton } from "../CloseButton";
-import { useOnboardingModal } from "../Onboarding/useOnboardingModal";
 
 export const AccountSelectorModal = () => {
   const accounts = useImplicitAccounts();
   const color = useColor();
   const getBalance = useGetAccountBalance();
-  const { onOpen: openOnboardingModal, modalElement } = useOnboardingModal();
+  // TODO: add ConnectOptions onboarding modal
+  const { onOpen: openOnboardingModal, modalElement } = { modalElement: null, onOpen: () => {} };
   const { onClose } = useDynamicModalContext();
 
   const dispatch = useDispatch();

apps/web/src/components/AccountTile/AccountTileIcon.tsx

@@ -28,19 +28,27 @@ export const AccountTileIcon = ({ account }: { account: ImplicitAccount }) => {
     case "social": {
       switch (account.idp) {
         case "facebook":
-          return <Icon as={FacebookIcon} width="48px" height="48px" />;
+          return <FacebookAccountIcon />;
         case "google":
-          return <Icon as={GoogleIcon} width="48px" height="48px" />;
+          return <GoogleAccountIcon />;
         case "twitter":
-          return <Icon as={TwitterIcon} width="28px" height="28px" />;
+          return <TwitterAccountIcon />;
         case "email":
           return <Icon as={EnvelopeIcon} width="28px" height="28px" color={color("600")} />;
         case "reddit":
-          return <Icon as={RedditIcon} width="28px" height="28px" />;
+          return <RedditAccountIcon />;
       }
     }
     // eslint-disable-next-line no-fallthrough
     case "secret_key":
       return <Icon as={KeyIcon} width="28px" height="28px" color={color("600")} />;
   }
 };
+
+export const FacebookAccountIcon = () => <Icon as={FacebookIcon} width="48px" height="48px" />;
+
+export const GoogleAccountIcon = () => <Icon as={GoogleIcon} width="48px" height="48px" />;
+
+export const TwitterAccountIcon = () => <Icon as={TwitterIcon} width="28px" height="28px" />;
+
+export const RedditAccountIcon = () => <Icon as={RedditIcon} width="28px" height="28px" />;

apps/web/src/components/Onboarding/useOnboardingModal.tsx → apps/web/src/components/Onboarding/OnboardingModal.tsx

@@ -11,7 +11,6 @@ import { useImplicitAccounts } from "@umami/state";
 import { ConnectOptions } from "./connectOptions/ConnectOptions";
 import { ConnectOrCreate } from "./connectOrCreate/ConnectOrCreate";
 import { DerivationPath } from "./derivationPath/DerivationPath";
-import { Eula } from "./eula/Eula";
 import { FakeAccount } from "./FakeAccount";
 import { MasterPassword } from "./masterPassword/MasterPassword";
 import { ModalBackButton } from "./ModalBackButton";
@@ -26,12 +25,10 @@ import { ShowSeedphrase } from "./showSeedphrase/ShowSeedphrase";
 import { VerifySeedphrase } from "./verifySeedphrase/VerifySeedphrase";
 
 // TODO: rebuild it for the web.
-export const useOnboardingModal = (onModalClose?: () => void) => {
+export const OnboardingModal = (onModalClose?: () => void) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const hasAccounts = useImplicitAccounts().length !== 0;
-  const history = useStepHistory<OnboardingStep>({
-    type: hasAccounts ? "connectOrCreate" : "eula",
-  });
+  const history = useStepHistory<OnboardingStep>({ type: "connectOrCreate" });
   const { currentStep, goToStep } = history;
 
   const closeModal = () => {
@@ -42,8 +39,6 @@ export const useOnboardingModal = (onModalClose?: () => void) => {
 
   const getStepPage = () => {
     switch (currentStep.type) {
-      case "eula":
-        return <Eula goToStep={goToStep} />;
       case "connectOrCreate":
         return <ConnectOrCreate closeModal={closeModal} goToStep={goToStep} />;
       case "connectOptions":

apps/web/src/components/Onboarding/OnboardingStep.tsx

@@ -1,5 +1,4 @@
 export type OnboardingStep =
-  | EulaStep
   | ConnectOrCreateStep
   | NoticeStep
   | ConnectOptionsStep
@@ -14,7 +13,6 @@ export type OnboardingStep =
   | MasterPasswordStep
   | FakeAccountStep;
 
-type EulaStep = { type: "eula" };
 type ConnectOrCreateStep = { type: "connectOrCreate" };
 type NoticeStep = { type: "notice" };
 type ConnectOptionsStep = { type: "connectOptions" };

apps/web/src/styles/theme.ts

@@ -4,7 +4,7 @@ import { type StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
 import { dark, light } from "./colors";
 
 const config = {
-  initialColorMode: "light",
+  initialColorMode: "dark",
   useSystemColorMode: false,
 };
 
@@ -93,6 +93,10 @@ const theme = extendTheme({
           fontSize: "24px",
           lineHeight: "32px",
         },
+        "3xl": {
+          fontSize: "30px",
+          lineHeight: "36px",
+        },
       },
     },
     Card: {