Sergei / wall 2127 / implement simple onboarding steps

packages/wallets/package.json

@@ -22,6 +22,7 @@
         "qrcode.react": "^1.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-joyride": "^2.5.3",
         "react-router-dom": "^5.2.0",
         "usehooks-ts": "^2.7.0"
     },

packages/wallets/src/components/Base/WalletText/WalletText.module.css

@@ -86,4 +86,8 @@
     &-color-black {
         color: #000000;
     }
+
+    &-color-red {
+        color: #ff444f;
+    }
 }

packages/wallets/src/components/Base/WalletText/WalletText.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import classNames from 'classnames';
 import styles from './WalletText.module.css';
 
 interface WalletTextProps {
     align?: 'center' | 'left' | 'right';
     children: React.ReactNode;
-    color?: 'black' | 'error' | 'general' | 'primary' | 'success' | 'warning' | 'white';
+    color?: CSSProperties['color'] | 'error' | 'general' | 'primary' | 'success' | 'warning';
     size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     weight?: 'bold' | 'normal';
 }

packages/wallets/src/components/WalletTourGuide/WalletTourGuide.scss

@@ -0,0 +1,51 @@
+.wallets-tour-guide {
+    &__container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        border-radius: 0.8rem;
+        background: var(--system-light-8-primary-background, #fff);
+        width: 28rem;
+
+        /* Shadows/xxxl */
+        box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+    }
+
+    &__header {
+        display: flex;
+        height: 4.8rem;
+        padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+        align-items: center;
+        gap: 1rem;
+        align-self: stretch;
+
+        border-radius: 0.8rem 0.8rem 0rem 0rem;
+        background: var(--system-light-8-primary-background, #fff);
+
+        /* divider/light/bottom/1px */
+        box-shadow: 0px -1px 0px 0px #f2f3f4 inset;
+    }
+
+    &__content {
+        display: flex;
+        padding: 1.6rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.8rem;
+        align-self: stretch;
+
+        // delete this later when WalletText will be updated
+        line-height: 2rem; /* 142.857% */
+    }
+
+    &__footer {
+        display: flex;
+        height: 4rem;
+        padding: 0rem 1.6rem 1.6rem;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 1rem;
+        align-self: stretch;
+    }
+}

packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Joyride, { CallBackProps } from 'react-joyride';
+import { tourStepConfig, TooltipComponent } from './WalletTourGuideSettings';
+import './WalletTourGuide.scss';
+
+type TProps = {
+    isStarted?: boolean;
+    setIsStarted?: (value: boolean) => void;
+};
+
+const WalletTourGuide = ({ isStarted = false, setIsStarted }: TProps) => {
+    const callbackHandle = (data: CallBackProps) => {
+        if (data.action === 'reset') {
+            setIsStarted?.(false);
+        }
+    };
+
+    return (
+        <Joyride
+            callback={callbackHandle}
+            continuous
+            disableCloseOnEsc
+            disableScrolling
+            floaterProps={{
+                disableAnimation: true,
+            }}
+            run={isStarted}
+            steps={tourStepConfig}
+            tooltipComponent={TooltipComponent}
+        />
+    );
+};
+
+export default WalletTourGuide;

packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Step, TooltipRenderProps } from 'react-joyride';
+import { WalletButton, WalletText } from '../Base';
+import './WalletTourGuide.scss';
+
+export const tourStepConfig: Step[] = [
+    {
+        content: (
+            <WalletText size='sm'>
+                This is your Wallet. These are the functions that you can perform within this Wallet and you can
+                conveniently view your total balance here.
+            </WalletText>
+        ),
+        disableBeacon: true,
+        disableOverlayClose: true,
+        target: '.wallets-accordion__header:has(+ .wallets-accordion__content--visible)',
+        title: (
+            <WalletText color='red' size='sm' weight='bold'>
+                Wallets
+            </WalletText>
+        ),
+    },
+    {
+        content: <WalletText size='sm'>Step 2</WalletText>,
+        disableBeacon: true,
+        disableOverlayClose: true,
+        target: '.wallets-accordion__header:has(+ .wallets-accordion__content--visible)',
+        title: (
+            <WalletText color='red' size='sm' weight='bold'>
+                Wallets
+            </WalletText>
+        ),
+    },
+];
+
+export const TooltipComponent = ({
+    backProps,
+    closeProps,
+    continuous,
+    index,
+    isLastStep,
+    primaryProps,
+    step,
+    tooltipProps,
+}: TooltipRenderProps) => {
+    return (
+        <div {...tooltipProps} className='wallets-tour-guide__container'>
+            <div className='wallets-tour-guide__header'>{step?.title as React.ReactNode}</div>
+            {<div className='wallets-tour-guide__content'>{step.content as React.ReactNode}</div>}
+            <div className='wallets-tour-guide__footer'>
+                {index > 0 && (
+                    <WalletButton {...backProps} color='white' variant='outlined'>
+                        <WalletText align='center' color='black' size='sm' weight='bold'>
+                            Back
+                        </WalletText>
+                    </WalletButton>
+                )}
+                {continuous && (
+                    <WalletButton {...primaryProps}>
+                        <WalletText align='center' color='white' size='sm' weight='bold'>
+                            {`${isLastStep ? 'Close' : 'Next'}`}
+                        </WalletText>
+                    </WalletButton>
+                )}
+                {!continuous && (
+                    <WalletButton {...closeProps}>
+                        <WalletText align='center' color='white' size='sm' weight='bold'>
+                            Close
+                        </WalletText>
+                    </WalletButton>
+                )}
+            </div>
+        </div>
+    );
+};

packages/wallets/src/components/WalletTourGuide/index.tsx

@@ -0,0 +1 @@
+export { default as WalletTourGuide } from './WalletTourGuide';

packages/wallets/src/components/index.ts

@@ -16,3 +16,4 @@ export * from './WalletsAccordion';
 export * from './WalletsAddMoreCarousel';
 export * from './WalletsCarousel';
 export * from './WalletsCarouselContent';
+export * from './WalletTourGuide';

packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
-import { DesktopWalletsList, WalletsAddMoreCarousel, WalletsCarousel } from '../../components';
+import React, { useState } from 'react';
+import { DesktopWalletsList, WalletTourGuide, WalletsAddMoreCarousel, WalletsCarousel } from '../../components';
 import useDevice from '../../hooks/useDevice';
 import './WalletsListingRoute.scss';
 
 const WalletsListingRoute: React.FC = () => {
     const { isMobile } = useDevice();
+    const [isStarted, setIsStarted] = useState(false);
 
     return (
         <div className='wallets-listing-route'>
+            {/* TODO: delete this button when Header will be created in wallets package */}
+            <button onClick={() => setIsStarted(prev => !prev)}>Wallet onboarding</button>
             {isMobile ? <WalletsCarousel /> : <DesktopWalletsList />}
             <WalletsAddMoreCarousel />
+            <WalletTourGuide isStarted={isStarted} setIsStarted={setIsStarted} />
         </div>
     );
 };