Restore default selection logic (#3393)

src/components/AccountDropdown.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { formatEther } from 'ethers/utils';
 import { OptionProps } from 'react-select';
+import isEmpty from 'lodash/isEmpty';
 
 import { translateRaw } from '@translations';
 import { AccountSummary, Divider, Selector } from '@components';
 import { SPACING } from '@theme';
 import { StoreAccount, Asset, TUuid, TSymbol } from '@types';
 import { getAccountBalance, getBaseAsset } from '@services/Store';
+import { useEffectOnce } from '@vendor';
 
 export interface IAccountDropdownProps {
   accounts: StoreAccount[];
@@ -51,6 +53,12 @@ function AccountDropdown({ accounts, asset, name, value, onSelect }: IAccountDro
   const selected = getOption(value, options);
   const handleFormUpdate = (option: TAccountDropdownOption) => onSelect(option.account);
 
+  useEffectOnce(() => {
+    if (!isEmpty(options) && isEmpty(value)) {
+      onSelect(options[0].account);
+    }
+  });
+
   return (
     <Selector<TAccountDropdownOption>
       name={name}

src/components/AssetSelector.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { OptionProps } from 'react-select';
+import isEmpty from 'lodash/isEmpty';
 
 import { translateRaw } from '@translations';
 import { Asset, ISwapAsset, TSymbol, TUuid } from '@types';
 import { AssetIcon, Typography, Selector } from '@components';
+import { useEffectOnce } from '@vendor';
 
 const SContainer = styled('div')`
   display: flex;
@@ -79,6 +81,12 @@ function AssetSelector({
   inputId = 'asset-selector',
   ...props
 }: AssetSelectorProps<Asset | ISwapAsset>) {
+  useEffectOnce(() => {
+    if (!isEmpty(assets) && isEmpty(selectedAsset)) {
+      onSelect(assets[0]);
+    }
+  });
+
   return (
     <Wrapper fluid={fluid}>
       {label && <Label htmlFor={inputId}>{label}</Label>}