improve reset modal ux

balancer · Nov 27, 2024 · 1148d93 · 1148d93
1 parent 5d32ec4
commit 1148d93
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 52 deletions.
diff --git a/packages/nextjs/app/v3/_components/PoolConfiguration.tsx b/packages/nextjs/app/v3/_components/PoolConfiguration.tsx
@@ -3,14 +3,13 @@
 import { useEffect, useState } from "react";
 import { ChooseInfo, ChooseParameters, ChooseTokens, ChooseType, PoolCreationManager } from "./";
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
-import { PoolStateResetModal, TransactionButton } from "~~/components/common";
+import { TransactionButton } from "~~/components/common";
 import { TABS, type TabType, usePoolCreationStore, useValidatePoolCreationInput } from "~~/hooks/v3";
 import { bgBeigeGradient } from "~~/utils";
 
 export function PoolConfiguration() {
-  const { selectedTab, updatePool, clearPoolStore, step } = usePoolCreationStore();
+  const { selectedTab, updatePool, step } = usePoolCreationStore();
   const [isPoolCreationModalOpen, setIsPoolCreationModalOpen] = useState(false);
-  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
   const { prev, next } = getAdjacentTabs(selectedTab);
   const { isParametersValid, isTypeValid, isInfoValid, isTokensValid, isPoolCreationInputValid } =
     useValidatePoolCreationInput();
@@ -100,23 +99,8 @@ export function PoolConfiguration() {
             ) : null}
           </div>
         </div>
-        <div className="flex justify-center">
-          <div onClick={() => setIsResetModalOpen(true)} className="text-center underline cursor-pointer text-lg mt-2">
-            Reset progress
-          </div>
-        </div>
       </div>
 
-      {isResetModalOpen && (
-        <PoolStateResetModal
-          setIsModalOpen={setIsResetModalOpen}
-          clearState={() => {
-            clearPoolStore();
-            updatePool({ selectedTab: "Type" });
-          }}
-        />
-      )}
-
       {isPoolCreationModalOpen && <PoolCreationManager setIsModalOpen={setIsPoolCreationModalOpen} />}
     </>
   );

