From b3c635b7aceee11162f4fb3114f85f8a4fe9d3fd Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 21:51:36 -0600 Subject: [PATCH 01/16] feat: add react-joyride dependency to package.json and package-lock.json --- package-lock.json | 132 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 1 + 2 files changed, 131 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 33c4815..499d9e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "react-day-picker": "^9.4.4", "react-dom": "^18", "react-hook-form": "^7.53.0", + "react-joyride": "^2.9.3", "react-loader-spinner": "^6.1.6", "react-qr-code": "^2.0.15", "react-syntax-highlighter": "^15.6.1", @@ -1447,6 +1448,11 @@ "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", "license": "MIT" }, + "node_modules/@gilbarbara/deep-equal": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz", + "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==" + }, "node_modules/@grpc/grpc-js": { "version": "1.9.15", "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz", @@ -4594,14 +4600,12 @@ "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.18", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", - "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -6640,6 +6644,11 @@ "node": ">=0.10" } }, + "node_modules/deep-diff": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz", + "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -6647,6 +6656,14 @@ "dev": true, "license": "MIT" }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", @@ -8842,6 +8859,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-lite": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz", + "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw==" + }, "node_modules/is-map": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz", @@ -10133,6 +10155,16 @@ "node": ">=10.13.0" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -10684,6 +10716,41 @@ "react": "^18.3.1" } }, + "node_modules/react-floater": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz", + "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==", + "dependencies": { + "deepmerge": "^4.3.1", + "is-lite": "^0.8.2", + "popper.js": "^1.16.0", + "prop-types": "^15.8.1", + "tree-changes": "^0.9.1" + }, + "peerDependencies": { + "react": "15 - 18", + "react-dom": "15 - 18" + } + }, + "node_modules/react-floater/node_modules/@gilbarbara/deep-equal": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz", + "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==" + }, + "node_modules/react-floater/node_modules/is-lite": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz", + "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==" + }, + "node_modules/react-floater/node_modules/tree-changes": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz", + "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==", + "dependencies": { + "@gilbarbara/deep-equal": "^0.1.1", + "is-lite": "^0.8.2" + } + }, "node_modules/react-hook-form": { "version": "7.54.2", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz", @@ -10700,12 +10767,54 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-innertext": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz", + "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==", + "peerDependencies": { + "@types/react": ">=0.0.0 <=99", + "react": ">=0.0.0 <=99" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-joyride": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz", + "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==", + "dependencies": { + "@gilbarbara/deep-equal": "^0.3.1", + "deep-diff": "^1.0.2", + "deepmerge": "^4.3.1", + "is-lite": "^1.2.1", + "react-floater": "^0.7.9", + "react-innertext": "^1.1.5", + "react-is": "^16.13.1", + "scroll": "^3.0.1", + "scrollparent": "^2.1.0", + "tree-changes": "^0.11.2", + "type-fest": "^4.27.0" + }, + "peerDependencies": { + "react": "15 - 18", + "react-dom": "15 - 18" + } + }, + "node_modules/react-joyride/node_modules/type-fest": { + "version": "4.35.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.35.0.tgz", + "integrity": "sha512-2/AwEFQDFEy30iOLjrvHDIH7e4HEWH+f1Yl1bI5XMqzuoCUqwYCdxachgsgv0og/JdVZUhbfjcJAoHj5L1753A==", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/react-loader-spinner": { "version": "6.1.6", "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz", @@ -11378,6 +11487,16 @@ "loose-envify": "^1.1.0" } }, + "node_modules/scroll": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz", + "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==" + }, + "node_modules/scrollparent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz", + "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==" + }, "node_modules/semver": { "version": "7.6.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", @@ -12252,6 +12371,15 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "license": "MIT" }, + "node_modules/tree-changes": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz", + "integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==", + "dependencies": { + "@gilbarbara/deep-equal": "^0.3.1", + "is-lite": "^1.2.1" + } + }, "node_modules/ts-api-utils": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz", diff --git a/package.json b/package.json index 40091dc..ea293a7 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-day-picker": "^9.4.4", "react-dom": "^18", "react-hook-form": "^7.53.0", + "react-joyride": "^2.9.3", "react-loader-spinner": "^6.1.6", "react-qr-code": "^2.0.15", "react-syntax-highlighter": "^15.6.1", From 728d5228a51c37bc8b792c664c375168112fe823 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:31 -0600 Subject: [PATCH 02/16] feat: add tutorial slice and global UI store interface --- src/core/store/ui/@types/tutorial.entity.ts | 4 ++++ src/core/store/ui/index.ts | 6 +++++- src/core/store/ui/slices/tutorial.slice.ts | 19 +++++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/core/store/ui/@types/tutorial.entity.ts create mode 100644 src/core/store/ui/slices/tutorial.slice.ts diff --git a/src/core/store/ui/@types/tutorial.entity.ts b/src/core/store/ui/@types/tutorial.entity.ts new file mode 100644 index 0000000..d15b2b8 --- /dev/null +++ b/src/core/store/ui/@types/tutorial.entity.ts @@ -0,0 +1,4 @@ +export interface TutorialGlobalUIStore { + run: boolean; + setRun: (run: boolean) => void; +} diff --git a/src/core/store/ui/index.ts b/src/core/store/ui/index.ts index 403791e..050ec26 100644 --- a/src/core/store/ui/index.ts +++ b/src/core/store/ui/index.ts @@ -11,10 +11,13 @@ import { LoaderGlobalUIStore } from "./@types/loader.entity"; import { useLoaderSlice } from "./slices/loader.slice"; import { StepsGlobalUIStore } from "./@types/steps.entity"; import { useStepsSlice } from "./slices/steps.slice"; +import { useTutorialSlice } from "./slices/tutorial.slice"; +import { TutorialGlobalUIStore } from "./@types/tutorial.entity"; type GlobalUIState = ThemeGlobalUIStore & LoaderGlobalUIStore & - StepsGlobalUIStore; + StepsGlobalUIStore & + TutorialGlobalUIStore; const devtoolsOptions: DevtoolsOptions = { name: "Global UI State", @@ -51,6 +54,7 @@ export const useGlobalUIBoundedStore = create()( ...useThemeSlice(...a), ...useLoaderSlice(...a), ...useStepsSlice(...a), + ...useTutorialSlice(...a), }), devtoolsOptions, ), diff --git a/src/core/store/ui/slices/tutorial.slice.ts b/src/core/store/ui/slices/tutorial.slice.ts new file mode 100644 index 0000000..c77a5f3 --- /dev/null +++ b/src/core/store/ui/slices/tutorial.slice.ts @@ -0,0 +1,19 @@ +import { StateCreator } from "zustand"; +import { TutorialGlobalUIStore } from "../@types/tutorial.entity"; + +export const useTutorialSlice: StateCreator< + TutorialGlobalUIStore, + [["zustand/devtools", never]], + [], + TutorialGlobalUIStore +> = (set) => { + return { + // Stores + run: false, + + // Modifiers + setRun: (run: boolean) => { + set({ run }); + }, + }; +}; From 8584e741b0fb21d99f3523d26cddb399bdb926c8 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:40 -0600 Subject: [PATCH 03/16] feat: add optional id prop to CreateButton component --- src/components/utils/ui/Create.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/utils/ui/Create.tsx b/src/components/utils/ui/Create.tsx index 03a16b4..40be606 100644 --- a/src/components/utils/ui/Create.tsx +++ b/src/components/utils/ui/Create.tsx @@ -5,11 +5,12 @@ interface CreateButtonProps { label: string; url: string; className?: string; + id?: string; } -const CreateButton = ({ label, url, className }: CreateButtonProps) => { +const CreateButton = ({ label, url, className, id }: CreateButtonProps) => { return ( - + ); From bee198ba424beb7a7f8735d48b368f3ebb081ce9 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:45 -0600 Subject: [PATCH 04/16] feat: add onboarding steps for Trustless Work tutorial --- src/constants/steps/steps.tsx | 38 +++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/constants/steps/steps.tsx diff --git a/src/constants/steps/steps.tsx b/src/constants/steps/steps.tsx new file mode 100644 index 0000000..bb819f5 --- /dev/null +++ b/src/constants/steps/steps.tsx @@ -0,0 +1,38 @@ +import { Placement } from "react-joyride"; + +export const steps = [ + { + title: Welcome to Trustless Work!, + content:

