Merge branch 'staging' of https://github.com/zeitgeistpm/ui

zeitgeistpm · Sep 25, 2024 · c964991 · c964991
2 parents 7dd6122 + 00cfff8
commit c964991
Show file tree

Hide file tree

Showing 34 changed files with 1,447 additions and 156 deletions.
diff --git a/components/court/DelegateButton.tsx b/components/court/DelegateButton.tsx
@@ -168,6 +168,7 @@ const DelegateButton = ({ address }: { address: string }) => {
                 </span>
               </div>
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >

diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
@@ -216,6 +216,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
               </div>
 
               <FormTransactionButton
+                loading={isLoading}
                 className="w-full max-w-[250px]"
                 disabled={formState.isValid === false || isLoading}
               >

diff --git a/components/court/ManageDelegationsForm.tsx b/components/court/ManageDelegationsForm.tsx
@@ -249,6 +249,7 @@ const ManageDelegationsForm = (props: ManageDelegationsFormProps) => {
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         className="w-full max-w-[250px]"
         disabled={
           formState.isValid === false ||

diff --git a/components/liquidity/ExitPoolFormAmm2.tsx b/components/liquidity/ExitPoolFormAmm2.tsx
@@ -245,6 +245,7 @@ const ExitPoolForm = ({
         {...register("poolSharesPercentage", { min: 0, value: "0" })}
       />
       <FormTransactionButton
+        loading={isLoading}
         disabled={formState.isValid === false || isLoading}
       >
         Exit Pool

diff --git a/components/liquidity/JoinPoolFormAmm2.tsx b/components/liquidity/JoinPoolFormAmm2.tsx
@@ -235,6 +235,7 @@ const JoinPoolForm = ({
       </div>
 
       <FormTransactionButton
+        loading={isLoading}
         disabled={
           formState.isValid === false ||
           isLoading ||

diff --git a/components/markets/BuyFullSetForm.tsx b/components/markets/BuyFullSetForm.tsx
@@ -158,7 +158,11 @@ const BuyFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Buy
         {fee && (
           <span className="block text-xs font-normal">

diff --git a/components/markets/SellFullSetForm.tsx b/components/markets/SellFullSetForm.tsx
@@ -137,7 +137,11 @@ const SellFullSetForm = ({
           </p>
         </div>
       </div>
-      <TransactionButton onClick={handleSignTransaction} disabled={disabled}>
+      <TransactionButton
+        onClick={handleSignTransaction}
+        disabled={disabled}
+        loading={isLoading}
+      >
         Confirm Sell
         {fee && (
           <span className="block text-xs font-normal">

diff --git a/components/orderbook/OrdersTable.tsx b/components/orderbook/OrdersTable.tsx
@@ -0,0 +1,152 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { InputMaybe, OrderStatus, OrderWhereInput } from "@zeitgeistpm/indexer";
+import { BaseAssetId, ZTG, getIndexOf, isRpcSdk } from "@zeitgeistpm/sdk";
+import SecondaryButton from "components/ui/SecondaryButton";
+import Table, { TableColumn, TableData } from "components/ui/Table";
+import { lookupAssetSymbol } from "lib/constants/foreign-asset";
+import {
+  ordersRootKey,
+  useOrders,
+} from "lib/hooks/queries/orderbook/useOrders";
+import { useMarketsByIds } from "lib/hooks/queries/useMarketsByIds";
+import { useExtrinsic } from "lib/hooks/useExtrinsic";
+import { useSdkv2 } from "lib/hooks/useSdkv2";
+import { useNotifications } from "lib/state/notifications";
+import { useWallet } from "lib/state/wallet";
+import { parseAssetIdString } from "lib/util/parse-asset-id";
+
+const columns: TableColumn[] = [
+  {
+    header: "Outcome",
+    accessor: "outcome",
+    type: "component",
+  },
+  {
+    header: "Side",
+    accessor: "side",
+    type: "text",
+  },
+  {
+    header: "Amount",
+    accessor: "amount",
+    type: "text",
+  },
+  {
+    header: "Price",
+    accessor: "price",
+    type: "text",
+  },
+  {
+    header: "Filled",
+    accessor: "percentageFilled",
+    type: "text",
+  },
+  {
+    header: "Status",
+    accessor: "status",
+    type: "text",
+  },
+  {
+    header: "",
+    accessor: "button",
+    type: "component",
+    width: "180px",
+  },
+];
+
+const OrdersTable = ({ where }: { where: InputMaybe<OrderWhereInput> }) => {
+  const { realAddress } = useWallet();
+  const { data: orders } = useOrders(where);
+  const { data: markets } = useMarketsByIds(
+    orders?.map((order) => ({ marketId: order.marketId })),
+  );
+
+  const tableData: TableData[] | undefined = orders?.map(
+    ({
+      side,
+      price,
+      outcomeAssetId,
+      outcomeAmount,
+      id,
+      marketId,
+      makerAddress,
+      filledPercentage,
+      status,
+    }) => {
+      const index = getIndexOf(outcomeAssetId);
+      const market = markets?.find((market) => market.marketId === marketId);
+      const outcomeName = market?.categories?.[index]?.name;
+      const baseAsset = parseAssetIdString(market?.baseAsset) as BaseAssetId;
+      const baseSymbol = lookupAssetSymbol(baseAsset);
+      const orderFilled = filledPercentage === 100;
+
+      return {
+        side: side.toUpperCase(),
+        outcome: outcomeName,
+        amount: outcomeAmount.div(ZTG).toFixed(2),
+        value: `${outcomeAmount.mul(price).div(ZTG).toFixed(3)} ${baseSymbol}`,
+        price: `${price.toFixed(3)} ${baseSymbol}`,
+        percentageFilled: `${filledPercentage.toFixed(0)}%`,
+        status: status,
+        button: (
+          <CancelOrderButton
+            orderId={id}
+            disabled={
+              realAddress !== makerAddress ||
+              orderFilled ||
+              status === OrderStatus.Removed
+            }
+          />
+        ),
+      };
+    },
+  );
+  return (
+    <div>
+      <Table columns={columns} data={tableData} showHighlight={false} />
+    </div>
+  );
+};
+
+const CancelOrderButton = ({
+  orderId,
+  disabled,
+}: {
+  orderId: string;
+  disabled: boolean;
+}) => {
+  const notificationStore = useNotifications();
+  const [sdk, id] = useSdkv2();
+  const queryClient = useQueryClient();
+
+  const {
+    isLoading,
+    isSuccess,
+    send: cancelOrder,
+  } = useExtrinsic(
+    () => {
+      if (!isRpcSdk(sdk)) return;
+      return sdk.api.tx.orderbook.removeOrder(orderId);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([id, ordersRootKey]);
+
+        notificationStore.pushNotification("Successfully cancelled order", {
+          type: "Success",
+        });
+      },
+    },
+  );
+
+  return (
+    <SecondaryButton
+      onClick={() => cancelOrder()}
+      disabled={isLoading || isSuccess || disabled}
+    >
+      Cancel Order
+    </SecondaryButton>
+  );
+};
+
+export default OrdersTable;
diff --git a/components/portfolio/DepositButton.tsx b/components/portfolio/DepositButton.tsx
@@ -235,6 +235,7 @@ const DepositModal = ({
             </span>
           </div>
           <FormTransactionButton
+            loading={isLoading}
             className="w-full max-w-[250px]"
             disabled={formState.isValid === false || isLoading}
             disableFeeCheck={true}

diff --git a/components/portfolio/TransferButton.tsx b/components/portfolio/TransferButton.tsx
@@ -298,7 +298,10 @@ const TransferModal = ({
               : ""}
           </span>
         </div>
-        <FormTransactionButton disabled={!isValid || txIsLoading}>
+        <FormTransactionButton
+          loading={txIsLoading}
+          disabled={!isValid || txIsLoading}
+        >
           Transfer
         </FormTransactionButton>
       </form>

diff --git a/components/portfolio/WithdrawButton.tsx b/components/portfolio/WithdrawButton.tsx
@@ -288,6 +288,7 @@ const WithdrawModal = ({
             <span className="ml-1 text-black">{chain?.withdrawFee}</span>
           </div>
           <FormTransactionButton
+            loading={isLoading}
             className="w-full max-w-[250px]"
             disabled={formState.isValid === false || isLoading}
           >

diff --git a/components/settings/AccountSettingsForm.tsx b/components/settings/AccountSettingsForm.tsx
@@ -155,6 +155,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
       </div>
 
       <FormTransactionButton
+        loading={isUpdating}
         disabled={!isDirty || !isValid || isUpdating || isClearing}
       >
         Set Identity