feat: add spinner and finalize styles

rabyyuson · Apr 11, 2024 · 573df96 · 573df96
1 parent 98e5646
commit 573df96
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 46 deletions.
diff --git a/components/home/index.tsx b/components/home/index.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useState } from "react";
 import SendTokenForm from "@/components/send-token-form/send-token-form";
 import {
   type BaseError,
@@ -15,9 +14,7 @@ import Notice from "@/components/send-token-form/notice";
 import Success from "@/components/send-token-form/success";
 
 export default function Home() {
-  const [isDismissed, setIsDismissed] = useState(false);
-
-  const { address } = useAccount();
+  const { address, chain } = useAccount();
   const balance = useBalance({ address });
 
   const {
@@ -37,11 +34,6 @@ export default function Home() {
     const amount = formData.get("amount") as string;
 
     sendTransaction({ to, value: parseEther(amount) });
-    setIsDismissed(false);
-  }
-
-  function handleDismissClick() {
-    setIsDismissed(true);
   }
 
   return (
@@ -53,22 +45,20 @@ export default function Home() {
           onSendTransaction={handleSendTransaction}
         />
       )}
-      {isConfirming && !isDismissed && (
+      {isConfirming && (
         <Notice
-          onDismissClick={handleDismissClick}
           message="Waiting for confirmation..."
         />
       )}
-      {isConfirmed && !isDismissed && (
+      {isConfirmed && (
         <Success
-          onDismissClick={handleDismissClick}
           message="Transaction confirmed."
           hash={hash}
+          blockExplorerUrl={chain?.blockExplorers?.default?.url}
         />
       )}
-      {error && !isDismissed && (
+      {error && (
         <Error
-          onDismissClick={handleDismissClick}
           error={(error as BaseError).shortMessage || error.message}
         />
       )}

diff --git a/components/icons/spinner.tsx b/components/icons/spinner.tsx
@@ -0,0 +1,8 @@
+export default function Spinner() {
+  return (
+    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  );
+}
diff --git a/components/send-token-form/error.tsx b/components/send-token-form/error.tsx
@@ -1,16 +1,16 @@
+import { useState } from "react";
 import XCircle from "@/components/icons/x-circle";
 import Dismiss from "@/components/send-token-form/dismiss";
 
 export default function Error({
   error,
-  onDismissClick,
 }: {
   error: string;
-  onDismissClick: () => void;
 }) {
-  return (
+  const [isDismissed, setIsDismissed] = useState(false);
+  return !isDismissed && (
     <div className="relative rounded-lg mt-5 justify-center items-center text-sm text-white p-5 bg-red-600 flex flex-row gap-2">
-      <Dismiss onDismissClick={onDismissClick} />
+      <Dismiss onDismissClick={() => { setIsDismissed(true) }} />
       <XCircle width={20} height={20} />
       {" "}
       {error}

diff --git a/components/send-token-form/notice.tsx b/components/send-token-form/notice.tsx
@@ -1,16 +1,16 @@
+import { useState } from "react";
 import Information from "@/components/icons/information";
 import Dismiss from "@/components/send-token-form/dismiss";
 
 export default function Error({
   message,
-  onDismissClick,
 }: {
   message: string;
-  onDismissClick: () => void;
 }) {
-  return (
+  const [isDismissed, setIsDismissed] = useState(false);
+  return !isDismissed && (
     <div className="relative rounded-lg mt-5 justify-center items-center text-sm text-white p-5 bg-yellow-600 flex flex-row gap-2">
-      <Dismiss onDismissClick={onDismissClick} />
+      <Dismiss onDismissClick={() => { setIsDismissed(true) }} />
       <Information />
       {" "}
       {message}

diff --git a/components/send-token-form/send-token-form.tsx b/components/send-token-form/send-token-form.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import clsx from "clsx";
+import Spinner from "@/components/icons/spinner";
 
 export default function SendTokenForm({
   balance,
@@ -17,7 +18,7 @@ export default function SendTokenForm({
     <div className="mt-5 bg-[#1a1a1a] rounded-lg p-10">
       <div className="flex flex-col items-center w-full justify-center">
         <form
-          className="w-[400px]"
+          className="md:w-[400px]"
           onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
             event.preventDefault();
 
@@ -43,7 +44,7 @@ export default function SendTokenForm({
               </div>
           </div>
           <div>
-            <div className="flex flex-row justify-between">
+            <div className="flex flex-col md:flex-row justify-between">
               <div>
                 <label className="text-white text-sm font-bold">
                   Amount
@@ -67,14 +68,20 @@ export default function SendTokenForm({
           <div className="mt-2">
             <button
               disabled={isTransactionProcessing}
-              className={clsx(
-                "w-full rounded-md py-2 px-4 bg-slate-100 border text-black",
-                {
-                  "text-slate-400": isTransactionProcessing,
-                }
-              )}
+              className="w-full rounded-md py-2 px-4 bg-purple-500 text-white"
             >
-              {isTransactionProcessing ? "Processing..." : `Send ${balance?.data?.symbol}`}
+              {isTransactionProcessing
+                ? (
+                  <>
+                    <span className="flex flex-row items-center justify-center">
+                      <Spinner />
+                      {" "}
+                      Processing...
+                    </span>
+                  </>
+                )
+                : `Send ${balance?.data?.symbol}`
+              }
             </button>
           </div>
         </form>

diff --git a/components/send-token-form/success.tsx b/components/send-token-form/success.tsx
@@ -1,25 +1,27 @@
+import { useState } from "react";
 import CheckCircle from "@/components/icons/check-circle";
 import Dismiss from "@/components/send-token-form/dismiss";
 
 export default function Success({
     message,
     hash,
-    onDismissClick,
+    blockExplorerUrl,
 }: {
     message: string;
     hash: string | undefined;
-    onDismissClick: () => void;
+    blockExplorerUrl: string | undefined;
 }) {
-    return (
-        <div className="relative rounded-lg mt-5 justify-center items-center text-sm text-white p-5 bg-green-600 flex flex-row gap-2">
-          <Dismiss onDismissClick={onDismissClick} />
-          <CheckCircle />
-          {" "}
-          {message}
-          {" "}
-          <div className="justify-left">
-            View <a className="underline m-0 p-0" href={`https://testnet.snowscan.xyz/tx/${hash}`} target="_blank">transaction</a>.
-          </div>
-        </div>
-    );
+  const [isDismissed, setIsDismissed] = useState(false);
+  return !isDismissed && (
+    <div className="relative rounded-lg mt-5 justify-center items-center text-sm text-white p-5 bg-green-600 flex flex-row gap-2">
+      <Dismiss onDismissClick={() => { setIsDismissed(true) }} />
+      <CheckCircle />
+      {" "}
+      {message}
+      {" "}
+      <div className="justify-left">
+        View <a className="underline m-0 p-0" href={`${blockExplorerUrl}/tx/${hash}`} target="_blank">transaction</a>.
+      </div>
+    </div>
+  );
 }