Skip to content

Commit

Permalink
display toast on error
Browse files Browse the repository at this point in the history
  • Loading branch information
@thal0x
thal0x committed Jul 5, 2023
1 parent 55f66a7 commit a98c891
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 98 deletions.
190 changes: 108 additions & 82 deletions src/components/TransactionDialog/TransactionDialogContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ArrowLeftIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
import { FC, useState } from "react";
import { FC, Fragment, useState } from "react";
import RouteDisplay from "../RouteDisplay";
import { Route } from ".";
import { executeRoute } from "@/solve/form";
import Toast from "@/elements/Toast";

interface Props {
route: Route;
Expand All @@ -12,6 +13,9 @@ interface Props {
const TransactionDialogContent: FC<Props> = ({ route, onClose }) => {
const [transacting, setTransacting] = useState(false);

const [isError, setIsError] = useState(false);
const [txError, setTxError] = useState<string | null>(null);

const [txStatuses, setTxStatuses] = useState(() =>
Array.from({ length: route.transactionCount }, () => "INIT")
);
Expand All @@ -22,58 +26,114 @@ const TransactionDialogContent: FC<Props> = ({ route, onClose }) => {
try {
setTxStatuses(["PENDING", ...txStatuses.slice(1)]);

await executeRoute(route, (_, i) => {
setTxStatuses((statuses) => {
const newStatuses = [...statuses];
newStatuses[i] = "SUCCESS";
await executeRoute(
route,
(_, i) => {
setTxStatuses((statuses) => {
const newStatuses = [...statuses];
newStatuses[i] = "SUCCESS";

if (i < statuses.length - 1) {
newStatuses[i + 1] = "PENDING";
}

return newStatuses;
});
},
(error: any) => {
setTxError(error.message);
setIsError(true);

if (i < statuses.length - 1) {
newStatuses[i + 1] = "PENDING";
}
setTxStatuses((statuses) => {
const newStatuses = [...statuses];

return newStatuses;
});
});
return newStatuses.map((status) => {
if (status === "PENDING") {
return "INIT";
}

return status;
});
});
}
);
} finally {
setTransacting(false);
}
};

return (
<div className="flex flex-col h-full px-4 py-6 space-y-6 overflow-y-auto scrollbar-hide">
<div>
<div className="flex items-center gap-4">
<Fragment>
<div className="flex flex-col h-full px-4 py-6 space-y-6 overflow-y-auto scrollbar-hide">
<div>
<div className="flex items-center gap-4">
<button
className="hover:bg-neutral-100 w-8 h-8 rounded-full flex items-center justify-center transition-colors"
onClick={onClose}
>
<ArrowLeftIcon className="w-6 h-6" />
</button>
<p className="font-bold text-xl">Transaction Preview</p>
</div>
</div>
<div className="border border-neutral-300 rounded-xl p-4">
<RouteDisplay route={route} />
</div>
<div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
<p className="flex-1">
This route requires{" "}
<span className="text-white">
{route.transactionCount} Transaction
{route.transactionCount > 1 ? "s" : ""}
</span>{" "}
to complete
</p>
</div>
<div className="flex-1 space-y-6">
{txStatuses.map((status, i) => (
<div key={`tx-${i}`} className="flex items-center gap-4">
{status === "INIT" && (
<CheckCircleIcon className="text-neutral-300 w-7 h-7" />
)}
{status === "PENDING" && (
<svg
className="animate-spin h-7 w-7 inline-block text-neutral-300"
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"
strokeWidth="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>
)}
{status === "SUCCESS" && (
<CheckCircleIcon className="text-emerald-400 w-7 h-7" />
)}
<div>
<p className="font-semibold">Transaction {i + 1}</p>
</div>
</div>
))}
</div>
<div>
<button
className="hover:bg-neutral-100 w-8 h-8 rounded-full flex items-center justify-center transition-colors"
onClick={onClose}
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"
onClick={onSubmit}
>
<ArrowLeftIcon className="w-6 h-6" />
</button>
<p className="font-bold text-xl">Transaction Preview</p>
</div>
</div>
<div className="border border-neutral-300 rounded-xl p-4">
<RouteDisplay route={route} />
</div>
<div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
<p className="flex-1">
This route requires{" "}
<span className="text-white">
{route.transactionCount} Transaction
{route.transactionCount > 1 ? "s" : ""}
</span>{" "}
to complete
</p>
</div>
<div className="flex-1 space-y-6">
{txStatuses.map((status, i) => (
<div key={`tx-${i}`} className="flex items-center gap-4">
{status === "INIT" && (
<CheckCircleIcon className="text-neutral-300 w-7 h-7" />
)}
{status === "PENDING" && (
{transacting ? (
<svg
className="animate-spin h-7 w-7 inline-block text-neutral-300"
className="animate-spin h-4 w-4 inline-block text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -92,48 +152,14 @@ const TransactionDialogContent: FC<Props> = ({ route, onClose }) => {
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>
) : (
<span>Submit</span>
)}
{status === "SUCCESS" && (
<CheckCircleIcon className="text-emerald-400 w-7 h-7" />
)}
<div>
<p className="font-semibold">Transaction {i + 1}</p>
</div>
</div>
))}
</div>
<div>
<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"
onClick={onSubmit}
>
{transacting ? (
<svg
className="animate-spin h-4 w-4 inline-block 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"
strokeWidth="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>
) : (
<span>Submit</span>
)}
</button>
</button>
</div>
</div>
</div>
<Toast open={isError} setOpen={setIsError} description={txError ?? ""} />
</Fragment>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default function App({ Component, pageProps }: AppProps) {
<MainLayout>
<Component {...pageProps} />
</MainLayout>
<RadixToast.Viewport className="w-[390px] max-w-[100vw] flex flex-col gap-2 p-6 fixed bottom-0 right-0" />
<RadixToast.Viewport className="w-[390px] max-w-[100vw] flex flex-col gap-2 p-6 fixed bottom-0 right-0 z-[999999]" />
</RadixToast.ToastProvider>
</AssetsProvider>
</ChainsProvider>
Expand Down
37 changes: 22 additions & 15 deletions src/solve/form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,22 +310,29 @@ export function useSolveForm() {

export async function executeRoute(
route: Route,
onTxSuccess: (tx: any, index: number) => void
onTxSuccess: (tx: any, index: number) => void,
onError: (error: any) => void
) {
if (route.actionType === "SWAP") {
await executeSwapRoute(route.data as SwapRouteResponse, onTxSuccess);
}

if (route.actionType === "TRANSFER") {
await executeTransferRoute(
ethers.parseUnits(route.amountIn, route.sourceAsset.decimals).toString(),
route.sourceAsset,
route.sourceChain,
route.destinationAsset,
route.destinationChain,
route.data as IBCHop[],
onTxSuccess
);
try {
if (route.actionType === "SWAP") {
await executeSwapRoute(route.data as SwapRouteResponse, onTxSuccess);
}

if (route.actionType === "TRANSFER") {
await executeTransferRoute(
ethers
.parseUnits(route.amountIn, route.sourceAsset.decimals)
.toString(),
route.sourceAsset,
route.sourceChain,
route.destinationAsset,
route.destinationChain,
route.data as IBCHop[],
onTxSuccess
);
}
} catch (e) {
onError(e);
}
}

Expand Down
2 changes: 2 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ module.exports = {
"text-blue-400",
"bg-emerald-400/10",
"text-emerald-400",
"border-rose-500",
"border-l-8",
],
theme: {
extend: {
Expand Down

1 comment on commit a98c891

@vercel
Copy link

@vercel vercel bot commented on a98c891 Jul 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ibc-dot-fun – ./

ibc-dot-fun-git-main-skip-protocol.vercel.app
ibc-dot-fun-skip-protocol.vercel.app
ibc-dot-fun.vercel.app
www.ibc.fun
ibc.fun

Please sign in to comment.