create transfer provider

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);

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);

packages/apps/src/providers/app-provider.tsx

@@ -1,37 +1,21 @@
 "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);
 
 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>;
 }

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>;
+}