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
BibliothecaDAO · Sep 10, 2024 · e6092f6 · e6092f6
1 parent 6906d44
commit e6092f6
Show file tree

Hide file tree

Showing 21 changed files with 228 additions and 150 deletions.
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
@@ -57,7 +57,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";
 
@@ -58,16 +58,14 @@ export function TokenActionsCreateListing({
   const [isOpen, setIsOpen] = useState(false);
   const [modalEnabled, setModalEnabled] = useState(true);
   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();
@@ -324,9 +322,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
@@ -87,7 +87,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/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-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/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
@@ -20,9 +20,10 @@ export function UserNav() {
   const { address, chainId } = useAccount();
   const { data: lordsBalance } = useTokenBalance({ token: env.NEXT_PUBLIC_LORDS_TOKEN_ADDRESS });
   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(lordsBalance.formatted ?? "0").toFixed(4);

diff --git a/apps/arkmarket/src/components/wallet-account-balance.tsx b/apps/arkmarket/src/components/wallet-account-balance.tsx
@@ -0,0 +1,59 @@
+import { Ethereum, Starknet } from "@ark-market/ui/icons";
+
+import { ETH, STRK } from "~/constants/tokens";
+import useBalance from "~/hooks/useBalance";
+import usePrices from "~/hooks/usePrices";
+
+interface WalletAccountBalanceProps {
+  address: string;
+}
+
+export default function WalletAccountBalance({
+  address,
+}: WalletAccountBalanceProps) {
+  const { convertInUsd } = usePrices();
+  const { data: ethBalance } = useBalance({ address, token: ETH });
+  const { data: strkBalance } = useBalance({ address, token: STRK });
+
+  const ethBalanceInUsd = convertInUsd({
+    amount: ethBalance?.value,
+    token: "ethereum",
+  });
+  const strkBalanceInUsd = convertInUsd({
+    amount: strkBalance?.value,
+    token: "starknet",
+  });
+
+  if (!address) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex h-16 items-center justify-between rounded-t-lg bg-card p-4">
+        <div className="flex items-center gap-2.5">
+          <Ethereum />
+          <span className="font-bold">ETH</span>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <p className="text-sm font-medium">{ethBalance?.rounded}</p>
+          <p className="text-xs text-secondary-foreground">
+            ${ethBalanceInUsd}
+          </p>
+        </div>
+      </div>
+      <div className="mt-0.5 flex h-16 items-center justify-between rounded-b-lg bg-card p-4">
+        <div className="flex items-center gap-2.5">
+          <Starknet />
+          <span className="font-bold">STRK</span>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <p className="text-sm font-medium">{strkBalance?.rounded}</p>
+          <p className="text-xs text-secondary-foreground">
+            ${strkBalanceInUsd}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/arkmarket/src/components/wallet-account-content.tsx b/apps/arkmarket/src/components/wallet-account-content.tsx
@@ -89,7 +89,7 @@ export default function WalletAccountContent({
             prefetch
           >
             <User size={24} />
-            <p className="font-bold">My items</p>
+            <p className="font-bold">Profile</p>
           </Link>
           {isWebWallet && (
             <ExternalLink