diff --git a/src/components/AddressInput/AddressInput.tsx b/src/components/AddressInput/AddressInput.tsx new file mode 100644 index 000000000..73bb9ca03 --- /dev/null +++ b/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 = ({ + 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 ( + + + {label} + {address && chainId && ( + + (View on Block Explorer) + + )} + + { + const input = evt.target.value; + const withoutSpaces = input.replace(/\s+/g, ''); + onChange(withoutSpaces); + }} + /> + + ); +}; + +export default AddressInput; diff --git a/src/components/AddressInput/index.ts b/src/components/AddressInput/index.ts new file mode 100644 index 000000000..da1c58867 --- /dev/null +++ b/src/components/AddressInput/index.ts @@ -0,0 +1 @@ +export { default } from './AddressInput'; diff --git a/src/components/PoolPositionCard/PoolPositionCard.tsx b/src/components/PoolPositionCard/PoolPositionCard.tsx index f72ec58d6..933ccf574 100755 --- a/src/components/PoolPositionCard/PoolPositionCard.tsx +++ b/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 = ({ pair }) => { +const PoolPositionCard: React.FC<{ pair: Pair }> = ({ pair }) => { const [bulkPairData, setBulkPairData] = useState(null); const { palette, breakpoints } = useTheme(); const isMobile = useMediaQuery(breakpoints.down('xs')); @@ -22,15 +22,21 @@ const PoolPositionCard: React.FC = ({ 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 = ({ pair }) => { - {showMore && } + {showMore && } {stakingInfo && apyWithFee && ( diff --git a/src/components/PoolPositionCard/PoolPositionCardDetails.tsx b/src/components/PoolPositionCard/PoolPositionCardDetails.tsx index b186c7f6b..4193ba625 100644 --- a/src/components/PoolPositionCard/PoolPositionCardDetails.tsx +++ b/src/components/PoolPositionCard/PoolPositionCardDetails.tsx @@ -52,15 +52,7 @@ const useStyles = makeStyles(({ palette }) => ({ }, })); -interface PoolPositionCardProps { - pair: Pair; - pairId: string | null; -} - -const PoolPositionCardDetails: React.FC = ({ - 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 = ({ diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx index 9a256883c..48f0e2320 100644 --- a/src/components/SettingsModal/SettingsModal.tsx +++ b/src/components/SettingsModal/SettingsModal.tsx @@ -331,15 +331,16 @@ const SettingsModal: React.FC = ({ open, onClose }) => { border={`1px solid ${palette.secondary.light}`} maxWidth={168} > - { parseCustomDeadline((ttl / 60).toString()); }} - placeholder={(ttl / 60).toString()} - value={deadlineInput} - onChange={(e: any) => parseCustomDeadline(e.target.value)} + onUserInput={(value) => parseCustomDeadline(value)} /> diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx index 18c235ae6..716cb2625 100755 --- a/src/components/Swap/Swap.tsx +++ b/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<{ )} {recipient !== null && ( - - Recipient - onChangeRecipient(evt.target.value)} - /> - + )} )} diff --git a/src/components/index.ts b/src/components/index.ts index bc3f05433..39809ee6f 100755 --- a/src/components/index.ts +++ b/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';