Add new assistant pop-up (#502)

Resolves #495 

Added new assistant pop-up, which is triggered when user opens the realm
modal for the first time


![image](https://github.com/tahowallet/dapp/assets/73061939/e9b6aeaa-4862-4825-9a3c-dbe527c21ae7)

src/shared/components/RealmModal/index.tsx

@@ -1,5 +1,7 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { useSpring, animated, easings } from "@react-spring/web"
+import { useAssistant, useLocalStorageChange } from "shared/hooks"
+import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
 import Modal from "shared/components/Modal"
 // import { REALMS_MAP_DATA } from "shared/constants"
 // import { useIslandContext } from "shared/hooks"
@@ -30,6 +32,17 @@ export default function RealmModal({
   //   return [prev, next]
   // }, [initialRealmId])
 
+  const { updateAssistant } = useAssistant()
+  const { value, updateStorage } = useLocalStorageChange<boolean>(
+    LOCAL_STORAGE_VISITED_REALM
+  )
+
+  useEffect(() => {
+    if (value) return
+    updateStorage(true)
+    updateAssistant({ visible: true, type: "first-realm" })
+  }, [value, updateStorage, updateAssistant])
+
   const [props] = useSpring(
     () => ({
       from: {

src/shared/constants/local-storage.ts

@@ -1,3 +1,4 @@
 export const LOCAL_STORAGE_ASSISTANT = "taho.assistant"
 export const LOCAL_STORAGE_WALLET = "onboarded_wallet"
+export const LOCAL_STORAGE_VISITED_REALM = "taho.visitedRealm"
 export const LOCAL_STORAGE_BRAVE = "taho.brave"

src/shared/hooks/assistant.ts

@@ -1,7 +1,7 @@
 import { LOCAL_STORAGE_ASSISTANT } from "shared/constants"
 import { useLocalStorageChange } from "./helpers"
 
-type AssistantType = "welcome" | "quests" | "default"
+type AssistantType = "welcome" | "quests" | "default" | "first-realm"
 
 type Assistant = {
   type: AssistantType

src/ui/Assistant/AssistantContent/AssistantFirstRealm.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { useAssistant, useLocalStorageChange } from "shared/hooks"
+import { LOCAL_STORAGE_VISITED_REALM } from "shared/constants"
+import AssistantContent from "."
+
+export default function AssistantFirstRealm() {
+  const { updateAssistant, assistantVisible } = useAssistant()
+  const { updateStorage } = useLocalStorageChange<boolean>(
+    LOCAL_STORAGE_VISITED_REALM
+  )
+
+  const closeAssistant = () => {
+    updateStorage(true)
+    updateAssistant({ visible: false, type: "default" })
+  }
+
+  return (
+    <>
+      <AssistantContent
+        isVisible={assistantVisible("first-realm")}
+        close={closeAssistant}
+      >
+        <div className="header">How to choose a realm?</div>
+        <p className="paragraph">
+          Rewards are shared based on population and Quest completion.
+        </p>
+        <p className="paragraph">
+          So choose your realm based on quests you want and can complete.
+        </p>
+        <p className="paragraph" style={{ marginBottom: 0 }}>
+          But also be mind-full, that a popular realm might yield less
+          individual rewards
+        </p>
+      </AssistantContent>
+      <style jsx>{`
+        .header {
+          font: var(--text-h1);
+          margin-bottom: 8px;
+        }
+        .paragraph {
+          color: var(--secondary-s1-80);
+          margin-bottom: 24px;
+        }
+      `}</style>
+    </>
+  )
+}

src/ui/Assistant/AssistantContent/index.tsx

@@ -54,7 +54,7 @@ export default function AssistantContent({
           width: 12px;
           position: absolute;
           bottom: -4px;
-          right: 31px;
+          right: 26px;
           border-radius: 2px;
           rotate: 45deg;
         }

src/ui/Assistant/index.tsx

@@ -6,6 +6,7 @@ import { useAssistant } from "shared/hooks"
 import AssistantWelcome from "./AssistantContent/AssistantWelcome"
 import AssistantQuests from "./AssistantContent/AssistantQuests"
 import AssistantJoin from "./AssistantContent/AssistantJoin"
+import AssistantFirstRealm from "./AssistantContent/AssistantFirstRealm"
 
 export default function Assistant() {
   const { assistant, updateAssistant } = useAssistant()
@@ -38,6 +39,7 @@ export default function Assistant() {
           <AssistantWelcome />
           <AssistantQuests />
           <AssistantJoin />
+          <AssistantFirstRealm />
         </div>
       </Portal>
       <style jsx>{`

src/ui/GlobalStyles/index.tsx

@@ -16,7 +16,7 @@ export default function GlobalStyles() {
           margin: unset;
         }
 
-        #root{
+        #root {
           position: relative;
           width: 100vw;
           height: 100vh;
@@ -150,7 +150,7 @@ export default function GlobalStyles() {
 
         html,
         body {
-          position: relative
+          position: relative;
           height: 100%;
           width: 100%;
           font-family: var(--sans);
@@ -240,7 +240,6 @@ export default function GlobalStyles() {
           border: none;
           cursor: pointer;
         }
-
       `}
     </style>
   )