// @flow import React from 'react'; import Page from 'component/page'; import Card from 'component/common/card'; import Spinner from 'component/spinner'; import hmacSHA256 from 'crypto-js/hmac-sha256'; import Base64 from 'crypto-js/enc-base64'; import { countries as countryData } from 'country-data'; import { FormField } from 'component/common/form'; import { SUPPORTED_MOONPAY_COUNTRIES } from 'constants/moonpay'; import { useHistory } from 'react-router'; import Button from 'component/button'; import Nag from 'component/common/nag'; import I18nMessage from 'component/i18nMessage'; import LbcSymbol from 'component/common/lbc-symbol'; const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY; const COUNTRIES = Array.from( new Set( countryData.all .map(country => country.name) .sort((a, b) => { if (a > b) { return 1; } if (b > a) { return -1; } return 0; }) ) ); type Props = { receiveAddress: ?string, gettingNewAddress: boolean, email: string, user: ?User, doGetNewAddress: () => void, doUserSetCountry: string => void, }; export default function BuyPage(props: Props) { const { receiveAddress, gettingNewAddress, doGetNewAddress, email, user, doUserSetCountry } = props; const initialCountry = (user && user.country) || ''; const [url, setUrl] = React.useState(); const [country, setCountry] = React.useState(initialCountry); const [showPurchaseScreen, setShowPurchaseScreen] = React.useState(false); const isValid = SUPPORTED_MOONPAY_COUNTRIES.includes(country); const { goBack } = useHistory(); React.useEffect(() => { if (country) { doUserSetCountry(country); } }, [country, doUserSetCountry, isValid, setShowPurchaseScreen]); React.useEffect(() => { if (!receiveAddress && !gettingNewAddress) { doGetNewAddress(); } }, [doGetNewAddress, receiveAddress, gettingNewAddress]); React.useEffect(() => { if (MOONPAY_KEY && !url && receiveAddress) { let url = `https://buy.moonpay.io?apiKey=pk_live_xNFffrN5NWKy6fu0ggbV8VQIwRieRzy&colorCode=%23257761¤cyCode=lbc&showWalletAddressForm=true&walletAddress=${receiveAddress}`; if (email) { url += `&email=${encodeURIComponent(email)}`; } url += `&enabledPaymentMethods=${encodeURIComponent('credit_debit_card,sepa_bank_transfer,gbp_bank_transfer')}`; const query = new URL(url).search; const signature = Base64.stringify(hmacSHA256(query, MOONPAY_KEY)); setUrl(`${url}&signature=${encodeURIComponent(signature)}`); } }, [url, setUrl, receiveAddress, email]); const title = __('Buy Credits'); const subtitle = ( , }} > LBRY, Inc. partners with Moonpay to provide the option to purchase LBRY Credits. %learn_more%. ); return ( ), }} > {!user && (
)} {user && ( <> {showPurchaseScreen ? (

{__('Your browser does not support iframes.')}

) : (
) } /> ) : ( } actions={
setCountry(e.target.value)} > {COUNTRIES.map((country, index) => ( ))}
{country && (
{isValid ? (
) : (
)}
)}
} /> )} )}
); }