make tx success more clear

src/components/TransactionDialog/TransactionDialogContent.tsx

@@ -6,6 +6,50 @@ import { executeRoute } from "@/solve/form";
 import RouteDisplay from "../RouteDisplay";
 import { Route } from ".";
 import { useSkipClient } from "@/solve";
+import { useToast } from "@/context/toast";
+
+const TransactionSuccessView: FC<{ route: Route; onClose: () => void }> = ({
+ route,
+ onClose,
+}) => {
+ return (
+ <div className="flex flex-col items-center h-full px-4 py-6 pt-28 overflow-y-auto scrollbar-hide">
+ <div className="text-emerald-400">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ className="w-[100px] h-[100px]"
+ >
+ <path
+ fillRule="evenodd"
+ d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+ clipRule="evenodd"
+ />
+ </svg>
+ </div>
+ <div>
+ <p className="font-bold text-3xl mb-4">
+ {route.rawRoute.does_swap ? "Swap" : "Transfer"} Successful
+ </p>
+ </div>
+ <p className="font-medium text-neutral-400 pb-8 flex-1 text-center">
+ {route.rawRoute.does_swap &&
+ `Successfully swapped ${route.sourceAsset.symbol} for ${route.destinationAsset.symbol}`}
+ {!route.rawRoute.does_swap &&
+ `Successfully transfered ${route.sourceAsset.symbol} from ${route.sourceChain.prettyName} to ${route.destinationChain.prettyName}`}
+ </p>
+ <div className="w-full">
+ <button
+ className="bg-[#FF486E] text-white font-semibold py-4 rounded-md w-full transition-transform enabled:hover:scale-105 enabled:hover:rotate-1 disabled:cursor-not-allowed disabled:opacity-75 outline-none"
+ onClick={onClose}
+ >
+ {route.rawRoute.does_swap ? "Swap" : "Transfer"} Again
+ </button>
+ </div>
+ </div>
+ );
+};
 
 interface Props {
  route: Route;
@@ -20,6 +64,8 @@ const TransactionDialogContent: FC<Props> = ({
 }) => {
  const skipClient = useSkipClient();
 
+ const { toast } = useToast();
+
  const [transacting, setTransacting] = useState(false);
 
  const [isError, setIsError] = useState(false);
@@ -103,12 +149,22 @@ const TransactionDialogContent: FC<Props> = ({
  });
  }
  );
+
+ toast(
+ "Transaction Successful",
+ "Your transaction was successful",
+ "success"
+ );
+ setTxComplete(true);
  } finally {
  setTransacting(false);
- setTxComplete(true);
  }
  };
 
+ if (txComplete) {
+ return <TransactionSuccessView route={route} onClose={onClose} />;
+ }
+
  return (
  <Fragment>
  <div className="flex flex-col h-full px-4 py-6 space-y-6 overflow-y-auto scrollbar-hide">

src/context/toast.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 
 interface ToastContext {
- toast: (title: string, message: string) => void;
+ toast: (title: string, message: string, type: "success" | "error") => void;
 }
 
 export const ToastContext = createContext<ToastContext>({
@@ -18,13 +18,18 @@ export const ToastContext = createContext<ToastContext>({
 interface ToastConfig {
  title: string;
  message: string;
+ type: "success" | "error";
 }
 
 export const ToastProvider: FC<PropsWithChildren> = ({ children }) => {
  const [toasts, setToasts] = useState<ToastConfig[]>([]);
 
- function addToast(title: string, message: string) {
- setToasts((toasts) => [...toasts, { title, message }]);
+ function addToast(
+ title: string,
+ message: string,
+ type: "success" | "error" = "error"
+ ) {
+ setToasts((toasts) => [...toasts, { title, message, type }]);
  }
 
  return (
@@ -35,6 +40,7 @@ export const ToastProvider: FC<PropsWithChildren> = ({ children }) => {
  key={`toast-${index}`}
  title={toast.title}
  description={toast.message}
+ type={toast.type}
  />
  ))}
  </ToastContext.Provider>

src/elements/Toast.tsx

@@ -1,11 +1,13 @@
 import { FC, Fragment } from "react";
 import * as RadixToast from "@radix-ui/react-toast";
+import { type } from "os";
 
 interface Props {
  open?: boolean;
  setOpen?: (open: boolean) => void;
  title?: string;
  description?: string;
+ type?: "success" | "error";
 }
 
 const DEFAULT_TITLE = "Uh oh! Something went wrong.";
@@ -16,11 +18,14 @@ const Toast: FC<Props> = ({
  setOpen,
  title = DEFAULT_TITLE,
  description = DEFAULT_DESCRIPTION,
+ type = "error",
 }) => {
  return (
  <Fragment>
  <RadixToast.Root
- className="ToastRoot bg-white rounded-md shadow p-4 border-l-8 border-rose-500 text-sm"
+ className={`ToastRoot bg-white rounded-md shadow p-4 border-l-8 ${
+ type === "success" ? "border-emerald-500" : "border-rose-500"
+ } text-sm`}
  open={open}
  onOpenChange={setOpen}
  duration={5000}

tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
  "bg-emerald-400/10",
  "text-emerald-400",
  "border-rose-500",
+ "border-emerald-500",
  "border-l-8",
  ],
  theme: {