add helpful links to pool reset modal

balancer · Aug 10, 2024 · b2dc042 · b2dc042
1 parent ea9d6f3
commit b2dc042
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 26 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,3 @@
+SEPOLIA_RPC_URL=
+MAINNET_RPC_URL=
+GNOSIS_RPC_URL=
diff --git a/README.md b/README.md
@@ -28,22 +28,32 @@ yarn start
 
 ## Run on Fork
 
-1. Add `chains.foundry` as the first item of `targetNetworks` in the `scaffold.config.ts` file
+1. Add the following ENV vars to a `.env` file located in the root directory
+
+```
+SEPOLIA_RPC_URL=
+MAINNET_RPC_URL=
+GNOSIS_RPC_URL=
+```
+
+2. Add `chains.foundry` as the first item of `targetNetworks` in the `scaffold.config.ts` file
 
 ```
   targetNetworks: [chains.foundry, chains.sepolia, chains.mainnet, chains.gnosis],
 ```
 
-2. Choose a `targetFork` network in `scaffold.config.ts`
+2. Set a `targetFork` network in `scaffold.config.ts`
 
 ```
   targetFork: chains.sepolia,
 ```
 
-3. Start the fork using `RPC_URL` that matches chain chosen for `targetFork`
+1. Start the fork using the same network as `targetFork`
 
 ```
-anvil --fork-url <RPC_URL> --chain-id 31337
+make fork-sepolia
+make fork-mainnet
+make fork-gnosis
 ```
 
 4. Start the frontend

diff --git a/packages/nextjs/app/cow/_components/PoolCreation.tsx b/packages/nextjs/app/cow/_components/PoolCreation.tsx
@@ -150,6 +150,8 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pool, allowance1, allowance2, token1RawAmount, token2RawAmount]);
 
+  const etherscanURL = pool && getBlockExplorerAddressLink(targetNetwork, pool.address);
+
   return (
     <>
       <div className="bg-base-200 p-7 rounded-xl w-full sm:w-[555px] flex flex-grow shadow-lg">
@@ -170,23 +172,21 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
       {state.step < 6 && <StepsDisplay currentStep={state.step} />}
 
       {pool && state.step === 6 && (
-        <div className="bg-base-200 w-full p-5 rounded-xl flex flex-col gap-5">
+        <>
           <Alert type="success">Your CoW AMM pool was successfully created!</Alert>
 
-          <div className="text-center">
-            <div className=" sm:text-xl overflow-hidden ">{pool.address}</div>
-          </div>
+          <div className="bg-base-200 w-full p-5 rounded-xl flex flex-col gap-5">
+            <div className="text-center">
+              <div className=" sm:text-xl overflow-hidden ">{pool.address}</div>
+            </div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
-            <ExternalLinkButton href={getPoolUrl(state.chainId, pool.address)} text="View on Balancer" />
-            <ExternalLinkButton
-              href={getBlockExplorerAddressLink(targetNetwork, pool.address)}
-              text="View on Etherscan"
-            />
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+              <ExternalLinkButton href={getPoolUrl(state.chainId, pool.address)} text="View on Balancer" />
+              {etherscanURL && <ExternalLinkButton href={etherscanURL} text="View on Etherscan" />}
+            </div>
           </div>
-
           <Alert type="warning">It may take a few minutes to appear in the Balancer app</Alert>
-        </div>
+        </>
       )}
 
       {isWrongNetwork && <Alert type="error">You&apos;re connected to the wrong network</Alert>}
@@ -268,7 +268,13 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
           Start Over
         </div>
       )}
-      {isResetModalOpen && <PoolResetModal setIsModalOpen={setIsResetModalOpen} clearState={() => clearState()} />}
+      {isResetModalOpen && (
+        <PoolResetModal
+          setIsModalOpen={setIsResetModalOpen}
+          etherscanURL={pool && !pool.isFinalized ? etherscanURL : undefined}
+          clearState={() => clearState()}
+        />
+      )}
     </>
   );
 };
diff --git a/packages/nextjs/app/cow/_components/PoolResetModal.tsx b/packages/nextjs/app/cow/_components/PoolResetModal.tsx
@@ -1,22 +1,44 @@
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { ArrowTopRightOnSquareIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 interface PoolResetModalModalProps {
   setIsModalOpen: (isOpen: boolean) => void;
   clearState: () => void;
+  etherscanURL: string | undefined;
 }
 
-export const PoolResetModal = ({ setIsModalOpen, clearState }: PoolResetModalModalProps) => {
+export const PoolResetModal = ({ setIsModalOpen, clearState, etherscanURL }: PoolResetModalModalProps) => {
   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-[500px] relative bg-base-300 border border-base-200 rounded-lg p-6">
         <div className="flex items-center justify-between mb-5">
-          <h5 className="font-bold text-xl mb-0">Are you sure?</h5>
+          <h5 className="font-bold text-2xl mb-0">Are you sure?</h5>
 
           <XMarkIcon className="w-6 h-6 hover:cursor-pointer " onClick={() => setIsModalOpen(false)} />
         </div>
 
-        <div className="text-lg my-10">Resetting the pool creation progress cannot be undone.</div>
+        <div className="text-lg mb-5">If you are having trouble with the pool creation process, please consider:</div>
+        <ul className="list-disc pl-5 mb-10 text-lg">
+          <li>
+            Reaching out for assistance on{" "}
+            <Link
+              target="_blank"
+              rel="noreferrer"
+              href="https://discord.com/channels/638460494168064021/638465986839707660"
+            >
+              <span className="link">discord</span> <ArrowTopRightOnSquareIcon className="w-4 h-4 inline-block" />
+            </Link>
+          </li>
+          {etherscanURL && (
+            <li>
+              Viewing the pool on{" "}
+              <Link target="_blank" rel="noreferrer" href={etherscanURL}>
+                <span className="link">etherscan</span> <ArrowTopRightOnSquareIcon className="w-4 h-4 inline-block" />
+              </Link>
+            </li>
+          )}
+        </ul>
         <div className="flex gap-3 justify-end">
           <button
             className="w-24 border border-base-content px-5 py-3 rounded-xl"

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
           "base-300": "#EBE8E0", // bg color
           "base-content": "rgb(45, 55, 72)",
           info: "#1d4ed8",
-          success: "#4d7c0f",
+          success: "#15803d",
           warning: "#c2410c",
           error: "#b91c1c",
 
@@ -54,7 +54,7 @@ module.exports = {
           "base-300": "rgb(56, 62, 71)", // bg color
           "base-content": "rgb(229, 211, 190)",
           info: "#60a5fa",
-          success: "#a3e635",
+          success: "#4ade80",
           warning: "#fdba74",
           error: "#fca5a5",
 
@@ -88,9 +88,9 @@ module.exports = {
       colors: {
         "custom-beige-start": "#e5d3be",
         "custom-beige-end": "#e6c6a0",
-        "error-tint": "#d64e4e2b",
-        "warning-tint": "#fb923c40",
-        "success-tint": "#4d7c0f50",
+        "error-tint": "#ef444433",
+        "warning-tint": "#f59e0b33",
+        "success-tint": "#22c55e33",
       },
     },
   },