Fix countervalue not reactive

cartridge-gg · Nov 15, 2024 · c9a43a9 · c9a43a9
1 parent 63fba0a
commit c9a43a9
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 34 deletions.
diff --git a/packages/keychain/src/components/Funding/Balance.tsx b/packages/keychain/src/components/Funding/Balance.tsx
@@ -83,7 +83,9 @@ export function Balance({ showBalances }: BalanceProps) {
           <HStack>
             <EthereumIcon fontSize={20} />
             <Text>{eth?.balance.formatted ?? "0.00"}</Text>
-            <Text color="text.secondary">${countervalue.formatted}</Text>
+            {countervalue && (
+              <Text color="text.secondary">${countervalue.formatted}</Text>
+            )}
           </HStack>
           <Spacer />
           <HStack color="text.secondary">

diff --git a/packages/profile/src/components/inventory/token/send.tsx b/packages/profile/src/components/inventory/token/send.tsx
@@ -18,10 +18,13 @@ import {
   FormMessage,
   Input,
 } from "@cartridge/ui-next";
+import { useCountervalue } from "@cartridge/utils";
+import { CurrencyBase, CurrencyQuote } from "@cartridge/utils/api/cartridge";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { Link, useParams } from "react-router-dom";
+import { validateChecksumAddress } from "starknet";
 import { z } from "zod";
 
 export function SendToken() {
@@ -32,8 +35,20 @@ export function SendToken() {
   const formSchema = useMemo(
     () =>
       z.object({
-        to: z.string(),
-        amount: z.number(),
+        to: z
+          .string()
+          .startsWith("0x")
+          .refine(
+            (addr) => {
+              try {
+                return validateChecksumAddress(addr);
+              } catch {
+                return false;
+              }
+            },
+            { message: "Invalid Starknet address" },
+          ),
+        amount: z.coerce.number(),
       }),
     [],
   );
@@ -45,9 +60,20 @@ export function SendToken() {
     },
   });
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
+  const onSubmit = useCallback((values: z.infer<typeof formSchema>) => {
     console.log(values);
-  }
+  }, []);
+
+  const amount = form.watch("amount");
+
+  const { countervalue } = useCountervalue(
+    {
+      balance: amount?.toString(),
+      quote: CurrencyQuote.Eth,
+      base: CurrencyBase.Usd,
+    },
+    { enabled: t?.meta.symbol === "ETH" && !!amount },
+  );
 
   if (!t) {
     return;
@@ -76,7 +102,7 @@ export function SendToken() {
 
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <LayoutContent className="pb-4">
+          <LayoutContent className="pb-4 gap-8">
             <FormField
               control={form.control}
               name="to"
@@ -95,9 +121,31 @@ export function SendToken() {
               name="amount"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Amount</FormLabel>
+                  <div className="flex items-center justify-between">
+                    <FormLabel>Amount</FormLabel>
+                    <div className="flex items-center gap-2">
+                      <FormLabel className="text-muted-foreground">
+                        Balance:
+                      </FormLabel>
+                      <div className="text-xs">
+                        {t.balance.formatted} {t.meta.symbol}
+                      </div>
+                    </div>
+                  </div>
                   <FormControl>
-                    <Input placeholder="0.01" {...field} />
+                    <div className="relative">
+                      <Input
+                        type="number"
+                        placeholder="0.01"
+                        {...field}
+                        className="[&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      {countervalue && (
+                        <span className="absolute right-4 top-3.5 text-sm text-muted-foreground">
+                          ~${countervalue.formatted}
+                        </span>
+                      )}
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>

diff --git a/packages/profile/src/components/inventory/token/token.tsx b/packages/profile/src/components/inventory/token/token.tsx
@@ -124,7 +124,9 @@ function ERC20() {
             t.balance.formatted
           )
         } ${t.meta.symbol}`}
-        description={`${countervalue.formatted} ${CurrencyBase.Usd}`}
+        description={
+          countervalue && `${countervalue.formatted} ${CurrencyBase.Usd}`
+        }
         icon={
           <img
             className="w-8 h-8"

diff --git a/packages/profile/src/components/inventory/token/tokens.tsx b/packages/profile/src/components/inventory/token/tokens.tsx
@@ -95,11 +95,12 @@ function TokenCardContent({
 
         {/* TODO: Enable countervalue for currencies other than ETH */}
         {getChecksumAddress(token.meta.address) ===
-          getChecksumAddress(ETH_CONTRACT_ADDRESS) && (
-          <div className="text-xs text-muted-foreground">
-            ${countervalue.formatted}
-          </div>
-        )}
+          getChecksumAddress(ETH_CONTRACT_ADDRESS) &&
+          countervalue && (
+            <div className="text-xs text-muted-foreground">
+              ${countervalue.formatted}
+            </div>
+          )}
       </div>
     </CardContent>
   );

diff --git a/packages/utils/src/hooks/countervalue.ts b/packages/utils/src/hooks/countervalue.ts
@@ -1,30 +1,46 @@
 import { useMemo } from "react";
-import { CurrencyBase, CurrencyQuote, usePriceQuery } from "../api/cartridge";
+import {
+  CurrencyBase,
+  CurrencyQuote,
+  PriceQuery,
+  usePriceQuery,
+} from "../api/cartridge";
 import { formatBalance } from "../currency";
+import { UseQueryOptions } from "react-query";
 
-export function useCountervalue({
-  balance,
-  quote,
-  base,
-}: {
-  balance: string;
-  quote: CurrencyQuote;
-  base: CurrencyBase;
-}) {
-  const { data, ...rest } = usePriceQuery({
+export function useCountervalue(
+  {
+    balance,
     quote,
     base,
-  });
+  }: {
+    balance: string;
+    quote: CurrencyQuote;
+    base: CurrencyBase;
+  },
+  options?: UseQueryOptions<PriceQuery>,
+) {
+  const { data, ...rest } = usePriceQuery(
+    {
+      quote,
+      base,
+    },
+    options,
+  );
 
-  const value = useMemo(() => {
-    if (!data?.price?.amount || !balance) {
-      return 0;
+  const countervalue = useMemo(() => {
+    if (options?.enabled === false || !data?.price?.amount) {
+      return;
     }
 
-    return parseFloat(balance) * parseFloat(data?.price.amount);
-  }, [data?.price]);
+    const value = parseFloat(balance) * parseFloat(data?.price.amount);
+    const formatted = formatBalance(value.toString(), 2);
 
-  const formatted = useMemo(() => formatBalance(value.toString(), 2), [value]);
+    return {
+      value,
+      formatted,
+    };
+  }, [options?.enabled, data?.price, balance]);
 
-  return { countervalue: { value, formatted }, ...rest };
+  return { countervalue, ...rest };
 }