feat: add onboarding automation steps (#111)

* feat: add onboarding automation steps

* fix: add children to StepBody

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

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/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"
+}

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

@@ -9,12 +9,14 @@ export default function StepBody({
   body,
   image,
   actions,
-  refreshOption
+  refreshOption,
+  children
 }: {
   body: string
   image?: string
   actions?: IStepAction[]
   refreshOption?: boolean
+  children?: ReactElement
 }): ReactElement {
   return (
     <div className={styles.content}>
@@ -36,6 +38,7 @@ export default function StepBody({
             {actions?.map((action) => (
               <StepAction key={action.buttonLabel} {...action} />
             ))}
+            {children}
           </div>
         </div>
       </div>

src/components/@shared/Onboarding/Steps/AutomationWalletState.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react'
+import { OnboardingStep } from '..'
+import StepBody from '../StepBody'
+import StepHeader from '../StepHeader'
+import content from '../../../../../content/onboarding/steps/automationWalletState.json'
+
+export default function AutomationWalletState(): ReactElement {
+  const { title, subtitle, body, image }: OnboardingStep = content
+
+  return (
+    <div>
+      <StepHeader title={title} subtitle={subtitle} />
+      <StepBody body={body} image={image} />
+    </div>
+  )
+}

src/components/@shared/Onboarding/Steps/ImportWallet.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { OnboardingStep } from '..'
+import StepBody from '../StepBody'
+import StepHeader from '../StepHeader'
+import content from '../../../../../content/onboarding/steps/importAutomationWallet.json'
+import Import from '@components/Header/UserPreferences/Automation/Import'
+import { useAutomation } from '@context/Automation/AutomationProvider'
+import Decrypt from '@components/Header/UserPreferences/Automation/Decrypt'
+import Alert from '@components/@shared/atoms/Alert'
+
+export default function ImportWallet(): ReactElement {
+  const { title, subtitle, body, image }: OnboardingStep = content
+  const { autoWallet, hasValidEncryptedWallet } = useAutomation()
+  const [needsImport, setNeedsImport] = useState<boolean>(
+    !hasValidEncryptedWallet
+  )
+
+  useEffect(() => {
+    setNeedsImport(!hasValidEncryptedWallet)
+  }, [hasValidEncryptedWallet])
+
+  return (
+    <div>
+      <StepHeader title={title} subtitle={subtitle} />
+      <StepBody body={body} image={image}>
+        {autoWallet ? (
+          <Alert text={content.buttonSuccess} state="success" />
+        ) : needsImport ? (
+          <Import />
+        ) : (
+          <Decrypt />
+        )}
+      </StepBody>
+    </div>
+  )
+}

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

@@ -13,6 +13,8 @@ import { useAccount, useNetwork, useProvider } from 'wagmi'
 import { useUserPreferences } from '@context/UserPreferences'
 import useBalance from '@hooks/useBalance'
 import { GEN_X_NETWORK_ID } from 'chains.config'
+import ImportWallet from './Steps/ImportWallet'
+import AutomationWalletState from './Steps/AutomationWalletState'
 
 export interface OnboardingStep {
   title: string
@@ -27,6 +29,8 @@ const steps = [
   { shortLabel: 'MetaMask', component: <DownloadMetamask /> },
   { shortLabel: 'Connect', component: <ConnectAccount /> },
   { shortLabel: 'Tokens', component: <ImportCustomTokens /> },
+  { shortLabel: 'Import', component: <ImportWallet /> },
+  { shortLabel: 'Automation', component: <AutomationWalletState /> },
   { shortLabel: 'Ready', component: <Ready /> }
 ]