diff --git a/ui/page/buy/view.jsx b/ui/page/buy/view.jsx index 38ee47e17..9e5facf56 100644 --- a/ui/page/buy/view.jsx +++ b/ui/page/buy/view.jsx @@ -11,6 +11,7 @@ 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'; const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY; const COUNTRIES = Array.from( @@ -42,10 +43,10 @@ type Props = { export default function BuyPage(props: Props) { const { receiveAddress, gettingNewAddress, doGetNewAddress, email, user, doUserSetCountry } = props; - const initialCountry = user && user.country; + const initialCountry = (user && user.country) || ''; const [url, setUrl] = React.useState(); const [country, setCountry] = React.useState(initialCountry); - const [ShowPurchaseScreen, setShowPurchaseScreen] = React.useState(false); + const [showPurchaseScreen, setShowPurchaseScreen] = React.useState(false); const isValid = SUPPORTED_MOONPAY_COUNTRIES.includes(country); const { goBack } = useHistory(); @@ -53,11 +54,6 @@ export default function BuyPage(props: Props) { if (country) { doUserSetCountry(country); } - - // uncomment to auto show the purchase screen based on their chosen country - // if (isValid) { - // setShowPurchaseScreen(true); - // } }, [country, doUserSetCountry, isValid, setShowPurchaseScreen]); React.useEffect(() => { @@ -80,6 +76,17 @@ export default function BuyPage(props: Props) { } }, [url, setUrl, receiveAddress, email]); + const title = __('Buy LBRY Credits'); + const subtitle = ( + , + }} + > + LBRY, Inc. partners with Moonpay to provide the option to purchase LBC. %learn_more%. + + ); + return ( {!user && ( @@ -90,10 +97,10 @@ export default function BuyPage(props: Props) { {user && ( <> - {ShowPurchaseScreen ? ( + {showPurchaseScreen ? ( ) : ( } actions={
@@ -123,6 +130,9 @@ export default function BuyPage(props: Props) { label={__('Country')} type="select" name="country-codes" + helper={__( + 'Only some countries are eligible at this time. We are working to make this available to everyone.' + )} value={country} onChange={e => setCountry(e.target.value)} > @@ -144,7 +154,7 @@ export default function BuyPage(props: Props) {
) : (
-
)} diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 7c7b4bb98..6125614e2 100644 --- a/ui/scss/component/_main.scss +++ b/ui/scss/component/_main.scss @@ -54,7 +54,6 @@ iframe { min-height: 420px; background-color: var(--color-card-background); - margin: -0.8rem; margin-bottom: 2rem; }