@fortawesome/free-solid-svg-icons#faDollarSign TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faDollarSign.
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: IconPriceTier.tsx From mysterium-vpn-desktop with MIT License | 6 votes |
|
IconPriceTier: React.FC<IconPriceTierProps> = (props) => {
return (
<Container>
<Dollar icon={faDollarSign} opacity={props.tier > 0 ? 1 : 0.2} />
<Dollar icon={faDollarSign} opacity={props.tier > 1 ? 1 : 0.2} />
<Dollar icon={faDollarSign} opacity={props.tier > 2 ? 1 : 0.2} />
</Container>
)
}
Example #2
| Source File: PaypalPaymentOptions.tsx From mysterium-vpn-desktop with MIT License | 4 votes |
|
PaypalPaymentOptions: React.FC = observer(() => {
const { payment } = useStores()
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const isOptionActive = (cur: string) => {
return payment.paymentCurrency == cur
}
const selectOption = (cur: string) => () => {
payment.setPaymentCurrency(cur)
}
const handleNextClick = async () => {
setLoading(() => true)
try {
await payment.createOrder()
setLoading(() => false)
navigate("../" + topupSteps.paypalOrderSummary)
} catch (err) {
setLoading(() => false)
const msg = parseError(err)
logErrorMessage("Could not create a payment order", msg)
toast.error(dismissibleToast(<span>{msg.humanReadable}</span>))
}
}
const options = payment.paymentMethod?.gatewayData.currencies || []
return (
<ViewContainer>
<ViewNavBar onBack={() => navigate(-1)}>
<div style={{ width: 375, textAlign: "center" }}>
<StepProgressBar step={1} />
</div>
</ViewNavBar>
<ViewSplit>
<ViewSidebar>
<SideTop>
<IconWallet color={brandLight} />
<Title>Top up your account</Title>
<TitleDescription>Select the payment options</TitleDescription>
</SideTop>
<SideBot>
<PaymentOption>Payment currency:</PaymentOption>
<AmountSelect>
{options.map((opt) => {
let currencyIcon = faQuestionCircle
switch (opt) {
case "EUR":
currencyIcon = faEuroSign
break
case "USD":
currencyIcon = faDollarSign
break
case "GBP":
currencyIcon = faPoundSign
break
}
return (
<AmountToggle
key={opt}
active={isOptionActive(opt)}
onClick={selectOption(opt)}
inactiveColor={lightBlue}
height="36px"
justify="center"
>
<div style={{ textAlign: "center" }}>
<OptionValue>
<FontAwesomeIcon icon={currencyIcon} fixedWidth size="sm" />
{opt}
</OptionValue>
</div>
</AmountToggle>
)
})}
</AmountSelect>
<PaymentOption>Tax residence country (VAT):</PaymentOption>
<SelectTaxCountry />
<BrandButton
style={{ marginTop: "auto" }}
onClick={handleNextClick}
loading={loading}
disabled={loading || !payment.paymentCurrency || !payment.taxCountry}
>
Next
</BrandButton>
</SideBot>
</ViewSidebar>
<ViewContent />
</ViewSplit>
</ViewContainer>
)
})
Example #3
| Source File: StripePaymentOptions.tsx From mysterium-vpn-desktop with MIT License | 4 votes |
|
StripePaymentOptions: React.FC = observer(() => {
const { payment } = useStores()
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const isOptionActive = (cur: string) => {
return payment.paymentCurrency == cur
}
const selectOption = (cur: string) => () => {
payment.setPaymentCurrency(cur)
}
const handleNextClick = async () => {
setLoading(() => true)
try {
await payment.createOrder()
setLoading(() => false)
navigate("../" + topupSteps.stripeOrderSummary)
} catch (err) {
setLoading(() => false)
const msg = parseError(err)
logErrorMessage("Could not create a payment order", msg)
toast.error(dismissibleToast(<span>{msg.humanReadable}</span>))
}
}
const options = payment.paymentMethod?.gatewayData.currencies || []
return (
<ViewContainer>
<ViewNavBar onBack={() => navigate(-1)}>
<div style={{ width: 375, textAlign: "center" }}>
<StepProgressBar step={1} />
</div>
</ViewNavBar>
<ViewSplit>
<ViewSidebar>
<SideTop>
<IconWallet color={brandLight} />
<Title>Top up your account</Title>
<TitleDescription>Select the payment options</TitleDescription>
</SideTop>
<SideBot>
<PaymentOption>Payment currency:</PaymentOption>
<AmountSelect>
{options.map((opt) => {
let currencyIcon = faQuestionCircle
switch (opt) {
case "EUR":
currencyIcon = faEuroSign
break
case "USD":
currencyIcon = faDollarSign
break
case "GBP":
currencyIcon = faPoundSign
break
}
return (
<AmountToggle
key={opt}
active={isOptionActive(opt)}
onClick={selectOption(opt)}
inactiveColor={lightBlue}
height="36px"
justify="center"
>
<div style={{ textAlign: "center" }}>
<OptionValue>
<FontAwesomeIcon icon={currencyIcon} fixedWidth size="sm" />
{opt}
</OptionValue>
</div>
</AmountToggle>
)
})}
</AmountSelect>
<PaymentOption>Tax residence country (VAT):</PaymentOption>
<SelectTaxCountry />
<BrandButton
style={{ marginTop: "auto" }}
onClick={handleNextClick}
loading={loading}
disabled={loading || !payment.paymentCurrency || !payment.taxCountry}
>
Next
</BrandButton>
</SideBot>
</ViewSidebar>
<ViewContent />
</ViewSplit>
</ViewContainer>
)
})
