Improve UX for steps and wrong chain

balancer · Aug 13, 2024 · cc88b2c · cc88b2c
1 parent c7709bd
commit cc88b2c
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 40 deletions.
diff --git a/packages/nextjs/app/cow/_components/PoolCreated.tsx b/packages/nextjs/app/cow/_components/PoolCreated.tsx
@@ -21,13 +21,10 @@ export const PoolCreated = ({ etherscanURL, poolAddress, chainId, clearState }:
 
   return (
     <>
-      <div className="w-full flex flex-col gap-3">
-        <Alert type="warning">It may take a few minutes to appear in the Balancer app</Alert>
-      </div>
-
-      <div className="bg-base-200 w-full p-6 rounded-xl flex flex-col gap-7 shadow-xl">
+      <div className="bg-base-200 w-full p-6 rounded-xl flex flex-col gap-6 shadow-xl justify-center items-center">
+        <h5 className="text-2xl font-bold">View your pool</h5>
         <div className="flex justify-center items-center gap-2">
-          <div className=" sm:text-lg overflow-hidden">{poolAddress}</div>
+          <div className="text-sm sm:text-lg">{poolAddress}</div>
           <div>
             {addressCopied ? (
               <div className="!rounded-xl flex">
@@ -61,6 +58,9 @@ export const PoolCreated = ({ etherscanURL, poolAddress, chainId, clearState }:
           <ExternalLinkButton href={getPoolUrl(chainId, poolAddress)} text="View on Balancer" />
           {etherscanURL && <ExternalLinkButton href={etherscanURL} text="View on Etherscan" />}
         </div>
+        <Alert type="warning">It may take a few minutes to appear in the Balancer app</Alert>
+      </div>
+      <div className="w-80">
         <TransactionButton title="Create Another Pool" onClick={clearState} isPending={false} isDisabled={false} />
       </div>
     </>

diff --git a/packages/nextjs/app/cow/_components/PoolCreation.tsx b/packages/nextjs/app/cow/_components/PoolCreation.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { PoolCreated, PoolResetModal, StepsDisplay } from "./";
 import { Address, parseUnits } from "viem";
+import { useSwitchChain } from "wagmi";
 import { Alert, TextField, TokenField, TransactionButton } from "~~/components/common/";
+import { CHAIN_NAMES } from "~~/hooks/balancer/";
 import {
   type PoolCreationState,
   useBindToken,
@@ -30,6 +32,7 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
 
   useNewPoolEvents(setUserPoolAddress);
   const { targetNetwork } = useTargetNetwork();
+  const { switchChain } = useSwitchChain();
   const isWrongNetwork = targetNetwork.id !== state.chainId;
   const { data: pool, refetch: refetchPool } = useReadPool(userPoolAddress);
   const { allowance: allowance1, refetchAllowance: refetchAllowance1 } = useReadToken(
@@ -80,11 +83,10 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
 
   return (
     <>
-      <div className="flex flex-wrap justify-center gap-5 md:relative">
+      <div className="flex flex-wrap justify-center gap-5 lg:relative">
         <div className="bg-base-200 p-6 rounded-xl w-full flex flex-grow shadow-xl md:w-[555px]">
           <div className="flex flex-col items-center gap-5 w-full">
             <h5 className="text-xl md:text-2xl font-bold text-center">Preview your pool</h5>
-
             <div className="w-full">
               <div className="ml-1 mb-1">Selected pool tokens:</div>
               <div className="w-full flex flex-col gap-3">
@@ -94,7 +96,6 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
             </div>
             <TextField label="Pool name:" value={state.poolName} isDisabled={true} />
             <TextField label="Pool symbol:" value={state.poolSymbol} isDisabled={true} />
-
             {(() => {
               switch (state.step) {
                 case 1:
@@ -246,7 +247,7 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
             })()}
           </div>
         </div>
-        <div className="flex md:absolute md:top-0 md:-right-[225px]">
+        <div className="flex lg:absolute lg:top-0 lg:-right-[225px]">
           <StepsDisplay state={state} />
         </div>
       </div>
@@ -261,7 +262,15 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
         />
       )}
 
-      {isWrongNetwork && <Alert type="error">You&apos;re connected to the wrong network</Alert>}
+      {isWrongNetwork && (
+        <Alert type="error">
+          You&apos;re connected to the wrong network, switch to{" "}
+          <span onClick={() => switchChain?.({ chainId: state.chainId })} className="link">
+            {CHAIN_NAMES[state.chainId]}
+          </span>{" "}
+          to finish creating your pool, or start over.
+        </Alert>
+      )}
 
       {txError && (
         <Alert type="error">

diff --git a/packages/nextjs/app/cow/_components/StepInfoAlerts.tsx b/packages/nextjs/app/cow/_components/StepInfoAlerts.tsx
diff --git a/packages/nextjs/app/cow/_components/StepsDisplay.tsx b/packages/nextjs/app/cow/_components/StepsDisplay.tsx
@@ -17,7 +17,9 @@ export const StepsDisplay = ({ state }: { state: any }) => {
           <li
             key={step.number}
             data-content={state.step > step.number ? "✓" : step.number}
-            className={`step ${state.step > step.number && "step-accent"}`}
+            className={`step ${state.step > step.number && "step-accent"} ${
+              state.step == step.number && "step-primary"
+            }`}
           >
             {step.label}
           </li>

diff --git a/packages/nextjs/app/cow/_components/index.tsx b/packages/nextjs/app/cow/_components/index.tsx
@@ -2,4 +2,3 @@ export * from "./StepsDisplay";
 export * from "./PoolCreation";
 export * from "./PoolResetModal";
 export * from "./PoolCreated";
-export * from "./StepInfoAlerts";
diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -49,17 +49,17 @@ export const AddressInfoDropdown = ({
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary tabIndex={0} className="btn btn-secondary rounded-xl shadow-md dropdown-toggle gap-0 !h-auto">
-          <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+          <BlockieAvatar address={checkSumAddress} size={25} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
-        <ul tabIndex={0} className="dropdown-content menu z-[2] p-2 mt-2 bg-base-200 rounded-box gap-1">
+        <ul tabIndex={0} className="dropdown-content menu z-[2] p-2 mt-2 bg-base-100 rounded-box gap-1">
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             {addressCopied ? (
-              <div className="btn-sm !rounded-xl flex gap-3 py-3">
+              <div className="text-lg !rounded-xl flex gap-3 py-3">
                 <CheckCircleIcon
                   className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
                   aria-hidden="true"
@@ -76,7 +76,7 @@ export const AddressInfoDropdown = ({
                   }, 800);
                 }}
               >
-                <div className="btn-sm !rounded-xl flex gap-3 py-3">
+                <div className="text-lg !rounded-xl flex gap-3 py-3">
                   <DocumentDuplicateIcon
                     className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
                     aria-hidden="true"
@@ -87,13 +87,13 @@ export const AddressInfoDropdown = ({
             )}
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
+            <label htmlFor="qrcode-modal" className="text-lg !rounded-xl flex gap-3 py-3">
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
+            <button className="menu-item text-lg !rounded-xl flex gap-3 py-3" type="button">
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -108,7 +108,7 @@ export const AddressInfoDropdown = ({
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="btn-sm !rounded-xl flex gap-3 py-3"
+                className="text-lg !rounded-xl flex gap-3 py-3"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
@@ -120,7 +120,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
+              className="menu-item text-error text-lg !rounded-xl flex gap-3 py-3"
               type="button"
               onClick={() => disconnect()}
             >

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -23,7 +23,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
             <button
-              className="menu-item btn-sm !rounded-xl flex gap-3 py-3 whitespace-nowrap"
+              className="menu-item btn-md !rounded-xl flex gap-3 py-3 whitespace-nowrap text-lg"
               type="button"
               onClick={() => {
                 switchChain?.({ chainId: allowedNetwork.id });

diff --git a/packages/nextjs/hooks/balancer/useApiConfig.ts b/packages/nextjs/hooks/balancer/useApiConfig.ts
@@ -11,14 +11,14 @@ export const useApiConfig = () => {
     currentChainId = scaffoldConfig.targetFork.id;
   }
 
-  const chainName = chainIdToName[currentChainId];
+  const chainName = CHAIN_NAMES[currentChainId];
 
   const url = currentChainId === sepolia.id ? "https://test-api-v3.balancer.fi/" : "https://api-v3.balancer.fi/";
 
   return { url, chainName };
 };
 
-const chainIdToName: { [key: number]: string } = {
+export const CHAIN_NAMES: { [key: number]: string } = {
   1: "MAINNET",
   100: "GNOSIS",
   11155111: "SEPOLIA",

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
       {
         light: {
           primary: "#ffffff",
-          "primary-content": "#ffffff",
+          "primary-content": "rgb(45, 55, 72)",
           secondary: "rgb(251, 250, 249)",
           "secondary-content": "rgb(45, 55, 72)",
           accent: "#10b981",