Show pool address & link to etherscan after pool finalizes

packages/nextjs/app/cow/_components/PoolConfiguration.tsx

@@ -81,7 +81,7 @@ export const PoolConfiguration = () => {
 
   return (
     <>
-      <div className="bg-base-200 p-7 rounded-xl w-full sm:w-[555px] flex flex-grow">
+      <div className="bg-base-200 p-7 rounded-xl w-full sm:w-[555px] flex flex-grow shadow-lg">
         <div className="flex flex-col items-center gap-4 w-full">
           <h5 className="text-xl md:text-2xl font-bold">Configure your pool</h5>
 
@@ -97,7 +97,6 @@ export const PoolConfiguration = () => {
                   if (token2?.address === selectedToken.address) {
                     setToken2(null);
                   }
-
                   setToken1(selectedToken);
                 }}
                 tokenOptions={availableTokens || []}
@@ -112,7 +111,6 @@ export const PoolConfiguration = () => {
                   if (token1?.address === selectedToken.address) {
                     setToken1(null);
                   }
-
                   setToken2(selectedToken);
                 }}
                 tokenOptions={availableTokens || []}

packages/nextjs/app/cow/_components/PoolCreation.tsx

@@ -1,14 +1,14 @@
 import { useState } from "react";
-import Link from "next/link";
 import { StepsDisplay } from "./StepsDisplay";
 import { Address, parseUnits } from "viem";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import { Alert, TextField, TokenField, TransactionButton } from "~~/components/common/";
