Merge pull request #74 from QuickSwap/feature/update-recipient-input

Update inputs and pool card

Author: totop716

src/components/AddressInput/AddressInput.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import useENS from 'hooks/useENS';
+import { useActiveWeb3React } from 'hooks';
+import { getEtherscanLink } from 'utils';
+
+const useStyles = makeStyles(({ palette }) => ({
+  addressInput: {
+    border: (props: any) =>
+      `1px solid ${props.error ? palette.error.main : palette.primary.dark}`,
+    borderRadius: 20,
+    padding: '12px 24px',
+    textAlign: 'left',
+    '& input': {
+      width: '100%',
+      fontSize: 20,
+      fontWeight: 'bold',
+      color: (props: any) =>
+        props.error ? palette.error.main : palette.text.primary,
+      background: 'transparent',
+      border: 'none',
+      boxShadow: 'none',
+      outline: 'none',
+      marginTop: 16,
+    },
+    '& a': {
+      color: palette.text.primary,
+      textDecoration: 'none',
+    },
+  },
+}));
+
+interface AddressInputProps {
+  value: string;
+  onChange: (val: string) => void;
+  placeholder: string;
+  label: string;
+}
+
+const AddressInput: React.FC<AddressInputProps> = ({
+  value,
+  onChange,
+  placeholder,
+  label,
+}) => {
+  const { chainId } = useActiveWeb3React();
+  const { address, loading, name } = useENS(value);
+  const error = Boolean(value.length > 0 && !loading && !address);
+  const classes = useStyles({ error });
+
+  return (
+    <Box className={classes.addressInput}>
+      <Box display='flex' justifyContent='space-between' alignItems='center'>
+        <Typography>{label}</Typography>
+        {address && chainId && (
+          <a
+            href={getEtherscanLink(chainId, name ?? address, 'address')}
+            target='_blank'
+            rel='noreferrer'
+          >
+            (View on Block Explorer)
+          </a>
+        )}
+      </Box>
+      <input
+        value={value}
+        placeholder={placeholder}
+        onChange={(evt) => {
+          const input = evt.target.value;
+          const withoutSpaces = input.replace(/\s+/g, '');
+          onChange(withoutSpaces);
+        }}
+      />
+    </Box>
+  );
+};
+
+export default AddressInput;

src/components/AddressInput/index.ts

@@ -0,0 +1 @@
+export { default } from './AddressInput';

src/components/PoolPositionCard/PoolPositionCard.tsx

@@ -4,16 +4,16 @@ import { useTheme } from '@material-ui/core/styles';
 import { ChevronDown, ChevronUp } from 'react-feather';
 import { Pair } from '@uniswap/sdk';
 import { unwrappedToken } from 'utils/wrappedCurrency';
-import { useStakingInfo, getBulkPairData } from 'state/stake/hooks';
+import {
+  useStakingInfo,
+  getBulkPairData,
+  useDualStakingInfo,
+} from 'state/stake/hooks';
 import { DoubleCurrencyLogo } from 'components';
 import { getAPYWithFee, getOneYearFee } from 'utils';
 import PoolPositionCardDetails from './PoolPositionCardDetails';
 
