Merge pull request #534 from deltaDAO/development

feat: onboarding module (#533)

content/onboarding/index.json

@@ -0,0 +1,5 @@
+{
+  "subtitle": "Quick start guide",
+  "title": "First Time Visiting?",
+  "body": "Before interacting with all the portal functionalities, you'll have to ensure you have the correct setup (wallet, testnet, tokens).\n\n We can help you jump-start the process!"
+}

content/onboarding/steps/automationWalletState.json

@@ -0,0 +1,6 @@
+{
+  "title": "Automation wallet state",
+  "subtitle": "Quickly verify if your automation wallet is active and funded",
+  "body": "From the contextual menu under the automation icon on the menubar, you'll be able to enable/disable the automation.\n\nYou can quickly asses the automation wallet state by looking at the icon:\n\n- the automation is enabled if the icon has a colored background\n\n- the wallet is completely funded if the top right indicator is green, partially funded if the indicator is yellow, and insufficient funded if the indicator is red.",
+  "image": "/images/onboarding/automation_wallet_state.png"
+}

content/onboarding/steps/claimTokens.json

@@ -0,0 +1,7 @@
+{
+  "title": "Get some test tokens",
+  "subtitle": "To publish or consume the assets in the portal you'll need some GX and OCEAN test tokens to spend",
+  "body": "To request some tokens, you'll need to authorize a specific address.\n\n You can find all the necessary information by visiting the GEN-X Faucet.",
+  "image": "/images/onboarding/claim_tokens.png",
+  "buttonLabel": "Visit GEN-X Faucet"
+}

content/onboarding/steps/connectAccount.json

@@ -0,0 +1,8 @@
+{
+  "title": "Connect your account to the portal",
+  "subtitle": "Now that you created an account with MetaMask, you are ready to connect to the portal",
+  "body": "You will be asked to authorize the portal to read your public wallet address, account balance, activity and to suggest transactions to approve.\n\n To connect to the portal confirm the request inside the popup.",
+  "image": "/images/onboarding/connect_account.png",
+  "buttonLabel": "Connect account",
+  "buttonSuccess": "Your account is connected to the portal"
+}

content/onboarding/steps/downloadMetamask.json

@@ -0,0 +1,7 @@
+{
+  "title": "Setup MetaMask",
+  "subtitle": "To interact with the portal, you need to install and create an account with MetaMask",
+  "body": "Click on the button to download MetaMask from the official website.\n\n Once you've set up an account, you are ready to move to the next step.",
+  "image": "/images/onboarding/metamask_download.png",
+  "buttonLabel": "Download MetaMask"
+}

content/onboarding/steps/importAutomationWallet.json

@@ -0,0 +1,8 @@
+{
+  "title": "Activate Automation",
+  "subtitle": "Activate the assets consumption automation",
+  "body": "Click on the button to import the wallet you want to use for the automation, you will be asked to provide the encrypted json file and the password to unlock it.",
+  "image": "/images/onboarding/automation_wallet_import.png",
+  "buttonLabel": "Import Wallet Json",
+  "buttonSuccess": "Wallet Imported Successfully"
+}

content/onboarding/steps/importCustomTokens.json

@@ -0,0 +1,6 @@
+{
+  "title": "Import custom tokens",
+  "subtitle": "Before you can claim some test tokens you need to import the token's contract address to MetaMask",
+  "body": "Click on the button below to import the OCEAN and EUROe custom test tokens.",
+  "image": "/images/onboarding/import_ocean_token.png"
+}

content/onboarding/steps/ready.json

@@ -0,0 +1,5 @@
+{
+  "title": "Good job! You are ready to explore the portal, scroll down to see more.",
+  "body": "One last thing: we are never going to ask for your private key, remember to never share it with anyone!",
+  "image": "/images/onboarding/ready.png"
+}

src/@context/UserPreferences.tsx

@@ -32,6 +32,10 @@ interface UserPreferencesValue {
   setAutomationWalletJSON: (encryptedWallet: string) => void
   automationWalletMode: AUTOMATION_MODES
   setAutomationWalletMode: (mode: AUTOMATION_MODES) => void
+  showOnboardingModule: boolean
+  setShowOnboardingModule: (value: boolean) => void
+  onboardingStep: number
+  setOnboardingStep: (step: number) => void
 }
 
 const UserPreferencesContext = createContext(null)
@@ -91,6 +95,16 @@ function UserPreferencesProvider({
       localStorage?.automationWalletMode || AUTOMATION_MODES.SIMPLE
     )
 
+  const [showOnboardingModule, setShowOnboardingModule] = useState<boolean>(
+    localStorage?.showOnboardingModule === undefined
+      ? false
+      : localStorage?.showOnboardingModule
+  )
+
+  const [onboardingStep, setOnboardingStep] = useState<number>(
+    localStorage?.onboardingStep || 0
+  )
+
   // Write values to localStorage on change
   useEffect(() => {
     setLocalStorage({
@@ -102,7 +116,9 @@ function UserPreferencesProvider({
       showPPC,
       allowExternalContent,
       automationWalletJSON: automationWallet,
-      automationWalletMode
+      automationWalletMode,
+      showOnboardingModule,
+      onboardingStep
     })
   }, [
     chainIds,
@@ -113,7 +129,9 @@ function UserPreferencesProvider({
     showPPC,
     allowExternalContent,
     automationWallet,
-    automationWalletMode
+    automationWalletMode,
+    showOnboardingModule,
+    onboardingStep
   ])
 
   // Set ocean.js log levels, default: Error
@@ -182,7 +200,11 @@ function UserPreferencesProvider({
           automationWalletJSON: automationWallet,
           setAutomationWalletJSON: setAutomationWallet,
           automationWalletMode,
-          setAutomationWalletMode
+          setAutomationWalletMode,
+          showOnboardingModule,
+          setShowOnboardingModule,
+          onboardingStep,
+          setOnboardingStep
         } as UserPreferencesValue
       }
     >

src/@utils/onboarding.ts

@@ -0,0 +1,24 @@
+import { getSupportedChainIds } from '../../chains.config'
+
+interface IErrorParams {
+  accountId: string
+  web3Provider: boolean
+  networkId: number
+}
+
+const getErrorMessage = ({
+  accountId,
+  web3Provider,
+  networkId
+}: IErrorParams): string => {
+  if (!accountId || !web3Provider) {
+    return 'Looks like your account is not connected to the portal, please go back to the "Connect" step.'
+  }
+  if (!getSupportedChainIds().includes(networkId)) {
+    return 'Looks like you are not connected to a supported network, please go back to the "Network" step.'
+  }
+
+  return 'Looks like something went wrong, please try again.'
+}
+
+export { getErrorMessage }

src/components/@shared/Onboarding/Header.module.css

@@ -0,0 +1,45 @@
+.container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0;
+  background-color: var(--color-primary);
+  color: var(--brand-white);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  box-shadow: var(--box-template-box-shadow);
+}
+
+.content {
+  padding: var(--spacer);
+}
+
+.subtitle {
+  display: inline-block;
+  padding: calc(var(--spacer) / 8) calc(var(--spacer) / 4) 0;
+  background-color: var(--brand-yellow);
+  margin-bottom: 0;
+  color: var(--color-primary);
+}
+
+.title {
+  color: var(--brand-white);
+}
+
+.paragraph p {
+  margin-bottom: 0;
+  color: var(--brand-white);
+}
+
+.container svg {
+  display: none;
+}
+
+@media screen and (min-width: 40rem) {
+  .container svg {
+    width: 8rem;
+    display: inline;
+  }
+  .container svg path {
+    fill: var(--brand-white);
+  }
+}

src/components/@shared/Onboarding/Header.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react'
+import styles from './Header.module.css'
+import content from '../../../../content/onboarding/index.json'
+import Container from '../atoms/Container'
+import Markdown from '../Markdown'
+import LightBulb from '@images/lightBulb.svg'
+
+interface OnboardingHeaderData {
+  title: string
+  subtitle: string
+  body: string
+}
+
+export default function Header(): ReactElement {
+  const { title, subtitle, body }: OnboardingHeaderData = content
+
+  return (
+    <Container className={styles.container}>
+      <div className={styles.content}>
+        <h5 className={styles.subtitle}>{subtitle}</h5>
+        <h2 className={styles.title}>{title}</h2>
+        <Markdown text={body} className={styles.paragraph} />
+      </div>
+      <LightBulb />
+    </Container>
+  )
+}

src/components/@shared/Onboarding/Main.module.css

@@ -0,0 +1,17 @@
+.container {
+  position: relative;
+  height: 55rem;
+  overflow: hidden;
+}
+
+.step {
+  width: 100%;
+  top: 50%;
+  position: absolute;
+}
+
+@media screen and (min-width: 60rem) {
+  .container {
+    height: 40rem;
+  }
+}

src/components/@shared/Onboarding/Main.tsx

@@ -0,0 +1,70 @@
+import { ReactElement, useEffect } from 'react'
+import { animated, useSpringRef, useTransition } from 'react-spring'
+import styles from './Main.module.css'
+
+const translateMovements = {
+  fromTranslateLeft: 'translate3d(-100%,-50%,0)',
+  fromTranslateRight: 'translate3d(100%,-50%,0)',
+  leaveTranslateLeft: 'translate3d(50%,-50%,0)',
+  leaveTranslateRight: 'translate3d(-50%,-50%,0)',
+  startPosition: 'translate3d(0%,-50%,0)'
+}
+
+export default function Main({
+  currentStep,
+  navigationDirection,
+  steps
+}: {
+  currentStep: number
+  navigationDirection: 'prev' | 'next'
+  steps: {
+    shortLabel: string
+    component: ReactElement
+  }[]
+}): ReactElement {
+  const {
+    fromTranslateLeft,
+    fromTranslateRight,
+    leaveTranslateLeft,
+    leaveTranslateRight,
+    startPosition
+  } = translateMovements
+
+  const transRef = useSpringRef()
+  const moveAndFadeDiv = useTransition(currentStep, {
+    ref: transRef,
+    keys: null,
+    initial: { opacity: 1, transform: startPosition },
+    from: {
+      opacity: 0,
+      transform:
+        navigationDirection === 'prev' ? fromTranslateLeft : fromTranslateRight
+    },
+    enter: { opacity: 1, transform: startPosition },
+    leave: {
+      opacity: 0,
+      transform:
+        navigationDirection === 'prev'
+          ? leaveTranslateLeft
+          : leaveTranslateRight
+    },
+    config: { mass: 1, tension: 140, friction: 18 }
+  })
+  useEffect(() => {
+    transRef.start()
+  }, [currentStep])
+
+  return (
+    <div className={styles.container}>
+      {moveAndFadeDiv((style, i) => (
+        <animated.div
+          key={steps[i].shortLabel}
+          style={style}
+          className={styles.step}
+        >
+          {steps[i].component}
+        </animated.div>
+      ))}
+    </div>
+  )
+}

src/components/@shared/Onboarding/Navigation.module.css

@@ -0,0 +1,22 @@
+.navigation {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacer);
+  width: 100%;
+  padding-top: calc(var(--spacer) * 2);
+}
+
+.hidden {
+  visibility: hidden;
+  transition: none;
+}
+
+@media screen and (min-width: 35rem) {
+  .navigation {
+    flex-direction: row;
+    padding: calc(var(--spacer) * 2);
+    padding-bottom: 0;
+  }
+}