state/user/hooks#usePairAdder TypeScript Examples
The following examples show how to use
state/user/hooks#usePairAdder.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: PoolFinderModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
PoolFinderModal: React.FC<PoolFinderModalProps> = ({ open, onClose }) => {
const classes = useStyles();
const { palette } = useTheme();
const { account } = useActiveWeb3React();
const [showSearch, setShowSearch] = useState<boolean>(false);
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1);
const [currency0, setCurrency0] = useState<Currency | null>(ETHER);
const [currency1, setCurrency1] = useState<Currency | null>(null);
const [pairState, pair] = usePair(
currency0 ?? undefined,
currency1 ?? undefined,
);
const addPair = usePairAdder();
useEffect(() => {
if (pair) {
addPair(pair);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pair?.liquidityToken.address, addPair]);
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)),
);
const position: TokenAmount | undefined = useTokenBalance(
account ?? undefined,
pair?.liquidityToken,
);
const hasPosition = Boolean(
position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)),
);
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency);
} else {
setCurrency1(currency);
}
},
[activeField],
);
const handleSearchDismiss = useCallback(() => {
setShowSearch(false);
}, [setShowSearch]);
return (
<CustomModal open={open} onClose={onClose}>
<Box paddingX={3} paddingY={4}>
<Box display='flex' alignItems='center' justifyContent='space-between'>
<ArrowLeft
color={palette.text.secondary}
style={{ cursor: 'pointer' }}
onClick={onClose}
/>
<Typography
variant='subtitle2'
style={{ color: palette.text.primary }}
>
Import Pool
</Typography>
<CloseIcon style={{ cursor: 'pointer' }} onClick={onClose} />
</Box>
<Box
mt={2}
className={classes.borderedCard}
onClick={() => {
setShowSearch(true);
setActiveField(Fields.TOKEN0);
}}
>
{currency0 ? (
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency0} size='20px' />
<Typography variant='h6' style={{ marginLeft: 6 }}>
{currency0.symbol}
</Typography>
</Box>
) : (
<Typography variant='h6'>Select a Token</Typography>
)}
</Box>
<Box my={1} display='flex' justifyContent='center'>
<Plus size='20' color={palette.text.secondary} />
</Box>
<Box
className={classes.borderedCard}
onClick={() => {
setShowSearch(true);
setActiveField(Fields.TOKEN1);
}}
>
{currency1 ? (
<Box display='flex'>
<CurrencyLogo currency={currency1} />
<Typography variant='h6' style={{ marginLeft: 6 }}>
{currency1.symbol}
</Typography>
</Box>
) : (
<Typography variant='h6'>Select a Token</Typography>
)}
</Box>
{hasPosition && (
<Box textAlign='center' mt={2}>
<Typography variant='body1'>Pool Found!</Typography>
<Typography
variant='body1'
style={{ cursor: 'pointer', color: palette.primary.main }}
onClick={onClose}
>
Manage this pool.
</Typography>
</Box>
)}
<Box
mt={2}
p={1}
borderRadius={10}
display='flex'
justifyContent='center'
border={`1px solid ${palette.divider}`}
>
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} border='none' />
) : (
<Box textAlign='center'>
<Typography>
You don’t have liquidity in this pool yet.
</Typography>
<Link
to={`/pools?currency0=${currencyId(
currency0,
)}¤cy1=${currencyId(currency1)}`}
style={{
color: palette.primary.main,
textDecoration: 'none',
}}
onClick={onClose}
>
<Typography>Add liquidity.</Typography>
</Link>
</Box>
)
) : validPairNoLiquidity ? (
<Box textAlign='center'>
<Typography>No pool found.</Typography>
<Link
to={`/pools?currency0=${currencyId(
currency0,
)}¤cy1=${currencyId(currency1)}`}
style={{
color: palette.primary.main,
textDecoration: 'none',
}}
onClick={onClose}
>
Create pool.
</Link>
</Box>
) : pairState === PairState.INVALID ? (
<Typography>Invalid pair.</Typography>
) : pairState === PairState.LOADING ? (
<Typography>Loading...</Typography>
) : null
) : (
<Typography>
{!account
? 'Connect to a wallet to find pools'
: 'Select a token to find your liquidity.'}
</Typography>
)}
</Box>
</Box>
{showSearch && (
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={
(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined
}
/>
)}
</CustomModal>
);
}
Example #2
| Source File: index.tsx From goose-frontend-amm with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account ? 'Connect to a wallet to find pools' : 'Select a token to find your liquidity.'}
</Text>
</LightCard>
)
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
fullWidth
>
{currency0 ? currency0.symbol : <TranslatedText translationId={82}>Select a Token</TranslatedText>}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
fullWidth
>
{currency1 ? currency1.symbol : <TranslatedText translationId={82}>Select a Token</TranslatedText>}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>Pool Found!</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>You don’t have liquidity in this pool yet.</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text style={{ textAlign: 'center' }}>
<TranslatedText translationId={100}>Add Liquidity</TranslatedText>
</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>No pool found.</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
<TranslatedText translationId={136}>Invalid pair.</TranslatedText>
</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</>
)
}
Example #3
| Source File: index.tsx From mozartfinance-swap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
const TranslateString = useI18n()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account
? TranslateString(1174, 'Connect to a wallet to find pools')
: TranslateString(208, 'Select a token to find your liquidity.')}
</Text>
</LightCard>
)
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency0 ? currency0.symbol : TranslateString(82, 'Select a Token')}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency1 ? currency1.symbol : TranslateString(82, 'Select a Token')}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>{TranslateString(210, 'Pool found!')}</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
{TranslateString(212, 'You don’t have liquidity in this pool yet.')}
</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text style={{ textAlign: 'center' }}>{TranslateString(168, 'Add Liquidity')}</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(214, 'No pool found.')}</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(136, 'Invalid pair.')}</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</>
)
}
Example #4
| Source File: index.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
const TranslateString = useI18n()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account
? TranslateString(1174, 'Connect to a wallet to find pools')
: TranslateString(208, 'Select a token to find your liquidity.')}
</Text>
</LightCard>
)
return (
<Container>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency0 ? currency0.symbol : TranslateString(82, 'Select a Token')}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency1 ? currency1.symbol : TranslateString(82, 'Select a Token')}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>{TranslateString(210, 'Pool found!')}</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
{TranslateString(212, 'You don’t have liquidity in this pool yet.')}
</Text>
<Text style={{ textAlign: 'center' }}>
{TranslateString(168, "You can't add liquidity on V1")}
</Text>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(214, 'No pool found.')}</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(136, 'Invalid pair.')}</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</Container>
)
}
Example #5
| Source File: index.tsx From pancake-swap-testnet with MIT License | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
const TranslateString = useI18n()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account
? TranslateString(1174, 'Connect to a wallet to find pools')
: TranslateString(208, 'Select a token to find your liquidity.')}
</Text>
</LightCard>
)
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency0 ? currency0.symbol : TranslateString(82, 'Select a Token')}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency1 ? currency1.symbol : TranslateString(82, 'Select a Token')}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>{TranslateString(210, 'Pool found!')}</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
{TranslateString(212, 'You don’t have liquidity in this pool yet.')}
</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text style={{ textAlign: 'center' }}>{TranslateString(168, 'Add Liquidity')}</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(214, 'No pool found.')}</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(136, 'Invalid pair.')}</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</>
)
}
Example #6
| Source File: index.tsx From pancake-swap-interface-v1 with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
const TranslateString = useI18n()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account
? TranslateString(1174, 'Connect to a wallet to find pools')
: TranslateString(208, 'Select a token to find your liquidity.')}
</Text>
</LightCard>
)
return (
<Container>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency0 ? currency0.symbol : TranslateString(82, 'Select a Token')}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency1 ? currency1.symbol : TranslateString(82, 'Select a Token')}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>{TranslateString(210, 'Pool found!')}</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
{TranslateString(212, 'You don’t have liquidity in this pool yet.')}
</Text>
<Text style={{ textAlign: 'center' }}>
{TranslateString(168, "You can't add liquidity on V1")}
</Text>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(214, 'No pool found.')}</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(136, 'Invalid pair.')}</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</Container>
)
}
Example #7
| Source File: index.tsx From panther-frontend-dex with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account ? 'Connect to a wallet to find pools' : 'Select a token to find your liquidity.'}
</Text>
</LightCard>
)
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
variant="secondary"
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="textSubtle" />}
fullWidth
>
{currency0 ? currency0.symbol : <TranslatedText translationId={82}>Select a Token</TranslatedText>}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
variant="secondary"
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="textSubtle" />}
fullWidth
>
{currency1 ? currency1.symbol : <TranslatedText translationId={82}>Select a Token</TranslatedText>}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>Pool Found!</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>You don’t have liquidity in this pool yet.</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text style={{ textAlign: 'center' }}>
<TranslatedText translationId={100}>Add Liquidity</TranslatedText>
</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>No pool found.</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
<TranslatedText translationId={136}>Invalid pair.</TranslatedText>
</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</>
)
}
Example #8
| Source File: index.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function PoolFinder() {
const { account } = useActiveWeb3React()
const [showSearch, setShowSearch] = useState<boolean>(false)
const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
const [currency0, setCurrency0] = useState<Currency | null>(ETHER)
const [currency1, setCurrency1] = useState<Currency | null>(null)
const [pairState, pair] = usePair(currency0 ?? undefined, currency1 ?? undefined)
const addPair = usePairAdder()
const TranslateString = useI18n()
useEffect(() => {
if (pair) {
addPair(pair)
}
}, [pair, addPair])
const validPairNoLiquidity: boolean =
pairState === PairState.NOT_EXISTS ||
Boolean(
pairState === PairState.EXISTS &&
pair &&
JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) &&
JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
)
const position: TokenAmount | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
const hasPosition = Boolean(position && JSBI.greaterThan(position.raw, JSBI.BigInt(0)))
const handleCurrencySelect = useCallback(
(currency: Currency) => {
if (activeField === Fields.TOKEN0) {
setCurrency0(currency)
} else {
setCurrency1(currency)
}
},
[activeField]
)
const handleSearchDismiss = useCallback(() => {
setShowSearch(false)
}, [setShowSearch])
const prerequisiteMessage = (
<LightCard padding="45px 10px">
<Text style={{ textAlign: 'center' }}>
{!account
? TranslateString(1174, 'Connect to a wallet to find pools')
: TranslateString(208, 'Select a token to find your liquidity.')}
</Text>
</LightCard>
)
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<FindPoolTabs />
<CardBody>
<AutoColumn gap="md">
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
startIcon={currency0 ? <CurrencyLogo currency={currency0} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency0 ? currency0.symbol : TranslateString(82, 'Select a Token')}
</Button>
<ColumnCenter>
<AddIcon color="textSubtle" />
</ColumnCenter>
<Button
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
startIcon={currency1 ? <CurrencyLogo currency={currency1} style={{ marginRight: '.5rem' }} /> : null}
endIcon={<ChevronDownIcon width="24px" color="white" />}
width="100%"
>
{currency1 ? currency1.symbol : TranslateString(82, 'Select a Token')}
</Button>
{hasPosition && (
<ColumnCenter
style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
>
<Text style={{ textAlign: 'center' }}>{TranslateString(210, 'Pool found!')}</Text>
</ColumnCenter>
)}
{currency0 && currency1 ? (
pairState === PairState.EXISTS ? (
hasPosition && pair ? (
<MinimalPositionCard pair={pair} />
) : (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
{TranslateString(212, 'You don’t have liquidity in this pool yet.')}
</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
<Text style={{ textAlign: 'center' }}>{TranslateString(168, 'Add Liquidity')}</Text>
</StyledInternalLink>
</AutoColumn>
</LightCard>
)
) : validPairNoLiquidity ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(214, 'No pool found.')}</Text>
<StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
Create pool.
</StyledInternalLink>
</AutoColumn>
</LightCard>
) : pairState === PairState.INVALID ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>{TranslateString(136, 'Invalid pair.')}</Text>
</AutoColumn>
</LightCard>
) : pairState === PairState.LOADING ? (
<LightCard padding="45px 10px">
<AutoColumn gap="sm" justify="center">
<Text style={{ textAlign: 'center' }}>
Loading
<Dots />
</Text>
</AutoColumn>
</LightCard>
) : null
) : (
prerequisiteMessage
)}
</AutoColumn>
<CurrencySearchModal
isOpen={showSearch}
onCurrencySelect={handleCurrencySelect}
onDismiss={handleSearchDismiss}
showCommonBases
selectedCurrency={(activeField === Fields.TOKEN0 ? currency1 : currency0) ?? undefined}
/>
</CardBody>
</AppBody>
</>
)
}
