Merge branch 'develop' into fix-exponential-token-qty-input-bugs

src/components/Chat/ChatIFs.tsx

@@ -56,10 +56,17 @@ export interface UserAvatarDataIF {
     avatarCompressed: string;
 }
 
+
+export interface TutorialStepExternalComponent{
+    component: JSX.Element;
+    placement?: 'nav-end'|'nav-before'|'nav-after' 
+}
+
 export interface TutorialIF {
     lsKey: string;
     steps: Step[];
     disableDefault?: boolean;
+    externalComponents?: Map<string, TutorialStepExternalComponent>;
 }
 
 export interface TutorialStepIF {
@@ -71,5 +78,7 @@ export interface TutorialStepIF {
     highlightClass?: string;
     assignment?: string;
     actionTrigger?: string;
+    actionOnComplete?: string;
+    component? : JSX.Element;
     navigate?: { label: string; path: string };
 }

src/components/Global/TutorialComponent/TutorialComponent.module.css

@@ -5,7 +5,6 @@
     display: block;
     width: 100vw;
     height: 100vh;
-    /* background-color: rgba(255,0,0,.1); */
 }
 
 .focus_outline{
@@ -137,11 +136,16 @@
     border: 1px solid color-mix(in srgb, white 30%, transparent);
 }
 
-.step_btn:not(.disabled):hover{
+.step_btn:not(.disabled):not(.dismiss_button):hover{
     background: var(--accent1);
     color: black;
 }
 
+.step_btn.dismiss_button:hover{
+    opacity: 1;
+}
+
+
 .step_btn.disabled{
     opacity: .5;
     cursor: default;
@@ -189,12 +193,25 @@
     border: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
     color: var(--accent1);
 }
+.dismiss_button{
+    opacity: .7;
+    border: 1px solid color-mix(in srgb, white 50%, transparent);
+    color: white;
+}
+
+.for_tooltip{
+    position: absolute;
+    right: -3rem;
+    top: 0;
+}
 
 .complete_button{
     border: 1px solid color-mix(in srgb, var(--accent1) 50%, transparent);
     color: var(--accent1);
 }
 
+
+
 @media only screen and (max-width: 600px){
 
     .tooltip_wrapper{

src/components/Global/TutorialComponent/TutorialComponent.tsx

@@ -1,8 +1,8 @@
 import { memo, useEffect, useRef, useState } from 'react';
-import { TutorialStepIF } from '../../Chat/ChatIFs';
-import styles from './TutorialComponent.module.css';
 import { useNavigate } from 'react-router-dom';
 import useMediaQuery from '../../../utils/hooks/useMediaQuery';
+import { TutorialStepExternalComponent, TutorialStepIF } from '../../Chat/ChatIFs';
+import styles from './TutorialComponent.module.css';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 interface propsIF {
@@ -12,6 +12,7 @@ interface propsIF {
     showSteps?: boolean;
     initialStep?: number;
     onComplete?: () => void;
+    externalComponents?: Map<string, TutorialStepExternalComponent>
 }
 
 function TutorialComponent(props: propsIF) {
@@ -40,9 +41,15 @@ function TutorialComponent(props: propsIF) {
 
     const isMobile = useMediaQuery('(max-width: 800px)');
     const [initialTimeoutDone, setInitialTimeoutDone] = useState<boolean>(false);
+    const [onCompleteActions, setOnCompleteActions] = useState<string[]>([]);
+    const onCompleteActionsRef = useRef<string[]>([]);
+    onCompleteActionsRef.current = onCompleteActions;
+
+    const [stepExternalComponent, setStepExternalComponent] = useState<TutorialStepExternalComponent>();
 
     useEffect(() => {
         if (hasTriggeredRef.current) return;
+        buildOnCompletes();
         if (steps.length > 0) {
             triggerTutorial();
         }
@@ -57,6 +64,9 @@ function TutorialComponent(props: propsIF) {
         if (refVal < steps.length - 1) {
             setStepIndex(refVal + 1);
         }
+        else if (refVal === steps.length -1){
+            completeTutorial();
+        }
     };
     const prevStep = () => {
         const refVal =
@@ -73,6 +83,7 @@ function TutorialComponent(props: propsIF) {
         if (onComplete) {
             onComplete();
         }
+        handleOnCompletes();
     };
 
     const getTargetEl = () => {
@@ -110,6 +121,18 @@ function TutorialComponent(props: propsIF) {
         }
     };
 
+    const buildOnCompletes = () => {
+        const completeActions:string[] = [];
+
+        steps.forEach((step) => {
+            if(step.actionOnComplete){
+                completeActions.push(step.actionOnComplete);
+            }
+        })
+
+        setOnCompleteActions([...completeActions]);
+    }
+
     const handleTooltip = () => {
         const targetEl = getTargetEl();
 
@@ -228,6 +251,18 @@ function TutorialComponent(props: propsIF) {
         }
     }
 
+    const handleOnCompletes = () => {
+        if(onCompleteActionsRef.current && onCompleteActionsRef.current.length > 0){
+            onCompleteActionsRef.current.map((action) => {
+                const el = document.querySelector(action);
+                if(el && el instanceof HTMLElement){
+                    el.click();
+                }
+            })
+
+        }
+    }
+
 
     const navigate = useNavigate();
 
@@ -256,6 +291,12 @@ function TutorialComponent(props: propsIF) {
             focusOverlay.current.style.display = 'none';
         }
 
+        if(step && step.element && props.externalComponents && props.externalComponents.get(step.element.toString()) !== undefined){
+            setStepExternalComponent(props.externalComponents.get(step.element.toString()));
+        }else{
+            setStepExternalComponent(undefined);
+        }
+
         setTimeout(() => {
             handleFocusOverlay();
             handleTooltip();
@@ -309,12 +350,30 @@ function TutorialComponent(props: propsIF) {
                     Complete
                 </div>
             )}
+
+            { !forTooltip && !isMobile && (
+                <div
+                className={styles.step_btn + ' ' + styles.dismiss_button}
+                onClick={completeTutorial}
+            >
+                 {'X'} 
+            </div>
+            )}
+
+            { forTooltip && !isMobile && (
+                <div
+                className={styles.step_btn + ' ' + styles.dismiss_button + ' ' + styles.for_tooltip }
+                onClick={completeTutorial}
+            >
+                 {'X'} 
+            </div>
+            )}
         </>
     );
 
     return (
         <div>
-            <div className={styles.tutorial_overlay}></div>
+            <div className={styles.tutorial_overlay} onClick={nextStep}></div>
             <div ref={focusOverlay} className={styles.focus_outline}></div>
 
             {step && (
@@ -333,11 +392,21 @@ function TutorialComponent(props: propsIF) {
                     </div>
                     <div className={styles.tooltip_content}>{step.intro}</div>  
 
+                    {stepExternalComponent && (stepExternalComponent.placement === 'nav-before' || !stepExternalComponent.placement) &&
+                        (<>{stepExternalComponent.component}</>)
+                    }
                     <div className={styles.tooltip_buttons_wrapper}>
                         {navButtons(true)}
                         {renderNavigate()}
+                        {stepExternalComponent && stepExternalComponent.placement === 'nav-end' &&
+                            (<>{stepExternalComponent.component}</>)
+                        }
                     </div>
 
+                    {stepExternalComponent && stepExternalComponent.placement === 'nav-after' &&
+                        (<>{stepExternalComponent.component}</>)
+                    }
+
                     <div className={styles.step_dots_wrapper}>
                         {steps.map((_, i) => (
                             <div

src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.module.css

@@ -42,4 +42,11 @@
     }
 }
 
+.connectButton{
+    background: var(--accent1, #0ccdff);
+    padding: 0 .5rem;
+    margin: 0 .5rem;
+    cursor: pointer;
+    border: none;
+}
 

src/components/Global/TutorialOverlay/TutorialOverlayUrlBased.tsx

@@ -1,15 +1,16 @@
 import { Step } from 'intro.js-react';
 import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { AiOutlineQuestionCircle } from 'react-icons/ai';
+import { AppStateContext } from '../../../contexts/AppStateContext';
+import { UserDataContext } from '../../../contexts/UserDataContext';
 import { useLinkGen } from '../../../utils/hooks/useLinkGen';
 import { futaAuctionsSteps } from '../../../utils/tutorial/Futa/AuctionsSteps';
+import { futaAccountSteps } from '../../../utils/tutorial/Futa/FutaAccountSteps';
 import { futaCreateSteps } from '../../../utils/tutorial/Futa/FutaCreateSteps';
-import { TutorialIF } from '../../Chat/ChatIFs';
+import { TutorialIF, TutorialStepExternalComponent } from '../../Chat/ChatIFs';
 import { generateObjectHash, getLS, setLS } from '../../Chat/ChatUtils';
 import TutorialComponent from '../TutorialComponent/TutorialComponent';
 import styles from './TutorialOverlayUrlBased.module.css';
-import { AiOutlineQuestionCircle } from 'react-icons/ai';
-import { UserDataContext } from '../../../contexts/UserDataContext';
-import { futaAccountSteps } from '../../../utils/tutorial/Futa/FutaAccountSteps';
 // import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos, MdClose} from 'react-icons/md'
 
 interface TutorialOverlayPropsIF {
@@ -32,6 +33,19 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
     const [stepsFiltered, setStepsFiltered] = useState<Step[]>([]);
 
     const [replayTutorial, setReplayTutorial] = useState<boolean>(false);
+
+    const {
+        walletModal: { open: openWalletModal },
+    } = useContext(AppStateContext);
+
+
+    const connectButton =         (<button
+    id='connect_wallet_button_page_header'
+    onClick={openWalletModal}
+    className={styles.connectButton}
+>
+    CONNECT WALLET
+</button>)
 
     const getTutorialObjectForPage = (page: string) => {
         switch (page) {
@@ -40,7 +54,10 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
             case 'account':
                 return { lsKey: 'tuto_futa_account', steps: futaAccountSteps, disableDefault: true};
             case 'auctionCreate':
-                return { lsKey: 'tuto_futa_create', steps: futaCreateSteps };
+                return { lsKey: 'tuto_futa_create', 
+                    steps: futaCreateSteps,  
+                    externalComponents: 
+                    new Map<string, TutorialStepExternalComponent>([['#auctions_create_connect_button', {component: connectButton, placement: 'nav-end' }]])};
             default:
                 return undefined;
         }
@@ -168,6 +185,7 @@ function TutorialOverlayUrlBased(props: TutorialOverlayPropsIF) {
                             showSteps={true}
                             onComplete={handleTutoFinish}
                             initialTimeout={600}
+                            externalComponents={selectedTutorialRef.current.externalComponents}
                         />
                     </>
                 )}

src/contexts/ExploreContext.tsx

@@ -9,7 +9,6 @@ import {
     useState,
 } from 'react';
 import { CachedDataContext } from './CachedDataContext';
-import { ChainDataContext } from './ChainDataContext';
 import { CrocEnv, toDisplayPrice } from '@crocswap-libs/sdk';
 import { PoolIF } from '../ambient-utils/types';
 import {
@@ -67,8 +66,6 @@ export const ExploreContext = createContext<ExploreContextIF>(
 );
 
 export const ExploreContextProvider = (props: { children: ReactNode }) => {
-    const { isActiveNetworkBlast } = useContext(ChainDataContext);
-
     const {
         cachedPoolStatsFetch,
         cachedQuerySpotPrice,
@@ -221,10 +218,7 @@ export const ExploreContextProvider = (props: { children: ReactNode }) => {
                     ? ydayPrice / nowPrice - 1.0
                     : nowPrice / ydayPrice - 1.0
                 : 0.0;
-        if (
-            !expandedPoolStatsNow ||
-            (!isActiveNetworkBlast && expandedPoolStatsNow.tvlTotalUsd < 100)
-        ) {
+        if (!expandedPoolStatsNow || expandedPoolStatsNow.tvlTotalUsd < 100) {
             // return early
             const poolData: PoolDataIF = {
                 ...pool,

src/contexts/index.ts

@@ -0,0 +1,24 @@
+export { AppStateContext } from './AppStateContext';
+export { AuctionsContext } from './AuctionsContext';
+export { BrandContext } from './BrandContext';
+export { CachedDataContext } from './CachedDataContext';
+export { CandleContext } from './CandleContext';
+export { ChainDataContext } from './ChainDataContext';
+export { ChartContext } from './ChartContext';
+export { CrocEnvContext } from './CrocEnvContext';
+export { DataLoadingContext } from './DataLoadingContext';
+export { ExploreContext } from './ExploreContext';
+export { GlobalContexts } from './GlobalContexts';
+export { GraphDataContext } from './GraphDataContext';
+export { PoolContext } from './PoolContext';
+export { RangeContext } from './RangeContext';
+export { ReceiptContext } from './ReceiptContext';
+export { SidebarContext } from './SidebarContext';
+export { TokenBalanceContext } from './TokenBalanceContext';
+export { TokenContext } from './TokenContext';
+export { TradeDataContext } from './TradeDataContext';
+export { TradeTableContext } from './TradeTableContext';
+export { TradeTokenContext } from './TradeTokenContext';
+export { UserDataContext } from './UserDataContext';
+export { UserPreferenceContext } from './UserPreferenceContext';
+export { XpLeadersContext } from './XpLeadersContext';

src/utils/tutorial/Futa/FutaCreateSteps.ts → src/utils/tutorial/Futa/FutaCreateSteps.tsx

@@ -27,11 +27,12 @@ export const futaCreateSteps = [
         title: 'Create Token',
         intro: 'Create token auction token from this button',
         navigate: {label: 'To Auctions', path: '/auctions'},
+        actionOnComplete: '#create_auction_reset',
     },
     {
         element: '#auctions_create_connect_button',
         title: 'Connect Wallet',
         intro: 'You should connect your wallet to create token auction',
-        navigate: {label: 'To Auctions', path: '/auctions'},
+        actionOnComplete: '#create_auction_reset',
     },
 ];