Skip to content

Commit

Permalink
Merge pull request #3682 from osmosis-labs/connor/order-history-blinking
Browse files Browse the repository at this point in the history 
[Limit Orders - V3]: Order History Page Refactoring
  • Loading branch information
@crnbarr93
crnbarr93 authored Aug 6, 2024
2 parents 538e49c + 4acb471 commit 1e18c8e
Show file tree
Hide file tree
Showing 7 changed files with 792 additions and 676 deletions.
215 changes: 118 additions & 97 deletions packages/web/components/complex/orders-history/cells/actions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
import { CellContext } from "@tanstack/react-table";
import { MappedLimitOrder } from "@osmosis-labs/server";
import { observer } from "mobx-react-lite";
import { useCallback, useState } from "react";

import type { OrderCellData } from "~/components/complex/orders-history/columns";
import { Spinner } from "~/components/loaders";
import { t } from "~/hooks";
import { useStore } from "~/stores";

export function ActionsCell({ row }: CellContext<OrderCellData, unknown>) {
export function ActionsCell({
order,
refetch,
}: {
order: MappedLimitOrder;
refetch: () => Promise<any>;
}) {
const component = (() => {
switch (row.original.status) {
switch (order.status) {
case "open":
return <CancelButton order={row.original} />;
return <CancelButton order={order} refetch={refetch} />;
case "partiallyFilled":
// TODO: swap to cancel button for partially filled but entirely claimed orders
return <ClaimAndCloseButton order={row.original} />;
return <ClaimAndCloseButton order={order} refetch={refetch} />;
case "filled":
return (
<span className="text-body-1 text-osmoverse-300">
Expand All @@ -28,102 +33,118 @@ export function ActionsCell({ row }: CellContext<OrderCellData, unknown>) {
return <div className="flex w-full justify-end">{component}</div>;
}

const ClaimAndCloseButton = observer(({ order }: { order: OrderCellData }) => {
const { accountStore } = useStore();
const account = accountStore.getWallet(accountStore.osmosisChainId);
const [claiming, setClaiming] = useState(false);
const ClaimAndCloseButton = observer(
({
order,
refetch,
}: {
order: MappedLimitOrder;
refetch: () => Promise<any>;
}) => {
const { accountStore } = useStore();
const account = accountStore.getWallet(accountStore.osmosisChainId);
const [claiming, setClaiming] = useState(false);

const claimAndClose = useCallback(async () => {
if (!account) return;
const { tick_id, order_id, orderbookAddress } = order;
const claimMsg = {
msg: {
claim_limit: { order_id, tick_id },
},
contractAddress: orderbookAddress,
funds: [],
};
const cancelMsg = {
msg: { cancel_limit: { order_id, tick_id } },
contractAddress: orderbookAddress,
funds: [],
};
const msgs = [];
if (order.percentFilled > order.percentClaimed) {
msgs.push(claimMsg);
}
const claimAndClose = useCallback(async () => {
if (!account) return;
const { tick_id, order_id, orderbookAddress } = order;
const claimMsg = {
msg: {
claim_limit: { order_id, tick_id },
},
contractAddress: orderbookAddress,
funds: [],
};
const cancelMsg = {
msg: { cancel_limit: { order_id, tick_id } },
contractAddress: orderbookAddress,
funds: [],
};
const msgs = [];
if (order.percentFilled > order.percentClaimed) {
msgs.push(claimMsg);
}

msgs.push(cancelMsg);
msgs.push(cancelMsg);

try {
setClaiming(true);
await account.cosmwasm.sendMultiExecuteContractMsg(
"executeWasm",
msgs,
undefined
);
} catch (error) {
console.error(error);
} finally {
setClaiming(false);
}
}, [account, order]);
try {
setClaiming(true);
await account.cosmwasm.sendMultiExecuteContractMsg(
"executeWasm",
msgs,
undefined
);
await refetch();
} catch (error) {
console.error(error);
} finally {
setClaiming(false);
}
}, [account, order, refetch]);

return (
<button
className="flex h-8 items-center justify-center rounded-5xl bg-osmoverse-825 px-3 transition-colors hover:bg-osmoverse-700 disabled:opacity-50"
onClick={claimAndClose}
disabled={claiming}
>
<span className="body2 flex items-center text-wosmongton-200">
{claiming && <Spinner className="mr-2 h-2 w-2" />}
{t("limitOrders.claimAndClose")}
</span>
</button>
);
});
return (
<button
className="flex h-8 items-center justify-center rounded-5xl bg-osmoverse-825 px-3 transition-colors hover:bg-osmoverse-700 disabled:opacity-50"
onClick={claimAndClose}
disabled={claiming}
>
<span className="body2 flex items-center text-wosmongton-200">
{claiming && <Spinner className="mr-2 h-2 w-2" />}
{t("limitOrders.claimAndClose")}
</span>
</button>
);
}
);

const CancelButton = observer(({ order }: { order: OrderCellData }) => {
const { accountStore } = useStore();
const account = accountStore.getWallet(accountStore.osmosisChainId);
const [cancelling, setCancelling] = useState(false);
const CancelButton = observer(
({
order,
refetch,
}: {
order: MappedLimitOrder;
refetch: () => Promise<any>;
}) => {
const { accountStore } = useStore();
const account = accountStore.getWallet(accountStore.osmosisChainId);
const [cancelling, setCancelling] = useState(false);

const cancel = useCallback(async () => {
if (!account) return;
const { tick_id, order_id, orderbookAddress } = order;
const claimMsg = {
msg: {
cancel_limit: { order_id, tick_id },
},
contractAddress: orderbookAddress,
funds: [],
};
const cancel = useCallback(async () => {
if (!account) return;
const { tick_id, order_id, orderbookAddress } = order;
const claimMsg = {
msg: {
cancel_limit: { order_id, tick_id },
},
contractAddress: orderbookAddress,
funds: [],
};

try {
setCancelling(true);
await account.cosmwasm.sendMultiExecuteContractMsg(
"executeWasm",
[claimMsg],
undefined
);
await order.refetch();
} catch (error) {
console.error(error);
} finally {
setCancelling(false);
}
}, [account, order]);
try {
setCancelling(true);
await account.cosmwasm.sendMultiExecuteContractMsg(
"executeWasm",
[claimMsg],
undefined
);
await refetch();
} catch (error) {
console.error(error);
setCancelling(false);
}
}, [account, order, refetch]);

return (
<button
className="flex h-8 items-center justify-center rounded-5xl bg-osmoverse-825 px-3 transition-colors hover:bg-osmoverse-700 disabled:opacity-50"
onClick={cancel}
disabled={cancelling}
>
<span className="body2 flex items-center text-wosmongton-200">
{cancelling && <Spinner className="mr-2 h-2 w-2" />}
{t("limitOrders.cancel")}
</span>
</button>
);
});
return (
<button
className="flex h-8 items-center justify-center rounded-5xl bg-osmoverse-825 px-3 transition-colors hover:bg-osmoverse-700 disabled:opacity-50"
onClick={cancel}
disabled={cancelling}
>
<span className="body2 flex items-center text-wosmongton-200">
{cancelling && <Spinner className="mr-2 h-2 w-2" />}
{t("limitOrders.cancel")}
</span>
</button>
);
}
);
Loading

0 comments on commit 1e18c8e

Please sign in to comment.