-interface PoolPositionCardProps {
-  pair: Pair;
-}
-
-const PoolPositionCard: React.FC<PoolPositionCardProps> = ({ pair }) => {
+const PoolPositionCard: React.FC<{ pair: Pair }> = ({ pair }) => {
   const [bulkPairData, setBulkPairData] = useState<any>(null);
   const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
@@ -22,15 +22,21 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({ pair }) => {
   const currency1 = unwrappedToken(pair.token1);
 
   const stakingInfos = useStakingInfo(pair);
+  const dualStakingInfos = useDualStakingInfo(pair);
   const stakingInfo = useMemo(
-    () => (stakingInfos && stakingInfos.length > 0 ? stakingInfos[0] : null),
-    [stakingInfos],
+    () =>
+      stakingInfos && stakingInfos.length > 0
+        ? stakingInfos[0]
+        : dualStakingInfos && dualStakingInfos.length > 0
+        ? dualStakingInfos[0]
+        : null,
+    [stakingInfos, dualStakingInfos],
   );
 
-  const pairId = stakingInfo ? stakingInfo.pair : null;
+  const pairId = pair.liquidityToken.address;
 
   useEffect(() => {
-    const pairLists = pairId ? [pairId] : [];
+    const pairLists = [pairId];
     getBulkPairData(pairLists).then((data) => setBulkPairData(data));
     return () => setBulkPairData(null);
   }, [pairId]);
@@ -101,7 +107,7 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({ pair }) => {
         </Box>
       </Box>
 
-      {showMore && <PoolPositionCardDetails pair={pair} pairId={pairId} />}
+      {showMore && <PoolPositionCardDetails pair={pair} />}
       {stakingInfo && apyWithFee && (
         <Box bgcolor='#404557' paddingY={0.75} paddingX={isMobile ? 2 : 3}>
           <Typography variant='body2'>

src/components/PoolPositionCard/PoolPositionCardDetails.tsx

@@ -52,15 +52,7 @@ const useStyles = makeStyles(({ palette }) => ({
   },
 }));
 
-interface PoolPositionCardProps {
-  pair: Pair;
-  pairId: string | null;
-}
-
-const PoolPositionCardDetails: React.FC<PoolPositionCardProps> = ({
-  pair,
-  pairId,
-}) => {
+const PoolPositionCardDetails: React.FC<{ pair: Pair }> = ({ pair }) => {
   const classes = useStyles();
   const history = useHistory();
   const { breakpoints } = useTheme();
@@ -156,7 +148,9 @@ const PoolPositionCardDetails: React.FC<PoolPositionCardProps> = ({
         <Box className={classes.poolButtonRow}>
           <Button
             variant='outlined'
-            onClick={() => history.push(`/analytics/pair/${pairId}`)}
+            onClick={() =>
+              history.push(`/analytics/pair/${pair.liquidityToken.address}`)
+            }
           >
             <Typography variant='body2'>View Analytics</Typography>
           </Button>

src/components/SettingsModal/SettingsModal.tsx

@@ -331,15 +331,16 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
             border={`1px solid ${palette.secondary.light}`}
             maxWidth={168}
           >
-            <input
-              style={{ textAlign: 'left' }}
-              className={classes.settingsInput}
+            <NumericalInput
+              placeholder={(ttl / 60).toString()}
+              value={deadlineInput}
+              fontSize={14}
+              fontWeight={500}
+              color='rgba(212, 229, 255, 0.8)'
               onBlur={() => {
                 parseCustomDeadline((ttl / 60).toString());
               }}
-              placeholder={(ttl / 60).toString()}
-              value={deadlineInput}
-              onChange={(e: any) => parseCustomDeadline(e.target.value)}
+              onUserInput={(value) => parseCustomDeadline(value)}
             />
           </Box>
           <Typography variant='body2' style={{ marginLeft: 8 }}>

src/components/Swap/Swap.tsx

@@ -22,6 +22,7 @@ import {
   AdvancedSwapDetails,
   QuestionHelper,
   SettingsModal,
+  AddressInput,
 } from 'components';
 import { useActiveWeb3React } from 'hooks';
 import {
@@ -111,23 +112,6 @@ const useStyles = makeStyles(({ palette }) => ({
         background: 'transparent',
       },
     },
-    '& .content': {
-      border: `1px solid ${palette.primary.dark}`,
-      borderRadius: 20,
-      padding: '12px 24px',
-      textAlign: 'left',
-      '& input': {
-        width: '100%',
-        fontSize: 20,
-        fontWeight: 'bold',
-        color: 'white',
-        background: 'transparent',
-        border: 'none',
-        boxShadow: 'none',
-        outline: 'none',
-        marginTop: 16,
-      },
-    },
   },
   slippageRow: {
     color: palette.text.secondary,
@@ -628,21 +612,18 @@ const Swap: React.FC<{
               <Box />
             )}
             <Button
-              id='remove-recipient-button'
               onClick={() => onChangeRecipient(recipient !== null ? null : '')}
             >
               {recipient !== null ? '- Remove send' : '+ Add a send (optional)'}
             </Button>
           </Box>
           {recipient !== null && (
-            <Box className='content'>
-              <Typography>Recipient</Typography>
-              <input
-                value={recipient}
-                placeholder='Wallet Address or ENS name'
-                onChange={(evt) => onChangeRecipient(evt.target.value)}
-              />
-            </Box>
+            <AddressInput
+              label='Recipient'
+              placeholder='Wallet Address or ENS name'
+              value={recipient}
+              onChange={onChangeRecipient}
+            />
           )}
         </Box>
       )}

src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Header } from './Header';
 export { default as Footer } from './Footer';
 export { default as ListLogo } from './ListLogo';
+export { default as AddressInput } from './AddressInput';
 export { default as AreaChart } from './AreaChart';
 export { default as BarChart } from './BarChart';
 export { default as BetaWarningBanner } from './BetaWarningBanner';