fix(TokenInput): currency state (#95)

Author: danielsimao

.changeset/few-books-confess.md

@@ -0,0 +1,5 @@
+---
+"@interlay/ui": patch
+---
+
+fix(TokenInput): currency state

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

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

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 () => {