Skip to content

Commit

Permalink
Add USDC minTip/hyperchat (#3219)
Browse files Browse the repository at this point in the history 
* Add USDC minTip/hyperchat in channel settings
Add USDC minTip/hyperchat in file page
Partly add USDC icon (used currently with fiat tips)
Align LBC icon better with text

* USDC -> USD (UI icons/text)

* Remove bit more USDC

* Separate the debounces for lbc/usdc settings updates

* Show warning when only one currency limit set + other fixes
  - Don't update the field while editing
  - Clearing a field sets value to 0

* Remove duplicate lines

* Fix hyperchat limit width issue on livestreams

* Change amount to match commentron change OdyseeTeam/commentron#168

* Forgot to removed this earlier

* Update setting warnings

* Minor clean (forgot to delete line)

---------

Co-authored-by: miko <[email protected]>
  • Loading branch information
@keikari
keikari and miko authored Jan 31, 2025
1 parent 8e8b281 commit 2a9e1ce
Show file tree
Hide file tree
Showing 9 changed files with 225 additions and 30 deletions.
6 changes: 6 additions & 0 deletions flow-typed/Comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ declare type PerChannelSettings = {
comments_enabled?: boolean,
min_tip_amount_comment?: number,
min_tip_amount_super_chat?: number,
min_usdc_tip_amount_comment?: number,
min_usdc_tip_amount_super_chat?: number,
slow_mode_min_gap?: number,
time_since_first_comment?: number,
livestream_chat_members_only?: boolean,
Expand Down Expand Up @@ -345,6 +347,8 @@ declare type SettingsResponse = {
comments_enabled: boolean,
min_tip_amount_comment: number,
min_tip_amount_super_chat: number,
min_usdc_tip_amount_comment: number,
min_usdc_tip_amount_super_chat: number,
slow_mode_min_gap: number,
curse_jar_amount: number,
filters_enabled?: boolean,
Expand All @@ -360,6 +364,8 @@ declare type UpdateSettingsParams = {
comments_enabled?: boolean,
min_tip_amount_comment?: number,
min_tip_amount_super_chat?: number,
min_usdc_tip_amount_comment?: number,
min_usdc_tip_amount_super_chat?: number,
slow_mode_min_gap?: number,
time_since_first_comment?: number,
livestream_chat_members_only?: boolean,
Expand Down
20 changes: 16 additions & 4 deletions ui/component/commentCreate/internal/extra-contents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,31 @@ type HelpTextProps = {
minAmount: number,
minSuper: number,
minTip: number,
minUSDCAmount: number,
minUSDCSuper: number,
minUSDCTip: number,
};

export const HelpText = (helpTextProps: HelpTextProps) => {
const { deletedComment, minAmount, minSuper, minTip } = helpTextProps;
const { deletedComment, minAmount, minSuper, minTip, minUSDCAmount, minUSDCSuper, minUSDCTip } = helpTextProps;

return (
<>
{deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}

{!!minAmount && (
{(!!minAmount || !!minUSDCAmount) && (
<div className="help--notice comment-create__min-amount-notice">
<I18nMessage tokens={{ lbc: <CreditAmount noFormat amount={minAmount} /> }}>
{minTip ? 'Comment min: %lbc%' : minSuper ? 'HyperChat min: %lbc%' : ''}
<I18nMessage
tokens={{
usdc: <CreditAmount noFormat isFiat amount={minUSDCAmount} />,
minUSDCAmount,
lbc: <CreditAmount noFormat amount={minAmount} />,
}}
>
{(minTip || minUSDCTip ? 'Comment min: ' : minSuper || minUSDCSuper ? 'HyperChat min: ' : '') +
(minTip || minSuper ? '%lbc%' : '') +
(minAmount && minUSDCAmount ? ' or ' : '') +
(minUSDCTip || minUSDCSuper ? '%usdc%' : '')}
</I18nMessage>

<Icon
Expand Down
3 changes: 2 additions & 1 deletion ui/component/commentCreate/style.lazy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,9 @@
margin-top: calc(var(--spacing-xxs) - 2px);
padding-top: calc(var(--spacing-xs) + 1px);
height: var(--height-button);
text-align: center;
.icon {
margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
margin-bottom: 1px; // TODO fix few instances of these (find "-2px")
}

@media (max-width: $breakpoint-small) {
Expand Down
48 changes: 40 additions & 8 deletions ui/component/commentCreate/view.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,14 +193,22 @@ export function CommentCreate(props: Props) {
disableInput;
const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0;
const minTip = (channelSettings && channelSettings.min_tip_amount_comment) || 0;
const minUSDCSuper = (channelSettings && channelSettings.min_usdc_tip_amount_super_chat) || 0;
const minUSDCTip = (channelSettings && channelSettings.min_usdc_tip_amount_comment) || 0;
const minAmount = minTip || minSuper || 0;
const minAmountMet = activeTab !== TAB_LBC || minAmount === 0 || tipAmount >= minAmount;
const minUSDCAmount = minUSDCTip || minUSDCSuper || 0;
const minAmountMet =
(activeTab !== TAB_LBC && activeTab !== TAB_FIAT && !minTip && !minUSDCTip) ||
(activeTab === TAB_LBC && tipAmount >= minAmount) ||
(activeTab === TAB_FIAT && tipAmount >= minUSDCAmount);
const stickerPrice = selectedSticker && selectedSticker.price;
const tipSelectorError = tipError || disableReviewButton;
const fiatIcon = STRIPE.CURRENCY[preferredCurrency].icon;

const minAmountRef = React.useRef(minAmount);
minAmountRef.current = minAmount;
const minUSDCAmountRef = React.useRef(minUSDCAmount);
minUSDCAmountRef.current = minUSDCAmount;

const addEmoteToComment = React.useCallback((emote: string) => {
setCommentValue((prev) => prev + (prev && prev.charAt(prev.length - 1) !== ' ' ? ` ${emote} ` : `${emote} `));
Expand Down Expand Up @@ -389,7 +397,13 @@ export function CommentCreate(props: Props) {
const lockedMinAmount = minAmount; // value during closure.
const currentMinAmount = minAmountRef.current; // value from latest doFetchCreatorSettings().

if (lockedMinAmount !== currentMinAmount) {
const lockedMinUSDCAmount = minUSDCAmount; // value during closure.
const currentMinUSDCAmount = minUSDCAmountRef.current; // value from latest doFetchCreatorSettings().

if (
(activeTab === TAB_LBC && lockedMinAmount !== currentMinAmount) ||
(activeTab === TAB_FIAT && lockedMinUSDCAmount !== currentMinUSDCAmount)
) {
doToast({
message: __('The creator just updated the minimum setting. Please revise or double-check your tip amount.'),
isError: true,
Expand Down Expand Up @@ -524,7 +538,8 @@ export function CommentCreate(props: Props) {
environment,
sticker: !!stickerValue,
is_protected: Boolean(isLivestreamChatMembersOnly || areCommentsMembersOnly),
amount: activeTab === TAB_LBC ? tipAmount * 100000000 : undefined,
amount: activeTab === TAB_LBC || activeTab === TAB_FIAT ? tipAmount : undefined,
currency: activeTab === TAB_LBC ? 'LBC' : activeTab === TAB_FIAT ? 'USDC' : undefined,
dry_run: dryRun,
})
.then((res) => {
Expand Down Expand Up @@ -764,8 +779,16 @@ export function CommentCreate(props: Props) {
isLivestream={isLivestream}
label={<FormChannelSelector isReply={Boolean(isReply)} isLivestream={Boolean(isLivestream)} />}
noticeLabel={
isMobile && (
<HelpText deletedComment={deletedComment} minAmount={minAmount} minSuper={minSuper} minTip={minTip} />
(isMobile || isLivestream) && (
<HelpText
deletedComment={deletedComment}
minAmount={minAmount}
minSuper={minSuper}
minTip={minTip}
minUSDCAmount={minUSDCAmount}
minUSDCSuper={minUSDCSuper}
minUSDCTip={minUSDCTip}
/>
)
}
name={isReply ? 'create__reply' : 'create__comment'}
Expand Down Expand Up @@ -860,7 +883,7 @@ export function CommentCreate(props: Props) {
/>
) : (
(!isMobile || selectedSticker) &&
(!minTip || claimIsMine) && (
((!minTip && !minUSDCTip) || claimIsMine) && (
<Button
{...submitButtonProps}
ref={buttonRef}
Expand Down Expand Up @@ -925,8 +948,17 @@ export function CommentCreate(props: Props) {
) : (
onCancelReplying && <Button {...cancelButtonProps} onClick={onCancelReplying} />
)}

<HelpText deletedComment={deletedComment} minAmount={minAmount} minSuper={minSuper} minTip={minTip} />
{!isLivestream && (
<HelpText
deletedComment={deletedComment}
minAmount={minAmount}
minSuper={minSuper}
minTip={minTip}
minUSDCAmount={minUSDCAmount}
minUSDCSuper={minUSDCSuper}
minUSDCTip={minUSDCTip}
/>
)}
</div>
)}
<div className="chat-resize">
Expand Down
5 changes: 4 additions & 1 deletion ui/component/settingsRow/view.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import classnames from 'classnames';
type Props = {
title: string,
subtitle?: string,
warning?: string,
multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right.
useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values.
disabled?: boolean,
Expand All @@ -16,7 +17,8 @@ type Props = {
};

export default function SettingsRow(props: Props) {
const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, membersOnly, children } = props;
const { title, subtitle, warning, multirow, useVerticalSeparator, disabled, highlighted, membersOnly, children } =
props;
return (
<div
className={classnames('card__main-actions settings-row', {
Expand All @@ -36,6 +38,7 @@ export default function SettingsRow(props: Props) {
</span>
{subtitle && <p className="settings-row__subtitle">{subtitle}</p>}
</div>
{warning && <div className="help--warning">{warning}</div>}
<div
className={classnames('settings-row__value', {
'settings-row__value--multirow': multirow,
Expand Down
Loading

0 comments on commit 2a9e1ce

Please sign in to comment.