added basic mobile tour

packages/app/package.json

@@ -47,7 +47,7 @@
         "@ragestudio/cordova-nfc": "^1.2.0",
         "@react-spring/web": "^9.7.2",
         "@tsmx/human-readable": "^1.0.7",
-        "antd": "^5.2.1",
+        "antd": "^5.6.4",
         "antd-mobile": "^5.31.0",
         "axios": "^1.4.0",
         "buffer": "^6.0.3",
@@ -188,4 +188,4 @@
             ]
         }
     }
-}
+}

packages/app/src/components/Layout/bottomBar/index.jsx

@@ -17,14 +17,16 @@ import "./index.less"
 
 const tourSteps = [
     {
-        title: "Open quick nav",
-        description: "Xd",
-        ref: React.createRef(),
+        title: "Quick nav",
+        description: "Tap & hold on the icon to open the navigation menu.",
+        placement: "top",
+        refName: "navBtnRef",
     },
     {
         title: "Account button",
-        description: "Xd",
-        ref: React.createRef(),
+        description: "Tap & hold on the account icon to open miscellaneous options.",
+        placement: "top",
+        refName: "accountBtnRef",
     }
 ]
 
@@ -151,10 +153,8 @@ export class BottomBar extends React.Component {
         }
     }
 
-    refs = {
-        homeBtn: React.createRef(),
-        accountBtn: React.createRef(),
-    }
+    navBtnRef = React.createRef()
+    accountBtnRef = React.createRef()
 
     componentDidMount = () => {
         this.interface = app.layout.bottom_bar = {
@@ -179,6 +179,16 @@ export class BottomBar extends React.Component {
         Object.keys(this.busEvents).forEach((key) => {
             app.eventBus.on(key, this.busEvents[key])
         })
+
+        setTimeout(() => {
+            const isTourFinished = localStorage.getItem("mobile_tour")
+
+            if (!isTourFinished) {
+                this.toggleTour(true)
+
+                localStorage.setItem("mobile_tour", true)
+            }
+        }, 500)
     }
 
     componentWillUnmount = () => {
@@ -190,6 +200,14 @@ export class BottomBar extends React.Component {
         })
     }
 
+    getTourSteps = () => {
+        return tourSteps.map((step) => {
+            step.target = () => this[step.refName].current
+
+            return step
+        })
+    }
+
     toggleVisibility = (to) => {
         if (typeof to === "undefined") {
             to = !this.state.visible
@@ -321,6 +339,13 @@ export class BottomBar extends React.Component {
         const heightValue = this.state.visible ? Number(app.cores.style.defaultVar("bottom-bar-height").replace("px", "")) : 0
 
         return <>
+            {
+                this.state.tourOpen && <antd.Tour
+                    open
+                    steps={this.getTourSteps()}
+                    onClose={() => this.setState({ tourOpen: false })}
+                />
+            }
             <QuickNavMenu
                 visible={this.state.quickNavVisible}
             />
@@ -367,6 +392,7 @@ export class BottomBar extends React.Component {
                                     key="navigator"
                                     id="navigator"
                                     className="item"
+                                    ref={this.navBtnRef}
                                     onClick={() => app.location.push("/")}
                                     onTouchMove={this.handleNavTouchMove}
                                     onTouchStart={this.handleNavTouchStart}
@@ -391,7 +417,9 @@ export class BottomBar extends React.Component {
                                     </div>
                                 </div>
 
-                                <AccountButton/>
+                                <AccountButton
+                                    ref={this.accountBtnRef}
+                                />
                             </div>
                         </div>
                     </div>

packages/app/src/theme/fixments.less

@@ -4,6 +4,10 @@
     --adm-color-background: var(--background-color-primary);
 }
 
+.ant-tour {
+    width: fit-content;
+}
+
 // Fixments
 .ant-result-extra {
     display: flex;