Default exchange currencies

components/DTOs/SwapFormValues.ts

@@ -10,12 +10,13 @@ export type SwapFormValues = {
   refuel?: boolean;
   from?: RouteNetwork;
   to?: RouteNetwork;
-  fromExchange?: Exchange,
-  toExchange?: Exchange,
-  currencyGroup?: ExchangeToken
+  fromExchange?: Exchange;
+  toExchange?: Exchange;
+  currencyGroup?: ExchangeToken & { manuallySet?: boolean };
   depositMethod?: 'wallet' | 'deposit_address',
   validatingSource?: boolean;
   validatingDestination?: boolean;
+  validatingCurrencyGroup?: boolean;
 }
 
 

components/Input/CEXCurrencyFormField.tsx

@@ -28,6 +28,7 @@ const CurrencyGroupFormField: FC<{ direction: SwapDirection }> = ({ direction })
     const apiClient = new LayerSwapApiClient()
     const {
         data: exchanges,
+        isLoading,
         error
     } = useSWR<ApiResponse<Exchange[]>>(`${exchangeRoutesURL}`, apiClient.fetcher, { keepPreviousData: true, fallbackData: { data: direction === 'from' ? sourceExchanges : destinationExchanges }, dedupingInterval: 10000 })
 
@@ -57,14 +58,34 @@ const CurrencyGroupFormField: FC<{ direction: SwapDirection }> = ({ direction })
     }, [])
 
     useEffect(() => {
-        const value = availableAssetGroups?.find(r => r.symbol === currencyGroup?.symbol)
-        if (!value) return
-        setFieldValue(name, value)
+        const currency = direction === 'from' ? toCurrency : fromCurrency
+        const value = availableAssetGroups?.find(r => r.symbol === currency?.symbol && r.status === 'active')
+
+        if (!value || currencyGroup?.manuallySet)
+            return
+
+        (async () => {
+            setFieldValue(name, value)
+            await setFieldValue(direction == "from" ? "validatingSource" : "validatingDestination", true, true)
+            await setFieldValue("validatingCurrencyGroup", false, true)
+        })();
     }, [fromCurrency, toCurrency, availableAssetGroups])
 
-    const handleSelect = useCallback((item: SelectMenuItem<ExchangeToken>) => {
-        setFieldValue(name, item.baseObject, true)
-    }, [name, direction, toCurrency, fromCurrency, from, to])
+    const handleSelect = useCallback(async (item: SelectMenuItem<ExchangeToken>) => {
+        const oppositeCurrency = direction === 'from' ? toCurrency : fromCurrency
+        if (oppositeCurrency && !oppositeCurrency?.manuallySet) {
+            const network = direction === 'to' ? from : to
+            const default_currency = network?.tokens?.find(t => t.symbol === item.baseObject.symbol) || network?.tokens?.find(t => t.symbol.includes(item.baseObject.symbol) || item.baseObject.symbol.includes(t.symbol))
+            if (default_currency) {
+                await setFieldValue("validatingDestination", true, true)
+                await setFieldValue("validatingSource", true, true)
+                await setFieldValue(`${direction == "from" ? "to" : "from"}Currency`, default_currency, true)
+            }
+        }
+
+        (item.baseObject as any).manuallySet = true
+        await setFieldValue(name, item.baseObject, true)
+    }, [name, direction, toCurrency, fromCurrency, from, to, values])
 
     return <PopoverSelectWrapper
         placeholder="Asset"
@@ -87,19 +108,17 @@ export function GenerateCurrencyMenuItems(
 
         const isAvailable = (lockedCurrency || (c?.status !== "active" && c.status !== "not_found")) ? false : true;
 
-        const routeNotFound = c.status === "not_found"
-
         const res: SelectMenuItem<ExchangeToken> = {
             baseObject: c,
             id: c.symbol,
             name: displayName || "-",
             order: ResolveCEXCurrencyOrder(c),
             imgSrc: c.logo,
             isAvailable: isAvailable,
-            leftIcon: <RouteIcon direction={direction} isAvailable={isAvailable} routeNotFound={routeNotFound} type="token" />
+            leftIcon: <RouteIcon direction={direction} isAvailable={isAvailable} routeNotFound={false} type="token" />
         };
         return res
     });
 }
 
-export default CurrencyGroupFormField
+export default CurrencyGroupFormField

components/Input/CurrencyFormField.tsx

@@ -28,6 +28,7 @@ const CurrencyFormField: FC<{ direction: SwapDirection }> = ({ direction }) => {
 
     const { from, to, fromCurrency, toCurrency, fromExchange, toExchange, destination_address, currencyGroup } = values
     const name = direction === 'from' ? 'fromCurrency' : 'toCurrency';
+    const exchangeName = direction === 'from' ? 'fromExchange' : 'toExchange';
     const query = useQueryState()
     const { selectedSourceAccount } = useSwapDataState()
     const { destinationRoutes, sourceRoutes } = useSettingsState();
@@ -152,28 +153,39 @@ const CurrencyFormField: FC<{ direction: SwapDirection }> = ({ direction }) => {
                 if (!value || value === toCurrency) return
                 (value as any).manuallySet = toCurrency.manuallySet
                 await setFieldValue(name, value)
-                await setFieldValue("validatingDestination", isLoading, true)
+                await setFieldValue("validatingDestination", false, true)
             })()
         }
     }, [fromCurrency, currencyGroup, name, to, routes, error, isLoading])
 
-
     useEffect(() => {
         if (name === "fromCurrency" && fromCurrency && !isLoading && routes) {
             (async () => {
                 const value = routes.data?.find(r => r.name === from?.name)?.tokens?.find(r => r.symbol === fromCurrency?.symbol)
                 if (!value || value === fromCurrency) return
                 (value as any).manuallySet = fromCurrency.manuallySet
                 await setFieldValue(name, value)
-                await setFieldValue("validatingSource", isLoading, true)
+                await setFieldValue("validatingSource", false, true)
             })()
         }
     }, [toCurrency, currencyGroup, name, from, routes, error, isLoading])
 
     const handleSelect = useCallback(async (item: SelectMenuItem<RouteToken>) => {
         const oppositeCurrency = direction === 'from' ? toCurrency : fromCurrency
+        const exchange = direction === 'from' ? toExchange : fromExchange
+
+        if (currencyGroup && !currencyGroup?.manuallySet) {
+            const default_currency = exchange?.token_groups?.find(t => t.symbol === item.baseObject.symbol) || exchange?.token_groups?.find(t => t.symbol.includes(item.baseObject.symbol) || item.baseObject.symbol.includes(t.symbol))
+            if (default_currency) {
+                await setFieldValue("validatingCurrencyGroup", true, true)
+                await setFieldValue(direction == "from" ? "validatingSource" : "validatingDestination", true, true)
+                await setFieldValue("currencyGroup", default_currency, true)
+            }
+        }
+
         if (oppositeCurrency && !oppositeCurrency?.manuallySet) {
             const network = direction === 'to' ? from : to
+
             const default_currency = network?.tokens?.find(t => t.symbol === item.baseObject.symbol) || network?.tokens?.find(t => t.symbol.includes(item.baseObject.symbol) || item.baseObject.symbol.includes(t.symbol))
             if (default_currency) {
                 await setFieldValue("validatingDestination", true, true)

context/validationErrorContext.tsx

@@ -33,7 +33,7 @@ export const ValidationProvider: React.FC<{ children: ReactNode }> = ({ children
     } = useFormikContext<SwapFormValues>();
     const { destinationRoutes: allDestinations, sourceRoutes: allSources } = useSettingsState()
     const { selectedSourceAccount } = useSwapDataState()
-    const { to, from, fromCurrency, toCurrency, toExchange, fromExchange, currencyGroup, validatingSource, validatingDestination, destination_address } = values;
+    const { to, from, fromCurrency, toCurrency, toExchange, fromExchange, currencyGroup, validatingSource, validatingDestination, validatingCurrencyGroup, destination_address } = values;
     const query = useQueryState();
     const fromDisplayName = fromExchange ? fromExchange.display_name : from?.display_name;
     const toDisplayName = toExchange ? toExchange.display_name : to?.display_name;
@@ -88,7 +88,7 @@ export const ValidationProvider: React.FC<{ children: ReactNode }> = ({ children
             validationDetails = { title: 'Temporarily unavailable.', type: 'warning', icon: <Info stroke='#f8974b' className='w-4 h-4 ' /> };
         }
     }
-    else if (!validatingSource && !validatingDestination && (currencyGroup?.status === 'not_found' || toCurrency?.status === 'not_found' || fromCurrency?.status === 'not_found')) {
+    else if (!validatingSource && !validatingDestination && !validatingCurrencyGroup && (currencyGroup?.status === 'not_found' || toCurrency?.status === 'not_found' || fromCurrency?.status === 'not_found')) {
         validationMessage = 'Please change one of the selected tokens';
         validationDetails = { title: 'Route Unavailable', type: 'warning', icon: <RouteOff stroke='#f8974b' className='w-4 h-4 ' /> };
     }