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 = {
|
||||
errorMessage: ?string,
|
||||
inviteNew: string => void,
|
||||
inviteNew: (string) => void,
|
||||
isPending: boolean,
|
||||
referralLink: string,
|
||||
referralCode: string,
|
||||
|
|
@ -35,10 +35,10 @@ function InviteNew(props: Props) {
|
|||
const [referralSource, setReferralSource] = useState(referralCode);
|
||||
|
||||
const handleReferralChange = React.useCallback(
|
||||
code => {
|
||||
(code) => {
|
||||
setReferralSource(code);
|
||||
// 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) {
|
||||
analytics.apiLogPublish(matchingChannel);
|
||||
}
|
||||
|
|
@ -68,80 +68,85 @@ function InviteNew(props: Props) {
|
|||
}, [topChannel, handleReferralChange]);
|
||||
|
||||
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 (
|
||||
<div className={'columns'}>
|
||||
<Card
|
||||
title={__('Invites')}
|
||||
subtitle={
|
||||
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
||||
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
|
||||
You can use invites just like affiliate links.
|
||||
</I18nMessage>
|
||||
}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<CopyableText label={__('Your invite link')} copyable={referral} />
|
||||
{channels && channels.length > 0 && (
|
||||
<FormField
|
||||
type="select"
|
||||
label={__('Customize link')}
|
||||
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" />,
|
||||
}}
|
||||
<div className="column">
|
||||
<Card
|
||||
title={__('Invites')}
|
||||
subtitle={
|
||||
<I18nMessage tokens={{ SITE_NAME, lbc: <LbcSymbol /> }}>
|
||||
Earn %lbc% for inviting subscribers, followers, fans, friends, etc. to join and follow you on %SITE_NAME%.
|
||||
You can use invites just like affiliate links.
|
||||
</I18nMessage>
|
||||
}
|
||||
actions={
|
||||
<React.Fragment>
|
||||
<CopyableText label={__('Your invite link')} copyable={referral} />
|
||||
{channels && channels.length > 0 && (
|
||||
<FormField
|
||||
type="select"
|
||||
label={__('Customize link')}
|
||||
value={referralSource}
|
||||
onChange={(e) => handleReferralChange(e.target.value)}
|
||||
>
|
||||
Read our %referral_faq_link% to learn more about rewards.
|
||||
</I18nMessage>
|
||||
</p>
|
||||
</Form>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
{channels.map((channel) => (
|
||||
<option key={channel.claim_id} value={channel.name}>
|
||||
{channel.name}
|
||||
</option>
|
||||
))}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,127 +65,137 @@ const WalletBalance = (props: Props) => {
|
|||
|
||||
return (
|
||||
<div className={'columns'}>
|
||||
<Card
|
||||
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
|
||||
subtitle={
|
||||
totalLocked > 0 ? (
|
||||
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
||||
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
|
||||
</I18nMessage>
|
||||
) : (
|
||||
<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%
|
||||
<div className="column">
|
||||
<Card
|
||||
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
|
||||
subtitle={
|
||||
totalLocked > 0 ? (
|
||||
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
|
||||
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
|
||||
</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 */}
|
||||
<WalletFiatBalance />
|
||||
<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>
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">
|
||||
{/* fiat balance card */}
|
||||
<WalletFiatBalance />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue