Feat: added clear button for asset input (#1027)

* feat(AssetInput): added clear button for asset input

* feat(AssetInput): update position for clear button

* feat(AssetInput): use correct icon components; fine-tuned styling

* feat(AssetInput): removed size variable from IconButton

* fix(AssetInput): updated condition to disable clear button

* feat(AssetInput): updated hover color styling for clear button

* feat(AssetInput): add text-overflow ellipsis style to input

src/components/transactions/AssetInput.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import {
   Box,
   Button,
+  IconButton,
   FormControl,
   InputBase,
   ListItemText,
@@ -10,6 +11,7 @@ import {
   SelectChangeEvent,
   Typography,
 } from '@mui/material';
+import { XCircleIcon } from '@heroicons/react/solid';
 import React, { ReactNode } from 'react';
 import NumberFormat, { NumberFormatProps } from 'react-number-format';
 
@@ -138,6 +140,9 @@ export const AssetInput = <T extends Asset = Asset>({
                 lineHeight: '28,01px',
                 padding: 0,
                 height: '28px',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
               },
             }}
             // eslint-disable-next-line
@@ -146,6 +151,25 @@ export const AssetInput = <T extends Asset = Asset>({
 
           {!onSelect || assets.length === 1 ? (
             <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+              {value !== '' && (
+                <IconButton
+                  sx={{
+                    minWidth: 0,
+                    p: 0,
+                    left: 8,
+                    color: 'text.muted',
+                    '&:hover': {
+                      color: 'text.secondary',
+                    },
+                  }}
+                  onClick={() => {
+                    onChange && onChange('');
+                  }}
+                  disabled={disabled}
+                >
+                  <XCircleIcon height={16} />
+                </IconButton>
+              )}
               <TokenIcon
                 aToken={asset.aToken}
                 symbol={asset.iconSymbol || asset.symbol}