% selector in asset input

Author: mgrabina

src/components/transactions/Swap/actions/ActionsSkeleton.tsx

@@ -13,11 +13,11 @@ const stateToLoadingType = (state: SwapState): LoadingType => {
 
 export const ActionsLoading: React.FC<{ state: SwapState }> = ({ state }) => {
   const loadingType = stateToLoadingType(state);
-
-  // Timer logic for updating the loading text after 2 seconds when loadingType is 'quote'
   const [quoteTimeElapsed, setQuoteTimeElapsed] = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Timer logic for updating the loading text after 2 seconds when loadingType is 'quote'
+  // Trick to change quote loading trick to make it feel more smooth
   useEffect(() => {
     if (loadingType === 'quote') {
       setQuoteTimeElapsed(false);

src/components/transactions/Swap/inputs/LimitOrderInputs.tsx

@@ -63,6 +63,13 @@ export const LimitOrderInputs = ({
           assets={swapState.inputAssets}
           value={state.inputAmount}
           onChange={swapState.handleInputChange}
+          onClear={() =>
+            setState({
+              inputAmount: '',
+              debouncedInputAmount: '',
+              inputAmountUSD: '',
+            })
+          }
           usdValue={state.inputAmountUSD || '0'}
           onSelect={swapState.handleSelectedInputToken}
           selectedAsset={state.sourceToken}
@@ -163,6 +170,13 @@ export const LimitOrderInputs = ({
           onChange={(value) => {
             swapState.handleOutputChange(value);
           }}
+          onClear={() =>
+            setState({
+              outputAmount: '',
+              debouncedOutputAmount: '',
+              outputAmountUSD: '',
+            })
+          }
           onSelect={swapState.handleSelectedOutputToken}
           disableInput={false}
           selectedAsset={state.destinationToken}

src/components/transactions/Swap/inputs/MarketOrderInputs.tsx

@@ -15,6 +15,7 @@ export const MarketOrderInputs = ({
   params,
   state,
   swapState,
+  setState,
 }: {
   params: SwapParams;
   state: SwapState;
@@ -64,6 +65,20 @@ export const MarketOrderInputs = ({
           assets={swapState.inputAssets}
           value={state.inputAmount}
           onChange={swapState.handleInputChange}
+          onClear={() =>
+            setState({
+              inputAmount: '',
+              debouncedInputAmount: '',
+              inputAmountUSD: '',
+              outputAmount: '',
+              debouncedOutputAmount: '',
+              outputAmountUSD: '',
+              swapRate: undefined,
+              ratesLoading: false,
+              error: undefined,
+              warnings: [],
+            })
+          }
           usdValue={state.inputAmountUSD.toString() || '0'}
           onSelect={swapState.handleSelectedInputToken}
           selectedAsset={state.sourceToken}

src/components/transactions/Swap/inputs/primitives/SwapAssetInput.tsx

@@ -1,3 +1,4 @@
+import { valueToBigNumber } from '@aave/math-utils';
 import { isAddress } from '@ethersproject/address';
 import { formatUnits } from '@ethersproject/units';
 import { ExclamationIcon } from '@heroicons/react/outline';
@@ -12,7 +13,10 @@ import {
   InputBase,
   ListItemText,
   MenuItem,
+  Popover,
   SvgIcon,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -64,6 +68,7 @@ export interface AssetInputProps {
   usdValue: string;
   chainId: number;
   onChange?: (value: string) => void;
+  onClear?: () => void;
   disabled?: boolean;
   disableInput?: boolean;
   onSelect?: (asset: SwappableToken) => void;
@@ -84,6 +89,7 @@ export const SwitchAssetInput = ({
   value,
   usdValue,
   onChange,
+  onClear,
   disabled,
   disableInput,
   onSelect,
@@ -281,7 +287,11 @@ export const SwitchAssetInput = ({
                 },
               }}
               onClick={() => {
-                onChange && onChange('');
+                if (onClear) {
+                  onClear();
+                } else {
+                  onChange && onChange('');
+                }
               }}
               disabled={disabled}
             >
@@ -530,10 +540,20 @@ export const SwitchAssetInput = ({
                   sx={{ ml: 1 }}
                 />
               </Typography>
+              {!disableInput && (
+                <PercentSelector
+                  disabled={disabled || Number(selectedAsset.balance) === 0}
+                  onSelectPercent={(fraction) => {
+                    const maxBase = forcedMaxValue || selectedAsset.balance || '0';
+                    const next = valueToBigNumber(maxBase).multipliedBy(fraction).toString();
+                    onChange && onChange(next);
+                  }}
+                />
+              )}
               {!disableInput && (
                 <Button
                   size="small"
-                  sx={{ minWidth: 0, ml: '7px', p: 0 }}
+                  sx={{ minWidth: 0, ml: '1px', pt: 0, pb: 0, mr: '-5px' }}
                   onClick={() => {
                     onChange && onChange(forcedMaxValue || '-1');
                   }}
@@ -555,3 +575,85 @@ export const SwitchAssetInput = ({
     </Box>
   );
 };
+
+const PercentSelector = ({
+  disabled,
+  onSelectPercent,
+}: {
+  disabled?: boolean;
+  onSelectPercent: (fraction: number) => void;
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => setAnchorEl(null);
+
+  const handlePick = (fraction: number) => {
+    onSelectPercent(fraction);
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button
+        size="small"
+        sx={{ minWidth: 0, ml: '6px', py: 0, fontSize: '12px' }}
+        onClick={handleOpen}
+        disabled={disabled}
+      >
+        <Trans>%</Trans>
+      </Button>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        PaperProps={{
+          sx: {
+            p: 1,
+            backgroundColor: 'background.surface',
+            border: '1px solid',
+            borderColor: 'divider',
+          },
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5 }}>
+          <ToggleButtonGroup
+            exclusive
+            sx={{
+              backgroundColor: 'background.surface',
+              borderRadius: '6px',
+              borderColor: 'background.surface',
+            }}
+            onChange={(_, v) => v && handlePick(v)}
+          >
+            {[0.25, 0.5, 0.75].map((fraction) => (
+              <ToggleButton
+                key={fraction}
+                value={fraction}
+                sx={{
+                  borderRadius: 1,
+                  py: 0.5,
+                  px: 1,
+                  borderWidth: 2,
+                  '&.Mui-selected': {
+                    backgroundColor: 'background.paper',
+                  },
+                }}
+              >
+                <Typography variant="subheader2" color="primary.main">
+                  {Math.round(fraction * 100)}%
+                </Typography>
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </Box>
+      </Popover>
+    </>
+  );
+};