From 5cffc198b8624a21e08d6899b7897e77a39e9cb6 Mon Sep 17 00:00:00 2001
From: JayJay1024 <lygm1062@gmail.com>
Date: Wed, 11 Oct 2023 18:00:28 +0800
Subject: [PATCH] create transfer provider

---
 packages/apps/src/components/transfer.tsx     |  4 +--
 packages/apps/src/hooks/use-transfer.ts       |  4 +++
 packages/apps/src/providers/app-provider.tsx  | 18 +------------
 .../apps/src/providers/transfer-provider.tsx  | 25 +++++++++++++++++++
 4 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 packages/apps/src/hooks/use-transfer.ts
 create mode 100644 packages/apps/src/providers/transfer-provider.tsx

diff --git a/packages/apps/src/components/transfer.tsx b/packages/apps/src/components/transfer.tsx
index 8929ddc4d..bddca3a9b 100644
--- a/packages/apps/src/components/transfer.tsx
+++ b/packages/apps/src/components/transfer.tsx
@@ -16,12 +16,12 @@ import SwitchCross from "./switch-cross";
 import { from, Subscription } from "rxjs";
 import { useToggle } from "@/hooks/use-toggle";
 import TransferModal from "./transfer-modal";
-import { useApp } from "@/hooks/use-app";
 import TransferAction from "./transfer-action";
 import DisclaimerModal from "./disclaimer-modal";
 import { Token } from "@/types/token";
 import Faucet from "./faucet";
 import { isProduction } from "@/utils/env";
+import { useTransfer } from "@/hooks/use-transfer";
 
 const {
   defaultSourceOptions,
@@ -34,7 +34,7 @@ const {
 } = getParsedCrossChain();
 
 export default function Transfer() {
-  const { transferValue, setTransferValue } = useApp();
+  const { transferValue, setTransferValue } = useTransfer();
   const deferredTransferValue = useDeferredValue(transferValue);
 
   const [isOpen, _, setIsOpenTrue, setIsOpenFalse] = useToggle(false);
diff --git a/packages/apps/src/hooks/use-transfer.ts b/packages/apps/src/hooks/use-transfer.ts
new file mode 100644
index 000000000..914469842
--- /dev/null
+++ b/packages/apps/src/hooks/use-transfer.ts
@@ -0,0 +1,4 @@
+import { TransferContext } from "@/providers/transfer-provider";
+import { useContext } from "react";
+
+export const useTransfer = () => useContext(TransferContext);
diff --git a/packages/apps/src/providers/app-provider.tsx b/packages/apps/src/providers/app-provider.tsx
index a90e8bbf3..b8b96fef1 100644
--- a/packages/apps/src/providers/app-provider.tsx
+++ b/packages/apps/src/providers/app-provider.tsx
@@ -1,22 +1,15 @@
 "use client";
 
-import { TransferValue } from "@/components/transfer-input";
 import { Dispatch, PropsWithChildren, SetStateAction, createContext, useState } from "react";
 
 interface AppCtx {
   recordsSearch: string;
-  transferValue: TransferValue;
-
   setRecordsSearch: Dispatch<SetStateAction<string>>;
-  setTransferValue: Dispatch<SetStateAction<TransferValue>>;
 }
 
 const defaultValue: AppCtx = {
   recordsSearch: "",
-  transferValue: { value: "", formatted: 0n },
-
   setRecordsSearch: () => undefined,
-  setTransferValue: () => undefined,
 };
 
 export const AppContext = createContext(defaultValue);
@@ -24,14 +17,5 @@ export const AppContext = createContext(defaultValue);
 export default function AppProvider({ children }: PropsWithChildren<unknown>) {
   const [recordsSearch, setRecordsSearch] = useState(defaultValue.recordsSearch);
 
-  /**
-   * Why we define here: https://react.dev/reference/react/useDeferredValue#caveats
-   */
-  const [transferValue, setTransferValue] = useState(defaultValue.transferValue);
-
-  return (
-    <AppContext.Provider value={{ recordsSearch, transferValue, setRecordsSearch, setTransferValue }}>
-      {children}
-    </AppContext.Provider>
-  );
+  return <AppContext.Provider value={{ recordsSearch, setRecordsSearch }}>{children}</AppContext.Provider>;
 }
diff --git a/packages/apps/src/providers/transfer-provider.tsx b/packages/apps/src/providers/transfer-provider.tsx
new file mode 100644
index 000000000..51bc6ba25
--- /dev/null
+++ b/packages/apps/src/providers/transfer-provider.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { TransferValue } from "@/components/transfer-input";
+import { Dispatch, PropsWithChildren, SetStateAction, createContext, useState } from "react";
+
+interface TransferCtx {
+  transferValue: TransferValue;
+  setTransferValue: Dispatch<SetStateAction<TransferValue>>;
+}
+
+const defaultValue: TransferCtx = {
+  transferValue: { value: "", formatted: 0n },
+  setTransferValue: () => undefined,
+};
+
+export const TransferContext = createContext(defaultValue);
+
+export default function TransferProvider({ children }: PropsWithChildren<unknown>) {
+  /**
+   * Why we define here: https://react.dev/reference/react/useDeferredValue#caveats
+   */
+  const [transferValue, setTransferValue] = useState(defaultValue.transferValue);
+
+  return <TransferContext.Provider value={{ transferValue, setTransferValue }}>{children}</TransferContext.Provider>;
+}