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">
@@ -210,7 +266,6 @@ const TransactionDialogContent: FC<Props> = ({
  </p>
  )}
  </div>
-
  {route.rawRoute.chain_ids.length > 1 && (
  <div className="bg-red-50 text-red-400 rounded-md">
  <button

src/config/index.ts

@@ -1,4 +1,4 @@
-export const IGNORE_CHAINS = ["agoric", "8ball", "akashnet-2"];
+export const IGNORE_CHAINS = ["agoric", "8ball"];
 
 export interface ChainConfig {
  id: string;

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}

src/solve/form.ts

@@ -47,6 +47,8 @@ import { SkipClient, MsgsRequest } from "./client";
 import { trackRoute } from "@/analytics";
 import { KeplrClient, KeplrExtensionWallet } from "@cosmos-kit/keplr-extension";
 import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";
+import { useQuery } from "@tanstack/react-query";
+import { getNumberOfTransactionsFromRoute } from "./utils";
 import Long from "long";
 import {
  makeSignDoc as makeSignDocAmino,
@@ -246,25 +248,17 @@ export function useSolveForm() {
  routeResponse,
  ]);
 
- const numberOfTransactions = useMemo(() => {
- if (!routeResponse) {
- return 0;
- }
-
- let n = 1;
-
- routeResponse.operations.forEach((hop, i) => {
- if (isSwapOperation(hop)) {
- return;
+ const { data: numberOfTransactions } = useQuery({
+ queryKey: ["solve-number-of-transactions", routeResponse],
+ queryFn: () => {
+ if (!routeResponse) {
+ return 0;
  }
 
- if (i !== 0 && !hop.transfer.pfm_enabled) {
- n += 1;
- }
- });
-
- return n;
- }, [routeResponse]);
+ return getNumberOfTransactionsFromRoute(routeResponse);
+ },
+ enabled: !!routeResponse,
+ });
 
  const route = useMemo(() => {
  if (
@@ -287,7 +281,7 @@ export function useSolveForm() {
  destinationAsset: formValues.destinationAsset,
  destinationChain: formValues.destinationChain,
  operations: routeResponse?.operations ?? [],
- transactionCount: numberOfTransactions,
+ transactionCount: numberOfTransactions ?? 0,
  actionType,
  rawRoute: routeResponse,
  };
@@ -345,7 +339,7 @@ export function useSolveForm() {
  setFormValues,
  routeLoading,
  isError,
- numberOfTransactions,
+ numberOfTransactions: numberOfTransactions ?? 0,
  route,
  insufficientBalance,
  };

src/solve/utils.ts

@@ -1,3 +1,6 @@
+import { toBech32 } from "@cosmjs/encoding";
+import { getChainByID } from "@/utils/utils";
+import { MsgsRequest, RouteResponse, SkipClient } from "./client";
 import { Asset, AssetWithMetadata } from "./types";
 
 export function assetHasMetadata(asset: Asset) {
@@ -27,3 +30,35 @@ export function isAssetWithMetadata(asset: Asset): asset is AssetWithMetadata {
 export function filterAssetsWithMetadata(assets: Asset[]) {
  return assets.filter(isAssetWithMetadata);
 }
+
+export async function getNumberOfTransactionsFromRoute(route: RouteResponse) {
+ const userAddresses: Record<string, string> = {};
+ for (const chainID of route.chain_ids) {
+ const chain = getChainByID(chainID);
+
+ // fake address
+ userAddresses[chainID] = toBech32(
+ chain.bech32_prefix,
+ Uint8Array.from(Array.from({ length: 20 }))
+ );
+ }
+
+ const msgRequest: MsgsRequest = {
+ source_asset_denom: route.source_asset_denom,
+ source_asset_chain_id: route.source_asset_chain_id,
+ dest_asset_denom: route.dest_asset_denom,
+ dest_asset_chain_id: route.dest_asset_chain_id,
+ amount_in: route.amount_in,
+ operations: route.operations,
+
+ estimated_amount_out: route.estimated_amount_out,
+ chain_ids_to_addresses: userAddresses,
+ slippage_tolerance_percent: "0.05",
+ };
+
+ const skipClient = new SkipClient();
+
+ const msgsResponse = await skipClient.fungible.getMessages(msgRequest);
+
+ return msgsResponse.msgs.length;
+}

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: {