patch column cards
This commit is contained in:
zeppi
jessopb
parent
68697baaf4
commit
1785009fa1
2 changed files with 205 additions and 190 deletions
|
|
@ -11,7 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
errorMessage: ?string,
|
errorMessage: ?string,
|
||||||
inviteNew: string => void,
|
inviteNew: (string) => void,
|
||||||
isPending: boolean,
|
isPending: boolean,
|
||||||
referralLink: string,
|
referralLink: string,
|
||||||
referralCode: string,
|
referralCode: string,
|
||||||
|
|
@ -35,10 +35,10 @@ function InviteNew(props: Props) {
|
||||||
const [referralSource, setReferralSource] = useState(referralCode);
|
const [referralSource, setReferralSource] = useState(referralCode);
|
||||||
|
|
||||||
const handleReferralChange = React.useCallback(
|
const handleReferralChange = React.useCallback(
|
||||||
code => {
|
(code) => {
|
||||||
setReferralSource(code);
|
setReferralSource(code);
|
||||||
// TODO: keep track of this in an array?
|
// TODO: keep track of this in an array?
|
||||||
const matchingChannel = channels && channels.find(ch => ch.name === code);
|
const matchingChannel = channels && channels.find((ch) => ch.name === code);
|
||||||
if (matchingChannel) {
|
if (matchingChannel) {
|
||||||
analytics.apiLogPublish(matchingChannel);
|
analytics.apiLogPublish(matchingChannel);
|
||||||
}
|
}
|
||||||
|
|
@ -68,80 +68,85 @@ function InviteNew(props: Props) {
|
||||||
}, [topChannel, handleReferralChange]);
|
}, [topChannel, handleReferralChange]);
|
||||||
|
|
||||||
function lookupUrlByClaimName(name, channels) {
|
function lookupUrlByClaimName(name, channels) {
|
||||||
const claim = channels.find(channel => channel.name === name);
|
const claim = channels.find((channel) => channel.name === name);
|
||||||
return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
|
return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'columns'}>
|
<div className={'columns'}>
|
||||||
<Card
|
<div className="column">
|
||||||
title={__('Invites')}
|
<Card
|
||||||
subtitle={
|
title={__('Invites')}
|
||||||
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
subtitle={
|
||||||
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
|
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
||||||
You can use invites just like affiliate links.
|
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
|
||||||
</I18nMessage>
|
You can use invites just like affiliate links.
|
||||||
}
|
</I18nMessage>
|
||||||
actions={
|
}
|
||||||
<React.Fragment>
|
actions={
|
||||||
<CopyableText label={__('Your invite link')} copyable={referral} />
|
<React.Fragment>
|
||||||
{channels && channels.length > 0 && (
|
<CopyableText label={__('Your invite link')} copyable={referral} />
|
||||||
<FormField
|
{channels && channels.length > 0 && (
|
||||||
type="select"
|
<FormField
|
||||||
label={__('Customize link')}
|
type="select"
|
||||||
value={referralSource}
|
label={__('Customize link')}
|
||||||
onChange={e => handleReferralChange(e.target.value)}
|
value={referralSource}
|
||||||
>
|
onChange={(e) => handleReferralChange(e.target.value)}
|
||||||
{channels.map(channel => (
|
|
||||||
<option key={channel.claim_id} value={channel.name}>
|
|
||||||
{channel.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
<option value={referralCode}>{referralCode}</option>
|
|
||||||
</FormField>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Card
|
|
||||||
title={__('Invite by email')}
|
|
||||||
subtitle={
|
|
||||||
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
|
||||||
Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
|
|
||||||
</I18nMessage>
|
|
||||||
}
|
|
||||||
actions={
|
|
||||||
<React.Fragment>
|
|
||||||
<Form onSubmit={handleSubmit}>
|
|
||||||
<FormField
|
|
||||||
type="text"
|
|
||||||
label={__('Email')}
|
|
||||||
placeholder="youremail@example.org"
|
|
||||||
name="email"
|
|
||||||
value={email}
|
|
||||||
error={errorMessage}
|
|
||||||
inputButton={
|
|
||||||
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
|
|
||||||
}
|
|
||||||
onChange={event => {
|
|
||||||
handleEmailChanged(event);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<p className="help">
|
|
||||||
<I18nMessage
|
|
||||||
tokens={{
|
|
||||||
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
|
|
||||||
referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Read our %referral_faq_link% to learn more about rewards.
|
{channels.map((channel) => (
|
||||||
</I18nMessage>
|
<option key={channel.claim_id} value={channel.name}>
|
||||||
</p>
|
{channel.name}
|
||||||
</Form>
|
</option>
|
||||||
</React.Fragment>
|
))}
|
||||||
}
|
<option value={referralCode}>{referralCode}</option>
|
||||||
/>
|
</FormField>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="column">
|
||||||
|
<Card
|
||||||
|
title={__('Invite by email')}
|
||||||
|
subtitle={
|
||||||
|
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
||||||
|
Invite someone you know by email and earn %lbc% when they join %SITE_NAME%.
|
||||||
|
</I18nMessage>
|
||||||
|
}
|
||||||
|
actions={
|
||||||
|
<React.Fragment>
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<FormField
|
||||||
|
type="text"
|
||||||
|
label={__('Email')}
|
||||||
|
placeholder="youremail@example.org"
|
||||||
|
name="email"
|
||||||
|
value={email}
|
||||||
|
error={errorMessage}
|
||||||
|
inputButton={
|
||||||
|
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
|
||||||
|
}
|
||||||
|
onChange={(event) => {
|
||||||
|
handleEmailChanged(event);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<p className="help">
|
||||||
|
<I18nMessage
|
||||||
|
tokens={{
|
||||||
|
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
|
||||||
|
referral_faq_link: (
|
||||||
|
<Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Read our %referral_faq_link% to learn more about rewards.
|
||||||
|
</I18nMessage>
|
||||||
|
</p>
|
||||||
|
</Form>
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -65,127 +65,137 @@ const WalletBalance = (props: Props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'columns'}>
|
<div className={'columns'}>
|
||||||
<Card
|
<div className="column">
|
||||||
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
|
<Card
|
||||||
subtitle={
|
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
|
||||||
totalLocked > 0 ? (
|
subtitle={
|
||||||
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
totalLocked > 0 ? (
|
||||||
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
|
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
||||||
</I18nMessage>
|
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
|
||||||
) : (
|
|
||||||
<span>{__('Your total balance.')}</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
actions={
|
|
||||||
<>
|
|
||||||
<h2 className="section__title--small">
|
|
||||||
<I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
|
|
||||||
%lbc_amount% immediately spendable
|
|
||||||
</I18nMessage>
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<h2 className="section__title--small">
|
|
||||||
<I18nMessage
|
|
||||||
tokens={{
|
|
||||||
lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
%lbc_amount% boosting content
|
|
||||||
</I18nMessage>
|
|
||||||
<Button
|
|
||||||
button="link"
|
|
||||||
label={detailsExpanded ? __('View less') : __('View more')}
|
|
||||||
iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
|
|
||||||
onClick={() => setDetailsExpanded(!detailsExpanded)}
|
|
||||||
/>
|
|
||||||
</h2>
|
|
||||||
{detailsExpanded && (
|
|
||||||
<div className="section__subtitle">
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
<span className="dt__text">{__('...earned from others')}</span>
|
|
||||||
<span className="help--dt">({__('Unlock to spend')})</span>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<span className="dd__text">
|
|
||||||
{Boolean(tipsBalance) && (
|
|
||||||
<Button
|
|
||||||
button="link"
|
|
||||||
className="dd__button"
|
|
||||||
disabled={operationPending}
|
|
||||||
icon={ICONS.UNLOCK}
|
|
||||||
onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<CreditAmount amount={tipsBalance} precision={4} />
|
|
||||||
</span>
|
|
||||||
</dd>
|
|
||||||
|
|
||||||
<dt>
|
|
||||||
<span className="dt__text">{__('...on initial publishes')}</span>
|
|
||||||
<span className="help--dt">({__('Delete or edit past content to spend')})</span>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<CreditAmount amount={claimsBalance} precision={4} />
|
|
||||||
</dd>
|
|
||||||
|
|
||||||
<dt>
|
|
||||||
<span className="dt__text">{__('...supporting content')}</span>
|
|
||||||
<span className="help--dt">({__('Delete supports to spend')})</span>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<CreditAmount amount={supportsBalance} precision={4} />
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
|
||||||
{hasSynced ? (
|
|
||||||
<p className="section help">
|
|
||||||
{__('A backup of your wallet is synced with lbry.tv.')}
|
|
||||||
<HelpLink href="https://lbry.com/faq/account-sync" />
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<p className="help--warning">
|
|
||||||
{__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
|
|
||||||
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{/* @endif */}
|
|
||||||
<div className="section__actions">
|
|
||||||
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
|
|
||||||
<Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
|
|
||||||
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
|
|
||||||
</div>
|
|
||||||
{(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
|
|
||||||
<p className="help">
|
|
||||||
<I18nMessage
|
|
||||||
tokens={{
|
|
||||||
now: (
|
|
||||||
<Button
|
|
||||||
button="link"
|
|
||||||
onClick={() => doUtxoConsolidate()}
|
|
||||||
disabled={operationPending}
|
|
||||||
label={
|
|
||||||
consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
|
|
||||||
take some time. %now%%help%
|
|
||||||
</I18nMessage>
|
</I18nMessage>
|
||||||
</p>
|
) : (
|
||||||
)}
|
<span>{__('Your total balance.')}</span>
|
||||||
</>
|
)
|
||||||
}
|
}
|
||||||
/>
|
actions={
|
||||||
|
<>
|
||||||
|
<h2 className="section__title--small">
|
||||||
|
<I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
|
||||||
|
%lbc_amount% immediately spendable
|
||||||
|
</I18nMessage>
|
||||||
|
</h2>
|
||||||
|
|
||||||
{/* fiat balance card */}
|
<h2 className="section__title--small">
|
||||||
<WalletFiatBalance />
|
<I18nMessage
|
||||||
|
tokens={{
|
||||||
|
lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
%lbc_amount% boosting content
|
||||||
|
</I18nMessage>
|
||||||
|
<Button
|
||||||
|
button="link"
|
||||||
|
label={detailsExpanded ? __('View less') : __('View more')}
|
||||||
|
iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
|
||||||
|
onClick={() => setDetailsExpanded(!detailsExpanded)}
|
||||||
|
/>
|
||||||
|
</h2>
|
||||||
|
{detailsExpanded && (
|
||||||
|
<div className="section__subtitle">
|
||||||
|
<dl>
|
||||||
|
<dt>
|
||||||
|
<span className="dt__text">{__('...earned from others')}</span>
|
||||||
|
<span className="help--dt">({__('Unlock to spend')})</span>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<span className="dd__text">
|
||||||
|
{Boolean(tipsBalance) && (
|
||||||
|
<Button
|
||||||
|
button="link"
|
||||||
|
className="dd__button"
|
||||||
|
disabled={operationPending}
|
||||||
|
icon={ICONS.UNLOCK}
|
||||||
|
onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<CreditAmount amount={tipsBalance} precision={4} />
|
||||||
|
</span>
|
||||||
|
</dd>
|
||||||
|
|
||||||
|
<dt>
|
||||||
|
<span className="dt__text">{__('...on initial publishes')}</span>
|
||||||
|
<span className="help--dt">({__('Delete or edit past content to spend')})</span>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<CreditAmount amount={claimsBalance} precision={4} />
|
||||||
|
</dd>
|
||||||
|
|
||||||
|
<dt>
|
||||||
|
<span className="dt__text">{__('...supporting content')}</span>
|
||||||
|
<span className="help--dt">({__('Delete supports to spend')})</span>
|
||||||
|
</dt>
|
||||||
|
<dd>
|
||||||
|
<CreditAmount amount={supportsBalance} precision={4} />
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* @if TARGET='app' */}
|
||||||
|
{hasSynced ? (
|
||||||
|
<p className="section help">
|
||||||
|
{__('A backup of your wallet is synced with lbry.tv.')}
|
||||||
|
<HelpLink href="https://lbry.com/faq/account-sync" />
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="help--warning">
|
||||||
|
{__(
|
||||||
|
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
|
||||||
|
)}
|
||||||
|
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{/* @endif */}
|
||||||
|
<div className="section__actions">
|
||||||
|
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
|
||||||
|
<Button
|
||||||
|
button="secondary"
|
||||||
|
label={__('Receive')}
|
||||||
|
icon={ICONS.RECEIVE}
|
||||||
|
navigate={`/$/${PAGES.RECEIVE}`}
|
||||||
|
/>
|
||||||
|
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
|
||||||
|
</div>
|
||||||
|
{(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
|
||||||
|
<p className="help">
|
||||||
|
<I18nMessage
|
||||||
|
tokens={{
|
||||||
|
now: (
|
||||||
|
<Button
|
||||||
|
button="link"
|
||||||
|
onClick={() => doUtxoConsolidate()}
|
||||||
|
disabled={operationPending}
|
||||||
|
label={
|
||||||
|
consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This
|
||||||
|
could take some time. %now%%help%
|
||||||
|
</I18nMessage>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="column">
|
||||||
|
{/* fiat balance card */}
|
||||||
|
<WalletFiatBalance />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue