From 7885da20bf60a2ec5352d152afafc0a3bb22e927 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Mon, 6 May 2024 19:03:34 +0100
Subject: [PATCH 1/2] fix(TokenInput): currency state

---
 .../src/TokenInput/SelectableTokenInput.tsx         | 10 +---------
 packages/components/src/TokenInput/TokenInput.tsx   | 13 ++++++++-----
 .../src/TokenInput/__tests__/TokenInput.test.tsx    |  7 ++++++-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/TokenInput/SelectableTokenInput.tsx b/packages/components/src/TokenInput/SelectableTokenInput.tsx
index 8bc86e556..61eca79b2 100644
--- a/packages/components/src/TokenInput/SelectableTokenInput.tsx
+++ b/packages/components/src/TokenInput/SelectableTokenInput.tsx
@@ -1,5 +1,5 @@
 import { chain, useId } from '@react-aria/utils';
-import { Key, ReactNode, forwardRef, useCallback, useEffect } from 'react';
+import { Key, ReactNode, forwardRef, useCallback } from 'react';
 
 import { HelperText } from '../HelperText';
 
@@ -45,14 +45,6 @@ const SelectableTokenInput = forwardRef<HTMLInputElement, SelectableTokenInputPr
   ): JSX.Element => {
     const selectHelperTextId = useId();
 
-    useEffect(() => {
-      if (selectProps?.value === undefined) return;
-
-      const item = (items as TokenData[]).find((item) => item.currency.symbol === selectProps?.value);
-
-      onChangeCurrency?.(item?.currency);
-    }, [selectProps?.value, onChangeCurrency]);
-
     const handleSelectionChange = useCallback(
       (ticker: Key) => {
         const tokenData = (items as TokenData[]).find((item) => item.currency.symbol === ticker);
diff --git a/packages/components/src/TokenInput/TokenInput.tsx b/packages/components/src/TokenInput/TokenInput.tsx
index f32be1816..e07a382ca 100644
--- a/packages/components/src/TokenInput/TokenInput.tsx
+++ b/packages/components/src/TokenInput/TokenInput.tsx
@@ -1,6 +1,6 @@
 import { useDOMRef } from '@interlay/hooks';
 import { mergeProps, useId } from '@react-aria/utils';
-import { ChangeEvent, FocusEvent, forwardRef, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, FocusEvent, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { trimDecimals } from '../utils';
 
@@ -13,7 +13,9 @@ const getDefaultCurrency = (props: TokenInputProps) => {
     case 'fixed':
       return (props as FixedTokenInputProps).currency;
     case 'selectable':
-      return (props.items || []).find((item) => item.currency.symbol === props.selectProps?.defaultValue);
+      return (props.items || []).find(
+        (item) => item.currency.symbol === (props.selectProps?.value || props.selectProps?.defaultValue)
+      )?.currency;
   }
 };
 
@@ -34,8 +36,10 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
 
   const inputRef = useDOMRef<HTMLInputElement>(ref);
 
+  const defaultCurrency = useMemo(() => getDefaultCurrency(props), []);
+
   const [value, setValue] = useState(defaultValue);
-  const [currency, setCurrency] = useState<any | undefined>(getDefaultCurrency(props));
+  const [currency, setCurrency] = useState<any | undefined>(defaultCurrency);
 
   const inputId = useId();
 
@@ -119,9 +123,8 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>((props, ref): J
   if (props.type === 'selectable') {
     return (
       <SelectableTokenInput
-        {...mergeProps(otherProps, commonProps)}
+        {...mergeProps(otherProps, commonProps, { onChangeCurrency: handleChangeCurrency })}
         currency={currency}
-        onChangeCurrency={handleChangeCurrency}
       />
     );
   }
diff --git a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
index 5f9210d7a..aaec45efc 100644
--- a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
+++ b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
@@ -329,7 +329,9 @@ describe('TokenInput', () => {
       expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent('BTC');
     });
 
-    it('should control value', async () => {
+    it('should control value and emit onChangeCurrency', async () => {
+      const handleChangeCurrency = jest.fn();
+
       const Component = () => {
         const [value, setValue] = useState<any | undefined>(currencies[0]);
 
@@ -342,6 +344,7 @@ describe('TokenInput', () => {
             label='label'
             selectProps={{ value: value.symbol, onSelectionChange: handleSelectionChange }}
             type='selectable'
+            onChangeCurrency={handleChangeCurrency}
           />
         );
       };
@@ -365,6 +368,8 @@ describe('TokenInput', () => {
       await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /select token/i }));
 
       expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent('ETH');
+      expect(handleChangeCurrency).toHaveBeenCalledWith(currencies[1]);
+      expect(handleChangeCurrency).toHaveBeenCalledTimes(1);
     });
 
     it('should apply correct decimals when switching currency', async () => {

From eed0557b691bdd14fa4d04d5e607ecf05e1fa10f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Mon, 6 May 2024 19:06:26 +0100
Subject: [PATCH 2/2] Create few-books-confess.md

---
 .changeset/few-books-confess.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/few-books-confess.md

diff --git a/.changeset/few-books-confess.md b/.changeset/few-books-confess.md
new file mode 100644
index 000000000..f89b3e39b
--- /dev/null
+++ b/.changeset/few-books-confess.md
@@ -0,0 +1,5 @@
+---
+"@interlay/ui": patch
+---
+
+fix(TokenInput): currency state