feat(arkmarket): fix invalid balance (#118)

- rewrite balance hook to avoid structuralSharing error (wevm/wagmi#4233) - use starknet price instead of ethereum for starknet balance in usd
ArkProjectNFTs · Sep 3, 2024 · 8ac0662 · 8ac0662
1 parent 82e8b8c
commit 8ac0662
Show file tree

Hide file tree

Showing 26 changed files with 262 additions and 281 deletions.
diff --git a/apps/arkmarket/package.json b/apps/arkmarket/package.json
@@ -19,7 +19,7 @@
     "@ark-project/react": "^1.1.1",
     "@hookform/error-message": "^2.0.1",
     "@starknet-react/chains": "^0.1.7",
-    "@starknet-react/core": "^2.8.3",
+    "@starknet-react/core": "^2.0.0",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.15.3",
@@ -32,17 +32,16 @@
     "embla-carousel-wheel-gestures": "^8.0.1",
     "framer-motion": "^11.2.6",
     "geist": "^1.2.2",
-    "get-starknet-core": "^3.2.0",
+    "get-starknet-core": "^3.3.2",
     "lucide-react": "^0.381.0",
     "moment": "^2.30.1",
     "next": "^14.2.3",
     "nuqs": "^1.18.0",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
     "react-icons": "^5.0.1",
-    "react-query": "^3.39.3",
     "react-virtuoso": "^4.7.11",
-    "starknet": "^6.9.0",
+    "starknet": "^6.11.0",
     "starknetkit": "^1.1.9",
     "superjson": "2.2.1",
     "usehooks-ts": "^3.1.0",

diff --git a/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-items-buy-now.tsx b/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-items-buy-now.tsx
@@ -58,7 +58,10 @@ export default function CollectionItemsBuyNow({
       return;
     }
 
-    if (data.value < BigInt(tokenMarketData.listing.start_amount ?? 0)) {
+    if (
+      !data ||
+      data.value < BigInt(tokenMarketData.listing.start_amount ?? 0)
+    ) {
       sonner.error("Insufficient balance");
       return;
     }

diff --git a/...ket/src/app/collection/[collectionAddress]/components/collection-items-filters-dialog.tsx b/...ket/src/app/collection/[collectionAddress]/components/collection-items-filters-dialog.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import { Button } from "@ark-market/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@ark-market/ui/dialog";

diff --git a/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx b/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing.tsx
@@ -5,9 +5,9 @@ import { useEffect, useState } from "react";
 import { useCreateAuction, useCreateListing } from "@ark-project/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAccount } from "@starknet-react/core";
+import { useQuery } from "@tanstack/react-query";
 import moment from "moment";
 import { useForm } from "react-hook-form";
-import { useQuery } from "react-query";
 import { formatEther, parseEther } from "viem";
 import * as z from "zod";
 
@@ -57,16 +57,14 @@ export function TokenActionsCreateListing({
   const { account } = useAccount();
   const [isOpen, setIsOpen] = useState(false);
   const [isAuction, setIsAuction] = useState(false);
-  const { data: collection } = useQuery(
-    ["collection", token.collection_address],
-    () =>
+  const { data: collection } = useQuery({
+    queryKey: ["collection", token.collection_address],
+    queryFn: () =>
       getCollection({
         collectionAddress: token.collection_address,
       }),
-    {
-      refetchInterval: 5_000,
-    },
-  );
+    refetchInterval: 5_000,
+  });
   const { createListing, status } = useCreateListing();
   const { create: createAuction, status: auctionStatus } = useCreateAuction();
   const { toast } = useToast();
@@ -318,9 +316,7 @@ export function TokenActionsCreateListing({
                       }}
                     >
                       <div className="absolute left-3 flex size-5 items-center justify-center rounded-xs bg-secondary">
-                        {field.value === formattedCollectionFloor && (
-                          <Check />
-                        )}
+                        {field.value === formattedCollectionFloor && <Check />}
                       </div>
                       <p>
                         Choose floor price of{" "}

diff --git a/...kmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx b/...kmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-make-offer.tsx
@@ -80,7 +80,7 @@ function TokenActionsMakeOffer({ token, small }: TokenActionsMakeOfferProps) {
       .refine(
         (val) => {
           const num = parseEther(val);
-          return num <= data.value;
+          return data && data.value >= num;
         },
         {
           message: "You don't have enough funds in your wallet",

diff --git a/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx b/...ket/src/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview.tsx
@@ -1,8 +1,7 @@
 import { parseEther } from "viem";
 
 import { cn, ellipsableStyles } from "@ark-market/ui";
-import { Ethereum } from "@ark-market/ui/icons";
-import { VerifiedIcon } from "@ark-market/ui/icons";
+import { Ethereum, VerifiedIcon } from "@ark-market/ui/icons";
 
 import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData";
 import type { CollectionToken, Token } from "~/types";

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-actions.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAccount } from "@starknet-react/core";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import type { PropsWithClassName } from "@ark-market/ui";
 import { areAddressesEqual, cn } from "@ark-market/ui";
@@ -25,18 +25,16 @@ export default function TokenActions({
   className,
 }: TokenActionsProps) {
   const { address } = useAccount();
-  const { data } = useQuery(
-    ["tokenMarketData", token.collection_address, token.token_id],
-    () =>
+  const { data } = useQuery({
+    queryKey: ["tokenMarketData", token.collection_address, token.token_id],
+    queryFn: () =>
       getTokenMarketData({
         contractAddress: token.collection_address,
         tokenId: token.token_id,
       }),
-    {
-      refetchInterval: 5_000,
-      initialData: tokenMarketData,
-    },
-  );
+    refetchInterval: 5_000,
+    initialData: tokenMarketData,
+  });
 
   const isOwner = areAddressesEqual(address, data?.owner);
 

diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-stats.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-stats.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useAccount, useStarkProfile } from "@starknet-react/core";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { formatEther } from "viem";
 
 import type { PropsWithClassName } from "@ark-market/ui";
@@ -27,29 +27,25 @@ export default function TokenStats({
   tokenMarketData,
 }: PropsWithClassName<TokenStatsProps>) {
   const { address } = useAccount();
-  const { data } = useQuery(
-    ["tokenMarketData", token.collection_address, token.token_id],
-    () =>
+  const { data } = useQuery({
+    queryKey: ["tokenMarketData", token.collection_address, token.token_id],
+    queryFn: () =>
       getTokenMarketData({
         contractAddress: token.collection_address,
         tokenId: token.token_id,
       }),
-    {
-      refetchInterval: 5_000,
-      initialData: tokenMarketData,
-    },
-  );
+    refetchInterval: 5_000,
+    initialData: tokenMarketData,
+  });
 
-  const { data: collection, isLoading } = useQuery(
-    ["collection", token.collection_address],
-    () =>
+  const { data: collection, isLoading } = useQuery({
+    queryKey: ["collection", token.collection_address],
+    queryFn: () =>
       getCollection({
         collectionAddress: token.collection_address,
       }),
-    {
-      refetchInterval: 5_000,
-    },
-  );
+    refetchInterval: 5_000,
+  });
   const { data: starkProfile } = useStarkProfile({
     address: data?.owner ?? tokenMarketData.owner,
   });

diff --git a/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx b/...arkmarket/src/app/token/[contractAddress]/[tokenId]/components/tokens-actions-buy-now.tsx
@@ -40,7 +40,10 @@ export default function TokenActionsBuyNow({
   const { toast } = useToast();
 
   const buy = async () => {
-    if (data.value < BigInt(tokenMarketData.listing.start_amount ?? 0)) {
+    if (
+      !data ||
+      data.value < BigInt(tokenMarketData.listing.start_amount ?? 0)
+    ) {
       sonner.error("Insufficient balance");
       return;
     }

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-header.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-header.tsx
@@ -2,8 +2,7 @@
 
 import { useStarkProfile } from "@starknet-react/core";
 
-import type { PropsWithClassName } from "@ark-market/ui";
-import { cn, shortAddress } from "@ark-market/ui";
+import { shortAddress } from "@ark-market/ui";
 
 import CopyButton from "~/components/copy-button";
 import ProfilePicture from "~/components/profile-picture";
@@ -14,23 +13,17 @@ interface PortfolioHeaderProps {
 }
 
 export default function PortfolioHeader({
-  className,
   walletAddress,
-}: PropsWithClassName<PortfolioHeaderProps>) {
+}: PortfolioHeaderProps) {
   const { data: starkProfile } = useStarkProfile({ address: walletAddress });
   const shortenedAddress = shortAddress(walletAddress);
 
   return (
-    <div
-      className={cn(
-        "flex flex-col gap-4 border-border bg-background px-5 pb-5 pt-3.5 sm:flex-row sm:items-center sm:justify-between sm:border-b sm:pb-6 sm:pt-6 md:justify-start md:gap-4",
-        className,
-      )}
-    >
+    <div className="flex flex-col gap-4 border-border bg-background px-5 pb-5 pt-3.5 sm:flex-row sm:items-center sm:justify-between sm:border-b sm:pb-6 sm:pt-6 md:justify-start md:gap-4">
       <div className="flex items-center gap-4">
         <ProfilePicture
           address={walletAddress}
-          className="size-8 rounded-xs lg:size-16 sm:rounded-lg"
+          className="size-8 rounded-xs sm:rounded-lg lg:size-16"
         />
         <div className="h-full w-full">
           <div className="flex items-center justify-between sm:justify-start">
@@ -49,7 +42,7 @@ export default function PortfolioHeader({
           )}
         </div>
       </div>
-      <PortfolioValue />
+      <PortfolioValue address={walletAddress} />
     </div>
   );
 }
diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx
@@ -73,7 +73,7 @@ export default function CollectionItemsDataGridView({
       }}
       itemContent={(index) => {
         const token = walletTokens[index];
-        console.log(token);
+
         if (token === undefined) {
           return null;
         }

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-filters-content.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-filters-content.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useQueryState } from "nuqs";
 import { validateAndParseAddress } from "starknet";
@@ -171,7 +171,7 @@ export default function PortfolioItemsFiltersContent({
                     ellipsableStyles,
                   )}
                 >
-                  Floor: {formatUnits(collection.floor ?? 0, 18)}
+                  Floor: {formatUnits(collection.floor ?? 0n, 18)}
                 </p>
               </div>
             </button>

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-value.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-value.tsx
@@ -4,14 +4,16 @@ import { ETH } from "~/constants/tokens";
 import useBalance from "~/hooks/useBalance";
 import usePrices from "~/hooks/usePrices";
 
-export default function PortfolioValue() {
+interface PortfolioValueProps {
+  address?: string;
+}
+
+export default function PortfolioValue({ address }: PortfolioValueProps) {
+  const { data: ethBalance, isPending } = useBalance({ address, token: ETH });
   const { convertInUsd, isLoading: isLoadingPrices } = usePrices();
-  const { data: ethBalance, isLoading: isLoadingBalance } = useBalance({
-    token: ETH,
-  });
-  const ethBalanceInUsd = convertInUsd({ amount: ethBalance.value });
+  const ethBalanceInUsd = convertInUsd({ amount: ethBalance?.value });
 
-  if (isLoadingPrices || isLoadingBalance) {
+  if (isLoadingPrices || isPending) {
     return null;
   }
 
@@ -20,10 +22,10 @@ export default function PortfolioValue() {
       <div className="flex items-center gap-1">
         <div className="flex flex-col">
           <p className="text-sm text-secondary-foreground">Portfolio value</p>
-          <p className="flex items-center text-md font-semibold space-x-1.5">
+          <p className="text-md flex items-center space-x-1.5 font-semibold">
             <Ethereum />
             <div className="text-xl">
-              {ethBalance.rounded}{" "}
+              {ethBalance?.rounded}{" "}
               <span className="text-secondary-foreground">ETH</span>
             </div>
           </p>

diff --git a/apps/arkmarket/src/components/prices.tsx b/apps/arkmarket/src/components/prices.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Starknet, Ethereum } from "@ark-market/ui/icons";
+import { Ethereum, Starknet } from "@ark-market/ui/icons";
 import { Separator } from "@ark-market/ui/separator";
 
 import usePrices from "~/hooks/usePrices";

diff --git a/apps/arkmarket/src/components/providers.tsx b/apps/arkmarket/src/components/providers.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import { ArkProvider } from "@ark-project/react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { ThemeProvider } from "@ark-market/ui/theme";
 

diff --git a/apps/arkmarket/src/components/system-status.tsx b/apps/arkmarket/src/components/system-status.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import { cn } from "@ark-market/ui";
 import {
@@ -28,12 +28,14 @@ const statuses = {
 };
 
 export default function SystemStatus() {
-  const { isLoading, error, data } = useQuery("systemStatus", getSystemStatus, {
+  const { error, data } = useQuery({
+    queryKey: ["systemStatus"],
+    queryFn: getSystemStatus,
     refetchInterval: 15_000,
     initialData: { status: "ok" },
   });
 
-  if (isLoading || error || !data) {
+  if (error) {
     return null;
   }
 

diff --git a/apps/arkmarket/src/components/user-nav.tsx b/apps/arkmarket/src/components/user-nav.tsx
@@ -16,15 +16,13 @@ import WalletAccountPopover from "./wallet-account-popover";
 import WrongNetworkModal from "./wrong-network-modal";
 
 export function UserNav() {
-  const { address, chainId } = useAccount();
-  const { data: ethBalance } = useBalance({ token: ETH });
   const { chain } = useNetwork();
+  const { address, chainId } = useAccount();
+  const { data: ethBalance } = useBalance({ address, token: ETH });
   const { data: starkProfile } = useStarkProfile({ address });
-
-  const isWrongNetwork = chainId !== chain.id && chainId !== undefined;
+  const isWrongNetwork = chainId && chainId !== chain.id;
   const nameOrShortAddress =
     starkProfile?.name ?? shortAddress(address ?? "0x");
-  const roundedEthBalance = parseFloat(ethBalance.formatted ?? "0").toFixed(4);
 
   if (!address) {
     return (
@@ -64,7 +62,7 @@ export function UserNav() {
         >
           <Ethereum className="size-6 flex-shrink-0 md:size-8" />
           <p>
-            {roundedEthBalance}
+            {ethBalance?.rounded}
             <span className="text-muted-foreground"> ETH</span>
           </p>
           <Separator orientation="vertical" className="bg-background" />