+import { Alert, ExternalLinkButton, TextField, TokenField, TransactionButton } from "~~/components/common/";
 import { useBindPool, useCreatePool, useFinalizePool, useReadPool, useSetSwapFee } from "~~/hooks/cow/";
 import { getPoolUrl } from "~~/hooks/cow/getPoolUrl";
 import { PoolCreationState } from "~~/hooks/cow/usePoolCreationState";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useApproveToken, useReadToken } from "~~/hooks/token";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 interface ManagePoolCreationProps {
   state: PoolCreationState;
@@ -119,7 +119,7 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
 
   return (
     <>
-      <div className="bg-base-200 p-7 rounded-xl w-full sm:w-[555px] flex flex-grow">
+      <div className="bg-base-200 p-7 rounded-xl w-full sm:w-[555px] flex flex-grow shadow-lg">
         <div className="flex flex-col items-center gap-4 w-full">
           <h5 className="text-xl md:text-2xl font-bold">Pool preview</h5>
           <div className="w-full">
@@ -133,100 +133,91 @@ export const PoolCreation = ({ state, clearState }: ManagePoolCreationProps) =>
           <TextField label="Pool symbol:" value={state.poolSymbol} isDisabled={true} />
         </div>
       </div>
-      <StepsDisplay currentStep={currentStep} />
+      {currentStep < 6 && <StepsDisplay currentStep={currentStep} />}
 
-      {currentStep === 6 && (
+      {pool && currentStep === 6 && (
         <>
+          <div className="bg-base-200 w-full py-4 rounded-xl shadow-md text-center sm:text-lg overflow-hidden">
+            {pool.address}
+          </div>
           <Alert type="success">
-            You CoW AMM pool was successfully created! To view your pool, go to the{" "}
-            <Link
-              className="link"
-              rel="noopener noreferrer"
-              target="_blank"
-              href={getPoolUrl(state.chainId, pool?.address || "")}
-            >
-              Balancer app
-            </Link>
-            . Because of caching, it may take a few minutes for the pool to appear in the UI.
+            You CoW AMM pool was successfully created! Because of caching, it may take a few minutes for the pool to
+            appear in the Balancer app
           </Alert>
 
-          <div className="min-w-96 px-5">
-            <Link
-              className={`flex flex-col items-center justify-center text-lg w-full rounded-xl h-[50px] font-bold text-neutral-700 bg-gradient-to-r from-violet-400 via-orange-100 to-orange-300 hover:from-violet-300 hover:via-orange-100 hover:to-orange-400`}
-              rel="noopener noreferrer"
-              target="_blank"
-              href={getPoolUrl(state.chainId, pool?.address || "")}
-            >
-              View My Pool
-            </Link>
+          <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>
         </>
       )}
 
       {isWrongNetwork && <Alert type="error">You&apos;re connected to the wrong network</Alert>}
 
-      <div className="min-w-96 px-5">
-        {(() => {
-          switch (currentStep) {
-            case 1:
-              return (
-                <TransactionButton
-                  title="Create Pool"
-                  isPending={isCreatePending}
-                  isDisabled={isCreatePending || isWrongNetwork}
-                  onClick={handleCreatePool}
-                />
-              );
-            case 2:
-              return (
-                <TransactionButton
-                  title="Approve"
-                  isPending={isApprovePending}
-                  isDisabled={isApprovePending || isWrongNetwork}
-                  onClick={handleApproveTokens}
-                />
-              );
-            case 3:
-              return (
-                <TransactionButton
-                  title="Add Liquidity"
-                  isPending={isBindPending}
-                  isDisabled={isBindPending || isWrongNetwork}
-                  onClick={handleBindTokens}
-                />
-              );
-            case 4:
-              return (
-                <TransactionButton
-                  title="Set Swap Fee"
-                  onClick={handleSetSwapFee}
-                  isPending={isSetSwapFeePending}
-                  isDisabled={isSetSwapFeePending || isWrongNetwork}
-                />
-              );
-            case 5:
-              return (
-                <TransactionButton
-                  title="Finalize"
-                  onClick={handleFinalize}
-                  isPending={isFinalizePending}
-                  isDisabled={isFinalizePending || isWrongNetwork}
-                />
-              );
-            case 6:
-              return (
-                <TransactionButton
-                  title="Create another pool"
-                  onClick={clearState}
-                  isPending={false}
-                  isDisabled={false}
-                />
-              );
-            default:
-              return null;
-          }
-        })()}
-      </div>
+      {(() => {
+        switch (currentStep) {
+          case 1:
+            return (
+              <TransactionButton
+                title="Create Pool"
+                isPending={isCreatePending}
+                isDisabled={isCreatePending || isWrongNetwork}
+                onClick={handleCreatePool}
+              />
+            );
+          case 2:
+            return (
+              <TransactionButton
+                title="Approve"
+                isPending={isApprovePending}
+                isDisabled={isApprovePending || isWrongNetwork}
+                onClick={handleApproveTokens}
+              />
+            );
+          case 3:
+            return (
+              <TransactionButton
+                title="Add Liquidity"
+                isPending={isBindPending}
+                isDisabled={isBindPending || isWrongNetwork}
+                onClick={handleBindTokens}
+              />
+            );
+          case 4:
+            return (
+              <TransactionButton
+                title="Set Swap Fee"
+                onClick={handleSetSwapFee}
+                isPending={isSetSwapFeePending}
+                isDisabled={isSetSwapFeePending || isWrongNetwork}
+              />
+            );
+          case 5:
+            return (
+              <TransactionButton
+                title="Finalize"
+                onClick={handleFinalize}
+                isPending={isFinalizePending}
+                isDisabled={isFinalizePending || isWrongNetwork}
+              />
+            );
+          case 6:
+            return (
+              <TransactionButton
+                title="Create Another Pool"
+                onClick={clearState}
+                isPending={false}
+                isDisabled={false}
+              />
+            );
+          default:
+            return null;
+        }
+      })()}
+
       {txError && (
         <Alert type="error">
           <div className="flex items-center gap-2">

packages/nextjs/app/cow/_components/StepsDisplay.tsx

@@ -3,7 +3,7 @@
  */
 export const StepsDisplay = ({ currentStep }: { currentStep: number }) => {
   return (
-    <ul className="steps steps-vertical sm:steps-horizontal sm:w-[555px] bg-base-200 py-4 rounded-xl">
+    <ul className="steps steps-vertical sm:steps-horizontal sm:w-[555px] bg-base-200 py-4 rounded-xl shadow-md">
       <li className="px-5 sm:px-0 step step-accent">Create </li>
       <li className={`px-5 sm:px-0 step ${currentStep > 1 && "step-accent"}`}>Approve </li>
       <li className={`px-5 sm:px-0 step ${currentStep > 2 && "step-accent"}`}>Add Liquidity</li>

packages/nextjs/app/cow/page.tsx

@@ -11,11 +11,13 @@ const CowAmm: NextPage = () => {
 
   return (
     <div className="flex-grow bg-base-300">
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="flex items-center flex-col flex-grow py-10 px-5 lg:px-10 gap-7">
-          <h1 className="text-2xl md:text-4xl font-bold">Create a CoW AMM Pool</h1>
-          {!persistedState && <PoolConfiguration />}
-          {persistedState && <PoolCreation state={persistedState} clearState={clearPersistedState} />}
+      <div className="flex justify-center px-5">
+        <div className="w-full sm:w-[555px]">
+          <div className="flex items-center flex-col flex-grow py-10 gap-6">
+            <h1 className="text-2xl md:text-4xl font-bold">Create a CoW AMM Pool</h1>
+            {!persistedState && <PoolConfiguration />}
+            {persistedState && <PoolCreation state={persistedState} clearState={clearPersistedState} />}
+          </div>
         </div>
       </div>
     </div>

packages/nextjs/components/Header.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
-import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
 type HeaderMenuLink = {
@@ -64,7 +64,7 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-300 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2 border border-b-2 border-base-200">
+    <div className="sticky lg:static top-0 navbar bg-base-300 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -100,11 +100,13 @@ export const Header = () => {
           <HeaderMenuLinks />
         </ul>
       </div>
-      <div className="navbar-end flex-grow mr-4">
+      <div className="navbar-end flex-grow mr-4 flex gap-4">
         <SwitchTheme className={`pointer-events-auto`} />
 
         <RainbowKitCustomConnectButton />
-        {/* <FaucetButton /> */}
+        <div className="hidden sm:flex">
+          <FaucetButton />
+        </div>
       </div>
     </div>
   );

packages/nextjs/components/common/Alert.tsx

@@ -6,19 +6,23 @@ interface AlertProps {
 export const Alert: React.FC<AlertProps> = ({ children, type }) => {
   let bgColor;
   let borderColor;
+  // let textColor;
 
   if (type === "error") {
     bgColor = "bg-[#d64e4e2b]";
     borderColor = "border-red-500";
+    // textColor = "text-red-500";
   } else if (type === "warning") {
     bgColor = "bg-[#fb923c40]";
     borderColor = "border-orange-400";
+    // textColor = "text-orange-400";
   } else if (type === "success") {
     bgColor = "bg-[#15803d33]";
     borderColor = "border-green-500";
+    // textColor = "text-green-400";
   }
   return (
-    <div className={`${bgColor} border ${borderColor} rounded-lg p-3 overflow-auto  w-full sm:w-[555px] `}>
+    <div className={`${bgColor} border ${borderColor}  rounded-lg p-3 overflow-auto w-full`}>
       <div>{children}</div>
     </div>
   );

packages/nextjs/components/common/ExternalLinkButton.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+
+export const ExternalLinkButton = ({ href, text }: { href: string; text: string }) => {
+  const { resolvedTheme } = useTheme();
+  const textColor = resolvedTheme === "dark" ? "text-violet-300" : "text-violet-700";
+  return (
+    <div className="w-full">
+      <Link
+        className={`flex items-center justify-center gap-3 text-lg w-full rounded-xl h-[50px] border font-semibold ${textColor} border-violet-400 bg-[#8b5cf650] hover:bg-[#6d28d950]`}
+        // className={`flex items-center justify-center gap-3 text-lg w-full rounded-xl h-[50px] font-semibold ${textColor} bg-gradient-to-b from-custom-beige-start to-custom-beige-end to-100%">
+        rel="noopener noreferrer"
+        target="_blank"
+        href={href}
+      >
+        {text}
+        <ArrowTopRightOnSquareIcon className="w-5 h-5 mb-0.5" />
+      </Link>
+    </div>
+  );
+};

packages/nextjs/components/common/TextField.tsx

@@ -18,7 +18,7 @@ export const TextField: React.FC<TextFieldProps> = ({ label, placeholder, value,
         value={value}
         onChange={onChange}
         disabled={isDisabled}
-        className="w-full input rounded-xl bg-base-300 disabled:text-base-content disabled:bg-base-300 px-5 h-[55px] text-lg"
+        className="shadow-md rounded-xl w-full input bg-base-300 disabled:text-base-content disabled:bg-base-300 px-5 h-[55px] text-lg"
       />
     </div>
   );

packages/nextjs/components/common/TokenField.tsx

@@ -43,7 +43,7 @@ export const TokenField: React.FC<TokenFieldProps> = ({
 
   return (
     <>
-      <div className="relative w-full">
+      <div className="relative w-full shadow-md rounded-xl">
         <input
           disabled={isDisabled}
           type="number"

packages/nextjs/components/common/TransactionButton.tsx

@@ -16,7 +16,7 @@ export const TransactionButton = ({
     <button
       disabled={isDisabled}
       onClick={onClick}
-      className={`flex flex-col items-center justify-center text-lg w-full rounded-xl h-[50px] font-bold text-neutral-700 ${isDisabled ? "bg-neutral-500" : gradient}`}
+      className={`shadow-lg flex flex-col items-center justify-center text-lg w-full sm:w-80 rounded-xl h-[50px] font-bold text-neutral-700 ${isDisabled ? "bg-neutral-500" : gradient}`}
     >
       {isPending ? <span className="loading loading-bars loading-sm"></span> : title}
     </button>

packages/nextjs/components/common/index.tsx

@@ -4,3 +4,4 @@ export * from "./TransactionButton";
 export * from "./Alert";
 export * from "./TextField";
 export * from "./TokenImage";
+export * from "./ExternalLinkButton";

packages/nextjs/components/scaffold-eth/FaucetButton.tsx

@@ -56,14 +56,14 @@ export const FaucetButton = () => {
     <div
       className={
         !isBalanceZero
-          ? "ml-1"
-          : "ml-1 tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
+          ? ""
+          : "tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button className="btn btn-secondary px-4 rounded-xl" onClick={sendETH} disabled={loading}>
         {!loading ? (
-          <BanknotesIcon className="h-4 w-4" />
+          <BanknotesIcon className="h-5 w-5" />
         ) : (
           <span className="loading loading-spinner loading-xs"></span>
         )}