Here you can understand how to use our API!

, + placement: "center" as Placement, + target: "body", + }, + { + title: Roles in Trustless Work, + content:

Here you'll find all the roles in each Escrow.

, + placement: "auto" as Placement, + target: "#step-1", + }, + { + title: Initialize an Escrow, + content: ( +

+ Start by setting up a new escrow agreement. This includes specifying the + terms, amounts, and parties involved. +

+ ), + placement: "auto" as Placement, + target: "#step-2", + }, + { + title: Your Escrows, + content: ( +

+ Here you can see all the escrows you've created or are involved in + depending on your role. +

+ ), + placement: "auto" as Placement, + target: "#step-3", + }, +]; From cfddbfe837b47eaa58f098e201dc22b929ca981f Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:50 -0600 Subject: [PATCH 05/16] feat: add custom hook for managing Joyride tour state and callbacks --- src/hooks/joyride.hook.ts | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/hooks/joyride.hook.ts diff --git a/src/hooks/joyride.hook.ts b/src/hooks/joyride.hook.ts new file mode 100644 index 0000000..8c259b6 --- /dev/null +++ b/src/hooks/joyride.hook.ts @@ -0,0 +1,34 @@ +import { steps } from "@/constants/steps/steps"; +import { useGlobalUIBoundedStore } from "@/core/store/ui"; +import { useState } from "react"; +import { CallBackProps, STATUS } from "react-joyride"; + +export const useJoyride = () => { + const run = useGlobalUIBoundedStore((state) => state.run); + const setRun = useGlobalUIBoundedStore((state) => state.setRun); + const [stepIndex, setStepIndex] = useState(0); + + const handleJoyrideCallback = (data: CallBackProps) => { + const { action, index, status, type } = data; + + if (status === STATUS.FINISHED || status === STATUS.SKIPPED) { + setRun(false); + setStepIndex(0); + } else if (action === "next" && index < steps.length - 1) { + setStepIndex(index + 1); + } else if (action === "prev" && index > 0) { + setStepIndex(index - 1); + } else if (type === "tour:end") { + setRun(false); + setStepIndex(0); + } + }; + + return { + handleJoyrideCallback, + run, + setRun, + stepIndex, + setStepIndex, + }; +}; From 7d4acc5ea898e602e860a79008b8a41d608bb054 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:54 -0600 Subject: [PATCH 06/16] feat: implement JoyrideTutorial component for guided tours --- src/components/utils/ui/Joyride.tsx | 45 +++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/components/utils/ui/Joyride.tsx diff --git a/src/components/utils/ui/Joyride.tsx b/src/components/utils/ui/Joyride.tsx new file mode 100644 index 0000000..52a2162 --- /dev/null +++ b/src/components/utils/ui/Joyride.tsx @@ -0,0 +1,45 @@ +import Joyride from "react-joyride"; +import { steps } from "@/constants/steps/steps"; +import { useGlobalUIBoundedStore } from "@/core/store/ui"; +import { useJoyride } from "@/hooks/joyride.hook"; + +const JoyrideTutorial = () => { + const theme = useGlobalUIBoundedStore((state) => state.theme); + + const { run, stepIndex, handleJoyrideCallback } = useJoyride(); + console.log(stepIndex); + return ( + + ); +}; + +export default JoyrideTutorial; From fb778f49460e9d1b7cd25e43603f5459ace5cc0b Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:31:59 -0600 Subject: [PATCH 07/16] feat: integrate JoyrideTutorial component into MyEscrows page for guided user experience --- .../modules/escrow/ui/pages/MyEscrows.tsx | 289 +++++++++--------- 1 file changed, 150 insertions(+), 139 deletions(-) diff --git a/src/components/modules/escrow/ui/pages/MyEscrows.tsx b/src/components/modules/escrow/ui/pages/MyEscrows.tsx index 537271b..4aaba35 100644 --- a/src/components/modules/escrow/ui/pages/MyEscrows.tsx +++ b/src/components/modules/escrow/ui/pages/MyEscrows.tsx @@ -14,6 +14,7 @@ import MyEscrowsTable from "@/components/modules/escrow/ui/tables/MyEscrowsTable import MyEscrowsCards from "@/components/modules/escrow/ui/cards/MyEscrowsCards"; import MyEscrowsFilter from "@/components/modules/escrow/ui/filters/MyEscrowsFilter"; import { useGlobalUIBoundedStore } from "@/core/store/ui"; +import JoyrideTutorial from "@/components/utils/ui/Joyride"; const MyEscrows = () => { const isLoading = useGlobalUIBoundedStore((state) => state.isLoading); @@ -26,166 +27,176 @@ const MyEscrows = () => { {isLoading ? ( ) : ( -
- -
- - setActiveTab("issuer")} - value="issuer" - > - Initiated Escrows - - setActiveTab("approver")} - value="approver" - > - Approver - - setActiveTab("serviceProvider")} - value="service-provider" - > - Service Provider - - setActiveTab("disputeResolver")} - value="dispute-resolver" - > - Dispute Resolver - - setActiveTab("releaseSigner")} - value="release-signer" - > - Release Signer - - setActiveTab("platformAddress")} - value="platform-address" - > - Platform Address - - + <> + -
- + setActiveTab("issuer")} + value="issuer" + > + Initiated Escrows + + setActiveTab("approver")} + value="approver" + > + Approver + + setActiveTab("serviceProvider")} + value="service-provider" + > + Service Provider + + setActiveTab("disputeResolver")} + value="dispute-resolver" + > + Dispute Resolver + + setActiveTab("releaseSigner")} + value="release-signer" + > + Release Signer + + setActiveTab("platformAddress")} + value="platform-address" + > + Platform Address + + + +
+ +
-
- - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - + {activeMode === "table" ? ( + + + + ) : ( + + )} + - - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - + {activeMode === "table" ? ( + + + + ) : ( + + )} + - - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - + {activeMode === "table" ? ( + + + + ) : ( + + )} + - - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - + {activeMode === "table" ? ( + + + + ) : ( + + )} + - - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - + {activeMode === "table" ? ( + + + + ) : ( + + )} + - - - - - - - {activeMode === "table" ? ( + - + + + - ) : ( - - )} - - -
+ {activeMode === "table" ? ( + + + + ) : ( + + )} + + + + )} ); From 07f28a180a0efb97b93280bbf36cbb5e83f46664 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Sun, 23 Feb 2025 23:32:04 -0600 Subject: [PATCH 08/16] feat: add help button to Header for triggering Joyride tutorial on MyEscrows page --- src/components/layout/header/Header.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 0685b49..7b8755d 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -7,13 +7,15 @@ import useIsMobile from "@/hooks/mobile.hook"; import { cn } from "@/lib/utils"; import useHeader from "./hooks/header.hook"; import Link from "next/link"; -import { ArrowBigLeft } from "lucide-react"; +import { ArrowBigLeft, CircleHelp } from "lucide-react"; import { useWallet } from "@/components/modules/auth/wallet/hooks/wallet.hook"; +import { useJoyride } from "@/hooks/joyride.hook"; const Header = () => { const { handleConnect, handleDisconnect } = useWallet(); const isMobile = useIsMobile(); const { pathName, getBreadCrumbs, address } = useHeader(); + const { setRun } = useJoyride(); return (
@@ -45,6 +47,17 @@ const Header = () => {
+ + {pathName === "/dashboard/escrow/my-escrows" && ( + + )} + - )} -
From b15b06d2160bbf9fa2234b2608d64a96ac8f952b Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Tue, 25 Feb 2025 01:17:55 -0600 Subject: [PATCH 13/16] feat: add id attribute to MyEscrowsTable component for Joyride step targeting --- src/components/modules/escrow/ui/tables/MyEscrowsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modules/escrow/ui/tables/MyEscrowsTable.tsx b/src/components/modules/escrow/ui/tables/MyEscrowsTable.tsx index 2321db2..e58e6b1 100644 --- a/src/components/modules/escrow/ui/tables/MyEscrowsTable.tsx +++ b/src/components/modules/escrow/ui/tables/MyEscrowsTable.tsx @@ -94,7 +94,7 @@ const MyEscrowsTable = ({ type }: MyEscrowsTableProps) => { const { formatDateFromFirebase, formatAddress } = useFormatUtils(); return ( -
+
{loadingEscrows ? ( ) : currentData.length !== 0 ? ( From 0c3b969d93e7aa64261f50e00209a128dbffe6c0 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Tue, 25 Feb 2025 01:17:58 -0600 Subject: [PATCH 14/16] feat: enhance tutorial step content with additional details about escrow actions --- src/constants/steps/steps.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/constants/steps/steps.tsx b/src/constants/steps/steps.tsx index bb819f5..8fb259c 100644 --- a/src/constants/steps/steps.tsx +++ b/src/constants/steps/steps.tsx @@ -29,7 +29,10 @@ export const steps = [ content: (

Here you can see all the escrows you've created or are involved in - depending on your role. + depending on your role. See more details about a specific escrow by + clicking on it. There you'll be able to see the status, parties + involved, the current balance and also do some actions like Fund, + Release, etc.

), placement: "auto" as Placement, From eeacaa068ebefa547bff86f21a6a08cbbd11b09d Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Tue, 25 Feb 2025 01:18:03 -0600 Subject: [PATCH 15/16] feat: remove Joyride component and related hook for guided tutorial --- src/components/utils/ui/Joyride.tsx | 45 ----------------------------- src/hooks/joyride.hook.ts | 34 ---------------------- 2 files changed, 79 deletions(-) delete mode 100644 src/components/utils/ui/Joyride.tsx delete mode 100644 src/hooks/joyride.hook.ts diff --git a/src/components/utils/ui/Joyride.tsx b/src/components/utils/ui/Joyride.tsx deleted file mode 100644 index 52a2162..0000000 --- a/src/components/utils/ui/Joyride.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import Joyride from "react-joyride"; -import { steps } from "@/constants/steps/steps"; -import { useGlobalUIBoundedStore } from "@/core/store/ui"; -import { useJoyride } from "@/hooks/joyride.hook"; - -const JoyrideTutorial = () => { - const theme = useGlobalUIBoundedStore((state) => state.theme); - - const { run, stepIndex, handleJoyrideCallback } = useJoyride(); - console.log(stepIndex); - return ( - - ); -}; - -export default JoyrideTutorial; diff --git a/src/hooks/joyride.hook.ts b/src/hooks/joyride.hook.ts deleted file mode 100644 index 8c259b6..0000000 --- a/src/hooks/joyride.hook.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { steps } from "@/constants/steps/steps"; -import { useGlobalUIBoundedStore } from "@/core/store/ui"; -import { useState } from "react"; -import { CallBackProps, STATUS } from "react-joyride"; - -export const useJoyride = () => { - const run = useGlobalUIBoundedStore((state) => state.run); - const setRun = useGlobalUIBoundedStore((state) => state.setRun); - const [stepIndex, setStepIndex] = useState(0); - - const handleJoyrideCallback = (data: CallBackProps) => { - const { action, index, status, type } = data; - - if (status === STATUS.FINISHED || status === STATUS.SKIPPED) { - setRun(false); - setStepIndex(0); - } else if (action === "next" && index < steps.length - 1) { - setStepIndex(index + 1); - } else if (action === "prev" && index > 0) { - setStepIndex(index - 1); - } else if (type === "tour:end") { - setRun(false); - setStepIndex(0); - } - }; - - return { - handleJoyrideCallback, - run, - setRun, - stepIndex, - setStepIndex, - }; -}; From 142f2d7de49586d004617470ca947819422b1187 Mon Sep 17 00:00:00 2001 From: JoelVR17 Date: Tue, 25 Feb 2025 01:18:47 -0600 Subject: [PATCH 16/16] feat: remove CircleHelp icon import from Header component --- src/components/layout/header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 54c952d..5c48b75 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -7,7 +7,7 @@ import useIsMobile from "@/hooks/mobile.hook"; import { cn } from "@/lib/utils"; import useHeader from "./hooks/header.hook"; import Link from "next/link"; -import { ArrowBigLeft, CircleHelp } from "lucide-react"; +import { ArrowBigLeft } from "lucide-react"; import { useWallet } from "@/components/modules/auth/wallet/hooks/wallet.hook"; const Header = () => {