react-feather#ArrowUpCircle TypeScript Examples
The following examples show how to use
react-feather#ArrowUpCircle.
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: TransactionSubmittedContent.tsx From goose-frontend-amm with GNU General Public License v3.0 | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getEtherscanLink(chainId, hash, 'transaction')}>View on bscscan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #2
| Source File: TransactionSubmittedContent.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getBscScanLink(chainId, hash, 'transaction')}>View on BscScan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #3
| Source File: EnergyStat.tsx From calories-in with MIT License | 6 votes |
|
function EnergyStat({ energy, energyDiff, ...rest }: Props) {
const energyValueDetail = `${Math.abs(energyDiff)}kcal`
const previousOrSameEnergyValueDetail = useSameOrPreviousValue(
energyValueDetail
)
return (
<Stat
justifyContent="flex-start"
type="dietEnergy"
label="Calories"
value={energy}
valueDetailElement={
energyDiff !== 0 ? (
<StatValueDetail
label={
energyDiff !== 0
? energyValueDetail
: previousOrSameEnergyValueDetail
}
tooltipLabel={'Energy change'}
leftIcon={
energyDiff > 0 ? (
<ArrowUpCircle width="15px" height="15px" />
) : (
<ArrowDownCircle width="15px" height="15px" />
)
}
/>
) : undefined
}
{...rest}
/>
)
}
Example #4
| Source File: TransactionSubmittedContent.tsx From panther-frontend-dex with GNU General Public License v3.0 | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getBscScanLink(chainId, hash, 'transaction')}>View on BscScan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #5
| Source File: TransactionSubmittedContent.tsx From pancake-swap-testnet with MIT License | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getBscScanLink(chainId, hash, 'transaction')}>View on BscScan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #6
| Source File: TransactionSubmittedContent.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getBscScanLink(chainId, hash, 'transaction')}>View on BscScan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #7
| Source File: TransactionSubmittedContent.tsx From mozartfinance-swap-interface with GNU General Public License v3.0 | 6 votes |
|
TransactionSubmittedContent = ({ onDismiss, chainId, hash }: TransactionSubmittedContentProps) => {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<ContentHeader onDismiss={onDismiss}>Transaction submitted</ContentHeader>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={97} color={theme.colors.primary} />
</ConfirmedIcon>
<AutoColumn gap="8px" justify="center">
{chainId && hash && (
<LinkExternal href={getBscScanLink(chainId, hash, 'transaction')}>View on BscScan</LinkExternal>
)}
<Button onClick={onDismiss} mt="20px">
Close
</Button>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #8
| Source File: index.tsx From dyp with Do What The F*ck You Want To Public License | 6 votes |
|
export function SubmittedView({
children,
onDismiss,
hash
}: {
children: any
onDismiss: () => void
hash: string | undefined
}) {
const theme = useContext(ThemeContext)
const { chainId } = useActiveWeb3React()
return (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
{children}
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
<TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
</ExternalLink>
)}
</AutoColumn>
</ConfirmOrLoadingWrapper>
)
}
Example #9
| Source File: index.tsx From sybil-interface with GNU General Public License v3.0 | 6 votes |
|
export function SubmittedView({
children,
onDismiss,
hash,
}: {
children: any
onDismiss: () => void
hash: string | undefined
}): JSX.Element {
const theme = useContext(ThemeContext)
const { chainId } = useActiveWeb3React()
return (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="2rem" justify={'center'}>
{children}
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
<TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
</ExternalLink>
)}
</AutoColumn>
</ConfirmOrLoadingWrapper>
)
}
Example #10
| Source File: index.tsx From limit-orders-lib with GNU General Public License v3.0 | 5 votes |
|
export function TransactionSubmittedContent({
onDismiss,
chainId,
hash,
inline,
}: {
onDismiss: () => void;
hash: string | undefined;
chainId: number;
currencyToAdd?: Currency | undefined;
inline?: boolean; // not in modal
}) {
const theme = useTheme();
return (
<Wrapper>
<Section inline={inline}>
{!inline && (
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
)}
<ConfirmedIcon inline={inline}>
<ArrowUpCircle
strokeWidth={0.5}
size={inline ? "40px" : "90px"}
color={theme.primary1}
/>
</ConfirmedIcon>
<AutoColumn gap="12px" justify={"center"}>
<Text fontWeight={500} fontSize={20} textAlign="center">
Transaction Submitted
</Text>
{chainId && hash && (
<ExternalLink
href={getExplorerLink(
chainId,
hash,
ExplorerDataType.TRANSACTION
)}
>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
View on Block Explorer
</Text>
</ExternalLink>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: "20px 0 0 0" }}>
<Text fontWeight={500} fontSize={20}>
{inline ? "Return" : "Close"}
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
);
}
Example #11
| Source File: index.tsx From cuiswap with GNU General Public License v3.0 | 5 votes |
|
function TransactionSubmittedContent({
onDismiss,
chainId,
hash
}: {
onDismiss: () => void
hash: string | undefined
chainId: ChainId
}) {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
Transaction Submitted
</Text>
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
View on Etherscan
</Text>
</ExternalLink>
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #12
| Source File: index.tsx From dyp with Do What The F*ck You Want To Public License | 5 votes |
|
function TransactionSubmittedContent({
onDismiss,
chainId,
hash
}: {
onDismiss: () => void
hash: string | undefined
chainId: ChainId
}) {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
Transaction Submitted
</Text>
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
View on Etherscan
</Text>
</ExternalLink>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #13
| Source File: index.tsx From cheeseswap-interface with GNU General Public License v3.0 | 5 votes |
|
function TransactionSubmittedContent({
onDismiss,
chainId,
hash,
currencyToAdd
}: {
onDismiss: () => void
hash: string | undefined
chainId: ChainId
currencyToAdd?: Currency | undefined
}) {
const theme = useContext(ThemeContext)
const { library } = useActiveWeb3React()
const { addToken, success } = useAddTokenToMetamask(currencyToAdd)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.colors.text1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={700} fontSize={18}>
Transaction Submitted
</Text>
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={700} fontSize={14} color={theme.colors.text2}>
View on bscscan.com
</Text>
</ExternalLink>
)}
{currencyToAdd && library?.provider?.isMetaMask && (
<ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={addToken}>
{!success ? (
<RowFixed>
Add {currencyToAdd.symbol} to Metamask <StyledLogo src={MetaMaskLogo} />
</RowFixed>
) : (
<RowFixed>
Added {currencyToAdd.symbol}{' '}
<CheckCircle size={'16px'} stroke={theme.colors.text2} style={{ marginLeft: '6px' }} />
</RowFixed>
)}
</ButtonLight>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={700} fontSize={18}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #14
| Source File: index.tsx From sushiswap-exchange with GNU General Public License v3.0 | 5 votes |
|
function TransactionSubmittedContent({
onDismiss,
chainId,
hash
}: {
onDismiss: () => void
hash: string | undefined
chainId: ChainId
}) {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
Transaction Submitted
</Text>
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
View on Etherscan
</Text>
</ExternalLink>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #15
| Source File: index.tsx From luaswap-interface with GNU General Public License v3.0 | 5 votes |
|
function TransactionSubmittedContent({
onDismiss,
chainId,
hash
}: {
onDismiss: () => void
hash: string | undefined
chainId: ChainId
}) {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
Transaction Submitted
</Text>
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
{NETWORK_SCAN[chainId]}
</Text>
</ExternalLink>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #16
| Source File: index.tsx From sybil-interface with GNU General Public License v3.0 | 5 votes |
|
export function TransactionSubmittedContent({
onDismiss,
chainId,
hash,
confirmationText,
}: {
onDismiss: () => void
hash?: string | undefined
chainId?: ChainId
confirmationText?: string
}): JSX.Element {
const theme = useContext(ThemeContext)
return (
<Wrapper>
<Section>
<RowBetween>
<div />
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
{confirmationText ?? 'Transaction Submitted'}
</Text>
{chainId && hash && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
View on Etherscan
</Text>
</ExternalLink>
)}
<ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</AutoColumn>
</Section>
</Wrapper>
)
}
Example #17
| Source File: VoteModal.tsx From dyp with Do What The F*ck You Want To Public License | 4 votes |
|
export default function VoteModal({ isOpen, onDismiss, proposalId, support }: VoteModalProps) {
const { chainId } = useActiveWeb3React()
const {
voteCallback
}: {
voteCallback: (proposalId: string | undefined, support: boolean) => Promise<string> | undefined
} = useVoteCallback()
const availableVotes: TokenAmount | undefined = useUserVotes()
// monitor call to help UI loading state
const [hash, setHash] = useState<string | undefined>()
const [attempting, setAttempting] = useState<boolean>(false)
// get theme for colors
const theme = useContext(ThemeContext)
// wrapper to reset state on modal close
function wrappedOndismiss() {
setHash(undefined)
setAttempting(false)
onDismiss()
}
async function onVote() {
setAttempting(true)
// if callback not returned properly ignore
if (!voteCallback) return
// try delegation and store hash
const hash = await voteCallback(proposalId, support)?.catch(error => {
setAttempting(false)
console.log(error)
})
if (hash) {
setHash(hash)
}
}
return (
<Modal isOpen={isOpen} onDismiss={wrappedOndismiss} maxHeight={90}>
{!attempting && !hash && (
<ContentWrapper gap="lg">
<AutoColumn gap="lg" justify="center">
<RowBetween>
<TYPE.mediumHeader fontWeight={500}>{`Vote ${
support ? 'for ' : 'against'
} proposal ${proposalId}`}</TYPE.mediumHeader>
<StyledClosed stroke="black" onClick={wrappedOndismiss} />
</RowBetween>
<TYPE.largeHeader>{availableVotes?.toSignificant(4)} Votes</TYPE.largeHeader>
<ButtonPrimary onClick={onVote}>
<TYPE.mediumHeader color="white">{`Vote ${
support ? 'for ' : 'against'
} proposal ${proposalId}`}</TYPE.mediumHeader>
</ButtonPrimary>
</AutoColumn>
</ContentWrapper>
)}
{attempting && !hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Submitting Vote</TYPE.largeHeader>
</AutoColumn>
<TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
{hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
</AutoColumn>
{chainId && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
<TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
</ExternalLink>
)}
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
</Modal>
)
}
Example #18
| Source File: VoteModal.tsx From sybil-interface with GNU General Public License v3.0 | 4 votes |
|
export default function VoteModal({ isOpen, onDismiss, proposalId, proposalTitle, support }: VoteModalProps) {
const { chainId } = useActiveWeb3React()
const {
voteCallback,
}: {
voteCallback: (proposalId: string | undefined, support: boolean) => Promise<string> | undefined
} = useVoteCallback()
const availableVotes: TokenAmount | undefined = useUserVotes()
// monitor call to help UI loading state
const [hash, setHash] = useState<string | undefined>()
const [attempting, setAttempting] = useState<boolean>(false)
// get theme for colors
const theme = useContext(ThemeContext)
const fallbackTitle = `Vote ${support ? 'for ' : 'against'} proposal ${proposalId}`
const title = proposalTitle ? proposalTitle : fallbackTitle
// wrapper to reset state on modal close
function wrappedOndismiss() {
setHash(undefined)
setAttempting(false)
onDismiss()
}
async function onVote() {
setAttempting(true)
// if callback not returned properly ignore
if (!voteCallback) return
// try delegation and store hash
const hash = await voteCallback(proposalId, support)?.catch((error) => {
setAttempting(false)
console.log(error)
})
if (hash) {
setHash(hash)
}
}
return (
<Modal isOpen={isOpen} onDismiss={wrappedOndismiss} maxHeight={90}>
{!attempting && !hash && (
<ContentWrapper gap="lg">
<AutoColumn gap="lg" justify="center">
<RowBetween>
<TYPE.mediumHeader fontWeight={500}>{title}</TYPE.mediumHeader>
<StyledClosed stroke="black" onClick={wrappedOndismiss} />
</RowBetween>
<TYPE.largeHeader>{availableVotes?.toSignificant(4)} Votes</TYPE.largeHeader>
<ButtonError error={!support} onClick={onVote}>
<TYPE.mediumHeader color="white">{`Vote ${
support ? 'for ' : 'against'
} proposal #${proposalId}`}</TYPE.mediumHeader>
</ButtonError>
</AutoColumn>
</ContentWrapper>
)}
{attempting && !hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Submitting Vote</TYPE.largeHeader>
</AutoColumn>
<TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
{hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
</AutoColumn>
{chainId && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
<TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
</ExternalLink>
)}
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
</Modal>
)
}
Example #19
| Source File: VoteModal.tsx From luaswap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function VoteModal({ isOpen, onDismiss, proposalId, support }: VoteModalProps) {
const { chainId } = useActiveWeb3React()
const {
voteCallback
}: {
voteCallback: (proposalId: string | undefined, support: boolean) => Promise<string> | undefined
} = useVoteCallback()
const availableVotes: TokenAmount | undefined = useUserVotes()
// monitor call to help UI loading state
const [hash, setHash] = useState<string | undefined>()
const [attempting, setAttempting] = useState<boolean>(false)
// get theme for colors
const theme = useContext(ThemeContext)
// wrapper to reset state on modal close
function wrappedOndismiss() {
setHash(undefined)
setAttempting(false)
onDismiss()
}
async function onVote() {
setAttempting(true)
// if callback not returned properly ignore
if (!voteCallback) return
// try delegation and store hash
const hash = await voteCallback(proposalId, support)?.catch(error => {
setAttempting(false)
console.log(error)
})
if (hash) {
setHash(hash)
}
}
return (
<Modal isOpen={isOpen} onDismiss={wrappedOndismiss} maxHeight={90}>
{!attempting && !hash && (
<ContentWrapper gap="lg">
<AutoColumn gap="lg" justify="center">
<RowBetween>
<TYPE.mediumHeader fontWeight={500}>{`Vote ${
support ? 'for ' : 'against'
} proposal ${proposalId}`}</TYPE.mediumHeader>
<StyledClosed stroke="black" onClick={wrappedOndismiss} />
</RowBetween>
<TYPE.largeHeader>{availableVotes?.toSignificant(4)} Votes</TYPE.largeHeader>
<ButtonPrimary onClick={onVote}>
<TYPE.mediumHeader color="white">{`Vote ${
support ? 'for ' : 'against'
} proposal ${proposalId}`}</TYPE.mediumHeader>
</ButtonPrimary>
</AutoColumn>
</ContentWrapper>
)}
{attempting && !hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Submitting Vote</TYPE.largeHeader>
</AutoColumn>
<TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
{hash && (
<ConfirmOrLoadingWrapper>
<RowBetween>
<div />
<StyledClosed onClick={wrappedOndismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
</AutoColumn>
{chainId && (
<ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
<TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
</ExternalLink>
)}
</AutoColumn>
</ConfirmOrLoadingWrapper>
)}
</Modal>
)
}
