FEAT: Invalidate data on submit

hoodieshq · Mar 28, 2024 · be57c6a · be57c6a
1 parent 113c44e
commit be57c6a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/packages/ui/src/entities/token/use-mint.tsx b/packages/ui/src/entities/token/use-mint.tsx
@@ -14,6 +14,7 @@ export function useMint(
   const { connection } = useConnection()
 
   const { data, error } = useQuery({
+    enabled: Boolean(address),
     placeholderData: opts?.placeholderData,
     queryFn: async (): Promise<spl.Mint | undefined> => {
       if (!address) return undefined
@@ -28,7 +29,6 @@ export function useMint(
         return mint
       }
     },
-    enabled: Boolean(address),
     queryKey: ["useMint", address],
     refetchInterval: opts?.refetchInterval,
     refetchIntervalInBackground: opts?.refetchIntervalInBackground,

diff --git a/packages/ui/src/entities/token/use-token-amount.tsx b/packages/ui/src/entities/token/use-token-amount.tsx
@@ -24,6 +24,9 @@ function useTokenAmount<S extends State>(state: S, action: any): State {
     case "changeDestination": {
       return { ...state, destination: action.payload.destination }
     }
+    case "clear": {
+      return {}
+    }
     default:
       return state
   }

diff --git a/packages/ui/src/entities/token/use-token-balance.tsx b/packages/ui/src/entities/token/use-token-balance.tsx
@@ -16,6 +16,7 @@ export function useTokenBalance(
   const publicKey = wallet?.adapter.publicKey
 
   const { data: balance, error } = useQuery({
+    enabled: Boolean(address && publicKey),
     placeholderData: opts?.placeholderData,
     queryFn: async (): Promise<string> => {
       // no token selected yet
@@ -63,8 +64,8 @@ export function useTokenBalance(
       }
       return "0"
     },
-    queryKey: ["useTokenBalance", address, publicKey],
-    refetchInterval: opts?.refetchInterval ?? 12000,
+    queryKey: ["useTokenBalance", String(address), String(publicKey)],
+    refetchInterval: opts?.refetchInterval ?? 6000,
     refetchIntervalInBackground: opts?.refetchIntervalInBackground,
   })
 

diff --git a/packages/ui/src/entities/use-token-upgrade.tsx b/packages/ui/src/entities/use-token-upgrade.tsx
@@ -61,9 +61,9 @@ export function useTokenUpgrade() {
 
   const mutation = useMutation({
     mutationFn,
-    onSuccess: (_data, variables) => {
+    onSuccess: () => {
       client.invalidateQueries({
-        queryKey: ["useTokenBalance", variables.originalAddress],
+        predicate: (query) => query.queryKey[0] === "useTokenBalance",
       })
     },
   })

diff --git a/packages/ui/src/widgets/token-upgrade.tsx b/packages/ui/src/widgets/token-upgrade.tsx
@@ -74,6 +74,7 @@ export function TokenUpgradeBase({
       },
       {
         onSuccess: (signature) => {
+          setAction({ type: "clear" })
           onUpgradeEnd?.({ signature })
         },
         onError: (error: Error) => {
@@ -89,6 +90,7 @@ export function TokenUpgradeBase({
     onUpgradeEnd,
     onUpgradeError,
     onUpgradeStart,
+    setAction,
     tokenAddress,
     tokenExtAddress,
     tokenUpgradeProgramId,
@@ -110,6 +112,9 @@ export function TokenUpgradeBase({
         className,
         "flex min-w-80 flex-col overflow-hidden rounded-lg bg-white shadow",
       )}
+      onSubmit={(e) => {
+        e.preventDefault()
+      }}
     >
       <div className="px-4 py-4 sm:p-6">
         <Container>
@@ -123,6 +128,7 @@ export function TokenUpgradeBase({
               placeholder={ph}
               step={step}
               symbol={symbol}
+              value={amount}
             />
           </Form.Field>
           <Form.Field className="pb-4 pt-3.5" name="destination">

diff --git a/packages/ui/src/widgets/token-upgrade/amount.tsx b/packages/ui/src/widgets/token-upgrade/amount.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import * as Form from "@radix-ui/react-form"
 import { cva, VariantProps } from "class-variance-authority"
 import clsx from "clsx"
@@ -44,6 +44,7 @@ export default function Amount({
   placeholder = "0",
   step = 1,
   symbol,
+  value,
   ...props
 }: AmountProps) {
   let variants = {}
@@ -70,6 +71,12 @@ export default function Amount({
     [onAmountMaxChange, inpRef],
   )
 
+  useEffect(() => {
+    if (inpRef.current && inpRef.current.value !== String(value)) {
+      inpRef.current.value = String(value || "")
+    }
+  }, [value])
+
   if (disabled) variants = { variant: "disabled" }
   if (hasBalance) variants = { variant: "active" }