Merge pull request #318 from compolabs/feat/new-onboarding

New onboarding

Author: EchoDex

README.md

@@ -48,3 +48,4 @@ This project is licensed under the Business Source License 1.1. Please see the L
 For more information on V12 and how to get involved, please visit our [official website](https://docs.sprk.fi/).
 
 
+  

package.json

@@ -21,6 +21,7 @@
     "@compolabs/tradingview-chart": "^1.0.21",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/chakra-petch": "^5.1.1",
     "@fuels/connectors": "^0.36.1",
     "@fuels/react": "^0.36.1",
     "@intercom/messenger-js-sdk": "^0.0.14",
@@ -51,6 +52,7 @@
     "react": "^18.2.0",
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.2.0",
+    "react-joyride": "^2.9.3",
     "react-loading-skeleton": "^3.3.1",
     "react-modal-sheet": "^2.2.1",
     "react-popper-tooltip": "^4.4.2",

pnpm-lock.yaml

@@ -1,21 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 import Competitions from "src/screens/Competitions";
 import Leaderboard from "src/screens/Leaderboard";
 
+import ConnectWalletDialog from "@components/ConnectWalletDialog";
 import { Column } from "@components/Flex";
 import Header from "@components/Header";
+import { MobileAppStoreSheet } from "@components/Modal/MobileAppStoreSheet";
+import { Onboarding } from "@components/Onboarding";
 import { HeaderPoints } from "@components/Points/HeaderPoints";
+import WalletConnectors from "@components/WalletConnectors";
 
 import { useClearUrlParam } from "@hooks/useClearUrlParam";
-import { usePrivateKeyAsAuth } from "@hooks/usePrivateKeyAsAuth";
+import { useMedia } from "@hooks/useMedia";
 import { useStores } from "@stores";
 import { MODAL_TYPE } from "@stores/ModalStore";
 
 import SideManageAssets from "@screens/Assets/SideManageAssets/SideManageAssets";
-import ConnectWalletDialog from "@screens/ConnectWallet";
 import Dashboard from "@screens/Dashboard";
 import Faucet from "@screens/Faucet";
 import SpotScreen from "@screens/SpotScreen";
@@ -29,12 +32,15 @@ import { DiscordProvider } from "@src/providers/DiscordProvider";
 
 const App: React.FC = observer(() => {
   const { modalStore, tradeStore } = useStores();
+  const media = useMedia();
+
+  const [isAppStoreSheetVisible, setIsAppStoreSheetVisible] = useState(() => media.mobile);
 
   // This hooks is used to clear unnecessary URL parameters,
   // specifically "tx_id", after returning from the faucet
   useClearUrlParam("tx_id");
 
-  usePrivateKeyAsAuth();
+  // usePrivateKeyAsAuth();
 
   return (
     <IntercomProvider>
@@ -56,9 +62,10 @@ const App: React.FC = observer(() => {
                 <Route element={<Stats />} path={ROUTES.STATS} />
               </Routes>
               <SideManageAssets />
-              {/*<PWAModal />*/}
-              {/*<SplashScreen />*/}
-              <ConnectWalletDialog visible={modalStore.isOpen(MODAL_TYPE.CONNECT_MODAL)} onClose={modalStore.close} />
+              <WalletConnectors visible={modalStore.isOpen(MODAL_TYPE.SELECT_WALLET)} onClose={modalStore.close} />
+              <ConnectWalletDialog visible={modalStore.isOpen(MODAL_TYPE.CONNECT)} onClose={modalStore.close} />
+              <MobileAppStoreSheet isOpen={isAppStoreSheetVisible} onClose={() => setIsAppStoreSheetVisible(false)} />
+              <Onboarding />
             </Root>
           </UnderConstructionProvider>
         </FeatureToggleProvider>

src/App.tsx

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { TEXT_TYPES, TEXT_TYPES_MAP } from "@components/Text";
+import { TEXT_TYPES_MAP } from "@components/Text";
 import { media } from "@themes/breakpoints";
 
 export interface ButtonProps {
@@ -21,7 +21,7 @@ const Button = styled.button<ButtonProps>`
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  ${TEXT_TYPES_MAP[TEXT_TYPES.BUTTON]}
+  ${TEXT_TYPES_MAP.BUTTON}
   height: 40px;
   padding: 0 16px;
   border-radius: 32px;
@@ -173,7 +173,7 @@ export const ButtonGroup = styled.div`
       height: 32px;
     }
 
-    ${TEXT_TYPES_MAP[TEXT_TYPES.BUTTON_SECONDARY]}
+    ${TEXT_TYPES_MAP.BUTTON_SECONDARY}
     :hover {
       background: ${({ theme }) => theme.colors.borderPrimary};
     }