From ca058b8828b6c612400d1ee9d881ad13008957ba Mon Sep 17 00:00:00 2001
From: Thunnini <yunjh1994@gmail.com>
Date: Thu, 23 Jan 2025 20:07:10 +0900
Subject: [PATCH] =?UTF-8?q?ibc=20transfer=EC=97=90=EC=84=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=20send=EB=A1=9C=20=EB=B3=80=ED=95=A0=EB=95=8C=20recip?=
 =?UTF-8?q?ient=EB=A5=BC=20=EC=B4=88=EA=B8=B0=ED=99=94=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/extension/src/hooks/use-previous.ts      | 33 +++++++++++++++++++
 .../extension/src/pages/send/amount/index.tsx |  9 +++++
 2 files changed, 42 insertions(+)
 create mode 100644 apps/extension/src/hooks/use-previous.ts

diff --git a/apps/extension/src/hooks/use-previous.ts b/apps/extension/src/hooks/use-previous.ts
new file mode 100644
index 0000000000..0d86849b8e
--- /dev/null
+++ b/apps/extension/src/hooks/use-previous.ts
@@ -0,0 +1,33 @@
+import { useRef } from "react";
+
+export type Predicate<T> = (prev: T | undefined, next: T) => boolean;
+
+const strictEquals = <T>(prev: T | undefined, next: T) => prev === next;
+
+const useFirstMountState = (): boolean => {
+  const isFirst = useRef(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+
+    return true;
+  }
+
+  return isFirst.current;
+};
+
+export const usePreviousDistinct = <T>(
+  value: T,
+  compare: Predicate<T> = strictEquals
+): T | undefined => {
+  const prevRef = useRef<T>();
+  const curRef = useRef<T>(value);
+  const isFirstMount = useFirstMountState();
+
+  if (!isFirstMount && !compare(curRef.current, value)) {
+    prevRef.current = curRef.current;
+    curRef.current = value;
+  }
+
+  return prevRef.current;
+};
diff --git a/apps/extension/src/pages/send/amount/index.tsx b/apps/extension/src/pages/send/amount/index.tsx
index fd65c8cbf6..99621def5c 100644
--- a/apps/extension/src/pages/send/amount/index.tsx
+++ b/apps/extension/src/pages/send/amount/index.tsx
@@ -55,6 +55,7 @@ import { GuideBox } from "../../../components/guide-box";
 import { ChainIdHelper } from "@keplr-wallet/cosmos";
 import { amountToAmbiguousAverage, isRunningInSidePanel } from "../../../utils";
 import { EthTxStatus } from "@keplr-wallet/types";
+import { usePreviousDistinct } from "../../../hooks/use-previous";
 
 const Styles = {
   Flex1: styled.div`
@@ -392,6 +393,14 @@ export const SendAmountPage: FunctionComponent = observer(() => {
     }
   });
 
+  const isIBCTransferPrevious = usePreviousDistinct(isIBCTransfer);
+  useEffect(() => {
+    if (isIBCTransferPrevious && !isIBCTransfer) {
+      // ibc transfer에서 기본 send로 변할때 recipient를 초기화한다.
+      sendConfigs.recipientConfig.setValue("");
+    }
+  }, [isIBCTransfer, isIBCTransferPrevious, sendConfigs.recipientConfig]);
+
   const txConfigsValidate = useTxConfigsValidate({
     ...sendConfigs,
     gasSimulator,