fix tx confirmation state - add various listing parts

BibliothecaDAO · Dec 13, 2023 · 5d61952 · 5d61952
1 parent 96afb5e
commit 5d61952
Show file tree

Hide file tree

Showing 19 changed files with 353 additions and 148 deletions.
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -15,24 +15,24 @@
   },
   "dependencies": {
     "@expo/metro-config": "^0.10.7",
-    "@shopify/flash-list": "1.6.1",
-    "@tanstack/react-query": "4.35.7",
+    "@shopify/flash-list": "1.6.3",
+    "@tanstack/react-query": "5.13.4",
     "@trpc/client": "^10.44.1",
     "@trpc/react-query": "^10.44.1",
     "@trpc/server": "^10.44.1",
-    "expo": "^49.0.13",
+    "expo": "^49.0.21",
     "expo-constants": "~14.4.2",
     "expo-linking": "~6.0.0",
-    "expo-router": "2.0.9",
+    "expo-router": "2.0.14",
     "expo-splash-screen": "~0.22.0",
     "expo-status-bar": "~1.7.1",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "~2.13.3",
-    "react-native-safe-area-context": "4.7.2",
-    "react-native-screens": "~3.26.0",
+    "react-native": "0.73.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-safe-area-context": "4.8.0",
+    "react-native-screens": "~3.29.0",
     "superjson": "2.2.1"
   },
   "devDependencies": {
@@ -41,12 +41,12 @@
     "@realms-world/prettier-config": "workspace:*",
     "@realms-world/tailwind-config": "workspace:*",
     "@realms-world/tsconfig": "workspace:*",
-    "@babel/core": "^7.23.5",
-    "@babel/preset-env": "^7.23.5",
-    "@babel/runtime": "^7.23.5",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/runtime": "^7.23.6",
     "@expo/config-plugins": "^7.2.5",
     "@types/babel__core": "^7.20.5",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.45",
     "eslint": "^8.55.0",
     "prettier": "^3.1.1",
     "tailwindcss": "3.3.6",

diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -18,8 +18,8 @@
     "@emotion/styled": "^11.11.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@mui/material": "^5.14.20",
-    "@mui/styles": "^5.14.20",
+    "@mui/material": "^5.15.0",
+    "@mui/styles": "^5.15.0",
     "@next/mdx": "^14.0.4",
     "@realms-world/api": "workspace:*",
     "@realms-world/auth": "workspace:*",
@@ -30,8 +30,8 @@
     "@realms-world/ui": "workspace:*",
     "@realms-world/utils": "workspace:*",
     "@reservoir0x/reservoir-kit-ui": "^1.21.0",
-    "@starknet-react/chains": "^0.1.2",
-    "@starknet-react/core": "^2.1.3",
+    "@starknet-react/chains": "^0.1.3",
+    "@starknet-react/core": "^2.1.4",
     "@starkware-industries/commons-js-enums": "^1.2.0",
     "@starkware-industries/commons-js-utils": "^1.2.2",
     "@svgr/webpack": "^8.1.0",
@@ -49,7 +49,7 @@
     "embla-carousel-autoplay": "8.0.0-rc15",
     "embla-carousel-react": "8.0.0-rc15",
     "framer-motion": "^10.16.16",
-    "inngest": "^3.7.0",
+    "inngest": "^3.7.1",
     "lodash": "4.17.21",
     "lucide-react": "^0.294.0",
     "next": "^14.0.4",
@@ -59,7 +59,7 @@
     "starknetkit": "^1.0.22",
     "superjson": "2.2.1",
     "viem": "^1.19.13",
-    "wagmi": "1.4.10",
+    "wagmi": "1.4.11",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -69,7 +69,7 @@
     "@realms-world/tsconfig": "workspace:*",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20.10.4",
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.55.0",

diff --git a/apps/nextjs/src/app/collection/ERC721MarketplaceItem.tsx b/apps/nextjs/src/app/collection/ERC721MarketplaceItem.tsx
@@ -11,7 +11,7 @@ interface Props {
   img?: string;
   name?: string;
   collection: string;
-  price?: bigint;
+  price?: number;
   usdPrice?: number | string;
   expires?: string;
   warning?: string;
@@ -114,11 +114,7 @@ const ERC721MarketplaceItem: FC<Props> = ({
             <span className={isUnavailable ? "subtle" : "base"}>--</span>
           )}
           {usdPrice ? (
-            <span className="text-xs">
-              {formatBigInt(usdPrice, 3)
-                .toLocaleString()
-                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-            </span>
+            <span className="text-xs">{formatBN(usdPrice, 4, 18)}</span>
           ) : null}
           {warning && <span className="text-red">{warning}</span>}
         </div>

diff --git a/apps/nextjs/src/app/collection/[id]/(list)/L2ERC721Card.tsx b/apps/nextjs/src/app/collection/[id]/(list)/L2ERC721Card.tsx
@@ -46,7 +46,7 @@ export const L2ERC721Card = ({
           token={token}
           isGrid={isGrid}
           starkName={useStarkDisplayName(
-            token.transfers[0]?.toAddress ?? token.minter ?? "",
+            token.transfers?.[0]?.toAddress ?? token.minter ?? "",
           )}
         />
       </Link>

diff --git a/apps/nextjs/src/app/collection/marketplace/cancel/ListCancelModal.tsx b/apps/nextjs/src/app/collection/marketplace/cancel/ListCancelModal.tsx
@@ -183,7 +183,7 @@ export function ListCancelModal({
                   </>
                     )*/}
                   <Button disabled={true} className="m-2">
-                    <Loader />
+                    <Loader className="animate-spin" />
                     {stepData?.currentStepItem.txHashes
                       ? copy.ctaAwaitingValidation
                       : copy.ctaAwaitingApproval}

diff --git a/apps/nextjs/src/app/collection/marketplace/cancel/ListCancelModalRender.tsx b/apps/nextjs/src/app/collection/marketplace/cancel/ListCancelModalRender.tsx
@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from "react";
 import React, { useCallback, useEffect, useState } from "react";
 import { NETWORK_NAME } from "@/constants/env";
-import { useContractWrite } from "@starknet-react/core";
+import { useContractWrite, useWaitForTransaction } from "@starknet-react/core";
 
 import type { RouterOutputs } from "@realms-world/api";
 import {
@@ -10,7 +10,7 @@ import {
 } from "@realms-world/constants";
 import { ChainId } from "@realms-world/constants/src/Chains";
 
-import { useCoinConversion } from "../../hooks";
+//import { useCoinConversion } from "../../hooks";
 
 export enum CancelStep {
   Cancel,
@@ -21,8 +21,8 @@ export enum CancelStep {
 export interface CancelListingStepData {
   totalSteps: number;
   stepProgress: number;
-  currentStep: any; //Execute['steps'][0]
-  currentStepItem: any; // NonNullable<Execute['steps'][0]['items']>[0]
+  currentStep: any;
+  currentStepItem: any;
 }
 
 interface ChildrenProps {
@@ -36,7 +36,7 @@ interface ChildrenProps {
   usdPrice: number*/
   blockExplorerBaseUrl: string;
   blockExplorerName: string;
-  steps: any; // Execute['steps'] | null
+  steps: any;
   stepData: CancelListingStepData | null;
   setCancelStep: React.Dispatch<React.SetStateAction<CancelStep>>;
   cancelOrder: () => void;
@@ -58,7 +58,7 @@ export const ListCancelModalRender: FC<Props> = ({
   const [cancelStep, setCancelStep] = useState<CancelStep>(CancelStep.Cancel);
   const [transactionError, setTransactionError] = useState<Error | null>();
   const [stepData, setStepData] = useState<CancelListingStepData | null>(null);
-  const [steps, setSteps] = useState<any /*Execute['steps'] | null*/>(null);
+  const [steps, setSteps] = useState<any>(null);
 
   const blockExplorerBaseUrl = "https://etherscan.io";
 
@@ -75,7 +75,7 @@ export const ListCancelModalRender: FC<Props> = ({
 
   const {
     data,
-    write,
+    writeAsync,
     // isLoading: isTxSubmitting,
   } = useContractWrite({
     calls: [
@@ -88,7 +88,17 @@ export const ListCancelModalRender: FC<Props> = ({
       },
     ],
   });
-
+  const { data: transactionData, error: txErrror } = useWaitForTransaction({
+    hash: data?.transaction_hash,
+    watch: true,
+  });
+  useEffect(() => {
+    if (data?.transaction_hash) {
+      if (transactionData?.execution_status == "SUCCEEDED") {
+        setCancelStep(CancelStep.Complete);
+      }
+    }
+  }, [data, transactionData, transactionError]);
   const cancelOrder = useCallback(async () => {
     if (!listing) {
       const error = new Error("Missing list id to cancel");
@@ -98,66 +108,7 @@ export const ListCancelModalRender: FC<Props> = ({
 
     setCancelStep(CancelStep.Approving);
 
-    write();
-
-    /*client.actions
-      .cancelOrder({
-        chainId: rendererChain?.id,
-        ids: [listingId],
-        wallet,
-        onProgress: (steps: Execute["steps"]) => {
-          if (!steps) {
-            return;
-          }
-          setSteps(steps);
-
-          const executableSteps = steps.filter(
-            (step) => step.items && step.items.length > 0,
-          );
-
-          const stepCount = executableSteps.length;
-
-          let currentStepItem:
-            | NonNullable<Execute["steps"][0]["items"]>[0]
-            | undefined;
-
-          const currentStepIndex = executableSteps.findIndex((step) => {
-            currentStepItem = step.items?.find(
-              (item) => item.status === "incomplete",
-            );
-            return currentStepItem;
-          });
-
-          const currentStep =
-            currentStepIndex > -1
-              ? executableSteps[currentStepIndex]
-              : executableSteps[stepCount - 1];
-
-          if (currentStepItem) {
-            setStepData({
-              totalSteps: stepCount,
-              stepProgress: currentStepIndex,
-              currentStep,
-              currentStepItem,
-            });
-          } else if (
-            steps.every(
-              (step) =>
-                !step.items ||
-                step.items.length == 0 ||
-                step.items?.every((item) => item.status === "complete"),
-            )
-          ) {
-            setCancelStep(CancelStep.Complete);
-          }
-        },
-      })
-      .catch((error: Error) => {
-        setTransactionError(error);
-        setCancelStep(CancelStep.Cancel);
-        setStepData(null);
-        setSteps(null);
-      });*/
+    await writeAsync();
   }, [listing]);
 
   useEffect(() => {