diff --git a/packages/nextjs/app/v3/_components/PoolCreationManager.tsx b/packages/nextjs/app/v3/_components/PoolCreationManager.tsx
@@ -125,7 +125,7 @@ export function PoolCreationManager({ setIsModalOpen }: { setIsModalOpen: (isOpe
               {step <= poolCreationSteps.length ? poolCreationSteps[step - 1].component : <PoolCreatedView />}
               <div className="flex justify-center">
                 <div onClick={() => setIsResetModalOpen(true)} className="text-center underline cursor-pointer text-lg">
-                  Having trouble?
+                  Want help?
                 </div>
               </div>
             </div>

diff --git a/packages/nextjs/app/v3/page.tsx b/packages/nextjs/app/v3/page.tsx
@@ -1,15 +1,20 @@
 "use client";
 
+import { useState } from "react";
 import { PoolConfiguration, PoolDetails } from "./_components";
 import type { NextPage } from "next";
 import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
 import { BalancerLogo } from "~~/components/assets/BalancerLogo";
-import { Alert } from "~~/components/common";
-import { usePoolStoreDebug, useValidateNetwork } from "~~/hooks/v3";
+import { Alert, PoolStateResetModal } from "~~/components/common";
+import { usePoolCreationStore, usePoolStoreDebug, useValidateNetwork } from "~~/hooks/v3";
 
 const BalancerV3: NextPage = () => {
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
+
   usePoolStoreDebug();
   const { isWrongNetwork, isWalletConnected } = useValidateNetwork();
+  const { updatePool, clearPoolStore, selectedTab } = usePoolCreationStore();
+
   return (
     <div className="flex justify-center">
       <div className="flex justify-center py-10 px-5 lg:px-10 w-full max-w-screen-2xl">
@@ -45,9 +50,20 @@ const BalancerV3: NextPage = () => {
             <>
               <div className="hidden sm:flex flex-wrap gap-5 w-full justify-center">
                 <PoolConfiguration />
+
                 <div className="bg-base-200 w-full max-w-[420px] rounded-xl shadow-lg p-5 h-fit">
                   <div className="font-bold text-2xl mb-3">Pool Preview</div>
                   <PoolDetails isPreview={true} />
+                  {selectedTab !== "Type" && (
+                    <div className="flex justify-center mt-3">
+                      <div
+                        onClick={() => setIsResetModalOpen(true)}
+                        className="text-center underline cursor-pointer text-lg mt-2"
+                      >
+                        Want help?
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
 
@@ -60,6 +76,15 @@ const BalancerV3: NextPage = () => {
           )}
         </div>
       </div>
+      {isResetModalOpen && (
+        <PoolStateResetModal
+          setIsModalOpen={setIsResetModalOpen}
+          clearState={() => {
+            clearPoolStore();
+            updatePool({ selectedTab: "Type" });
+          }}
+        />
+      )}
     </div>
   );
 };

diff --git a/packages/nextjs/components/common/PoolStateResetModal.tsx b/packages/nextjs/components/common/PoolStateResetModal.tsx
@@ -1,57 +1,50 @@
 import Link from "next/link";
-import { ArrowTopRightOnSquareIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface PoolStateResetModalProps {
   setIsModalOpen: (isOpen: boolean) => void;
   clearState: () => void;
   etherscanURL?: string | undefined;
 }
 
-export const PoolStateResetModal = ({ setIsModalOpen, clearState, etherscanURL }: PoolStateResetModalProps) => {
+export const PoolStateResetModal = ({ setIsModalOpen, clearState }: PoolStateResetModalProps) => {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
       <div className="absolute w-full h-full" onClick={() => setIsModalOpen(false)} />
       <div className="w-[550px] relative bg-base-100 border border-base-200 rounded-lg p-6">
         <div className="flex items-center justify-between mb-7">
-          <h5 className="font-bold text-3xl mb-0">Troubleshooting Tips</h5>
-
+          <h5 className="font-bold text-3xl mb-0">Need Assistance?</h5>
           <XMarkIcon className="w-6 h-6 hover:cursor-pointer " onClick={() => setIsModalOpen(false)} />
         </div>
-        <ol className="list-disc pl-5 mb-10 text-lg">
-          <li>
-            <span className="link cursor-pointer text-info" onClick={() => window.location.reload()}>
-              Refresh the page
-            </span>{" "}
-            after a transaction has been finalized
-          </li>
-          <li>
-            Reach out for assistance on{" "}
-            <Link target="_blank" rel="noreferrer" href="https://discord.balancer.fi/">
-              <span className="link text-info">discord</span>{" "}
-              <ArrowTopRightOnSquareIcon className="w-4 h-4 inline-block text-info" />
-            </Link>
-          </li>
-          {etherscanURL && (
-            <li>
-              View the pool on a{" "}
-              <Link target="_blank" rel="noreferrer" href={etherscanURL}>
-                <span className="link text-info">block explorer</span>{" "}
-                <ArrowTopRightOnSquareIcon className="w-4 h-4 inline-block text-info" />
-              </Link>
-            </li>
-          )}
-          <li>Or to start over, click the reset button below</li>
-        </ol>
+        <div className="text-lg mb-5">
+          If you have encountered any issues or want help deciding on pool configuration, please reach out to us on{" "}
+          <Link target="_blank" rel="noreferrer" href="https://discord.balancer.fi/">
+            <span className="link text-info">discord</span>{" "}
+          </Link>{" "}
+          or create an issue on{" "}
+          <Link
+            className="link text-info"
+            rel="noreferrer"
+            target="_blank"
+            href="https://github.com/balancer/pool-creator/issues/new/choose"
+          >
+            github
+          </Link>
+        </div>
+        <div className="text-lg mb-10">
+          Or to reset all pool configuration and creation progress, click the red button below
+        </div>
+
         <div className="flex gap-3 justify-end">
-          <button className="w-24 border btn-secondary px-5 py-3 rounded-xl" onClick={() => setIsModalOpen(false)}>
+          <button className="w-24 btn btn-info px-5 py-3 rounded-xl" onClick={() => setIsModalOpen(false)}>
             Cancel
           </button>
           <button
             onClick={() => {
               clearState();
               setIsModalOpen(false);
             }}
-            className="bg-error text-neutral-800 px-5 py-3 border border-error rounded-xl w-24"
+            className="btn btn-error font-bold text-neutral-800 px-5 py-3 rounded-xl w-24"
           >
             Reset
           </button>