Support EUR tipping #1222

ui/component/claimSupportButton/index.js

@@ -2,6 +2,8 @@ import { connect } from 'react-redux';
 import { doOpenModal } from 'redux/actions/app';
 import { makeSelectTagInClaimOrChannelForUri, selectClaimForUri } from 'redux/selectors/claims';
 import ClaimSupportButton from './view';
+import { selectClientSetting } from 'redux/selectors/settings';
+import * as SETTINGS from 'constants/settings';
 
 const DISABLE_SUPPORT_TAG = 'disable-support';
 
@@ -14,6 +16,7 @@ const select = (state, props) => {
   return {
     disableSupport: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SUPPORT_TAG)(state),
     isRepost,
+    preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
   };
 };
 

ui/component/claimSupportButton/view.jsx

@@ -13,18 +13,32 @@ type Props = {
   disableSupport: boolean,
   isRepost?: boolean,
   doOpenModal: (id: string, {}) => void,
+  preferredCurrency: string,
 };
 
 export default function ClaimSupportButton(props: Props) {
-  const { uri, fileAction, isRepost, disableSupport, doOpenModal } = props;
+  const { uri, fileAction, isRepost, disableSupport, doOpenModal, preferredCurrency } = props;
+
+  const currencyToUse = preferredCurrency;
+
+  const iconToUse = {
+    EUR: {
+      icon: ICONS.EURO,
+      iconSize: 16,
+    },
+    USD: {
+      icon: ICONS.FINANCE,
+      iconSize: fileAction ? 22 : undefined,
+    },
+  };
 
   return disableSupport ? null : (
     <Tooltip title={__('Support this claim')} arrow={false}>
       <Button
         button={!fileAction ? 'alt' : undefined}
         className={classnames('support-claim-button', { 'button--file-action': fileAction })}
-        icon={ICONS.FINANCE}
+        icon={iconToUse[currencyToUse].icon}
-        iconSize={fileAction ? 22 : undefined}
+        iconSize={iconToUse[currencyToUse].iconSize}
         label={isRepost ? __('Support Repost') : __('Support --[button to support a claim]--')}
         requiresAuth
         onClick={() => doOpenModal(MODALS.SEND_TIP, { uri, isSupport: true })}

ui/component/commentCreate/index.js

@@ -15,6 +15,8 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
 import { getChannelIdFromClaim } from 'util/claim';
 import { doOpenModal } from 'redux/actions/app';
+import { selectClientSetting } from 'redux/selectors/settings';
+import * as SETTINGS from 'constants/settings';
 
 const select = (state, props) => {
   const { uri } = props;
@@ -42,6 +44,7 @@ const select = (state, props) => {
     isFetchingChannels: selectFetchingMyChannels(state),
     settingsByChannelId: selectSettingsByChannelId(state),
     supportDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SUPPORT_TAG)(state),
+    preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
   };
 };
 

ui/component/commentCreate/view.jsx

@@ -63,9 +63,18 @@ type Props = {
   doFetchCreatorSettings: (channelId: string) => Promise<any>,
   doToast: ({ message: string }) => void,
   doCommentById: (commentId: string, toastIfNotFound: boolean) => Promise<any>,
-  doSendCashTip: (TipParams, anonymous: boolean, UserParams, claimId: string, stripe: ?string, (any) => void) => string,
+  doSendCashTip: (
+    TipParams,
+    anonymous: boolean,
+    UserParams,
+    claimId: string,
+    stripe: ?string,
+    preferredCurrency: string,
+    (any) => void
+  ) => string,
   doSendTip: (params: {}, isSupport: boolean, successCb: (any) => void, errorCb: (any) => void, boolean) => void,
   doOpenModal: (id: string, any) => void,
+  preferredCurrency: string,
 };
 
 export function CommentCreate(props: Props) {
@@ -101,6 +110,7 @@ export function CommentCreate(props: Props) {
     doSendTip,
     setQuickReply,
     doOpenModal,
+    preferredCurrency,
   } = props;
 
   const isMobile = useIsMobile();
@@ -306,17 +316,25 @@ export function CommentCreate(props: Props) {
       const tipParams: TipParams = { tipAmount: Math.round(tipAmount * 100) / 100, tipChannelName, channelClaimId };
       const userParams: UserParams = { activeChannelName, activeChannelId: activeChannelClaimId };
 
-      doSendCashTip(tipParams, false, userParams, claimId, stripeEnvironment, (customerTipResponse) => {
+      doSendCashTip(
-        const { payment_intent_id } = customerTipResponse;
+        tipParams,
+        false,
+        userParams,
+        claimId,
+        stripeEnvironment,
+        preferredCurrency,
+        (customerTipResponse) => {
+          const { payment_intent_id } = customerTipResponse;
 
-        handleCreateComment(null, payment_intent_id, stripeEnvironment);
+          handleCreateComment(null, payment_intent_id, stripeEnvironment);
 
-        setCommentValue('');
+          setCommentValue('');
-        setReviewingSupportComment(false);
+          setReviewingSupportComment(false);
-        setTipSelector(false);
+          setTipSelector(false);
-        setCommentFailure(false);
+          setCommentFailure(false);
-        setSubmitting(false);
+          setSubmitting(false);
-      });
+        }
+      );
     }
   }
 
@@ -382,6 +400,9 @@ export function CommentCreate(props: Props) {
     setTipSelector(false);
   }
 
+  let fiatIconToUse = ICONS.FINANCE;
+  if (preferredCurrency === 'EUR') fiatIconToUse = ICONS.EURO;
+
   // **************************************************************************
   // Effects
   // **************************************************************************
@@ -640,7 +661,7 @@ export function CommentCreate(props: Props) {
             <Button
               {...submitButtonProps}
               disabled={disabled || tipSelectorError || !minAmountMet}
-              icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
+              icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
               label={__('Review')}
               onClick={() => {
                 setReviewingSupportComment(true);
@@ -682,7 +703,7 @@ export function CommentCreate(props: Props) {
                   <TipActionButton {...tipButtonProps} name={__('Credits')} icon={ICONS.LBC} tab={TAB_LBC} />
 
                   {stripeEnvironment && (
-                    <TipActionButton {...tipButtonProps} name={__('Cash')} icon={ICONS.FINANCE} tab={TAB_FIAT} />
+                    <TipActionButton {...tipButtonProps} name={__('Cash')} icon={fiatIconToUse} tab={TAB_FIAT} />
                   )}
                 </>
               )}

ui/component/common/icon-custom.jsx

@@ -1194,6 +1194,26 @@ export const icons = {
       <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
     </g>
   ),
+  [ICONS.EURO]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      width={props.size || '16'}
+      height={props.size || '18'}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      stroke="currentColor"
+    >
+      <g transform="matrix(2,0,0,2,0,0)">
+        <path d="M19.5,23.25a11.25,11.25,0,0,1,0-22.5" />
+        <path d="M4.5 9.75L16.5 9.75" />
+        <path d="M4.5 14.25L13.5 14.25" />
+      </g>
+    </svg>
+  ),
   [ICONS.RABBIT_HOLE]: (props: CustomProps) => (
     <svg
       {...props}

ui/component/txoList/view.jsx

@@ -342,7 +342,7 @@ function TxoList(props: Props) {
                   className={classnames(`button-toggle`, {
                     'button-toggle--active': currency === 'fiat',
                   })}
-                  label={__('USD --[transactions tab]--')}
+                  label={__('Currency --[transactions tab]--')}
                 />
               </div>
             </fieldset-section>

ui/component/walletFiatAccountHistory/view.jsx

@@ -24,6 +24,22 @@ const WalletBalance = (props: Props) => {
   //   accountTransactions.length = 10;
   // }
 
+  function getSymbol(transaction) {
+    if (transaction.currency === 'eur') {
+      return '€';
+    } else {
+      return '$';
+    }
+  }
+
+  function getCurrencyIso(transaction) {
+    if (transaction.currency === 'eur') {
+      return 'EUR';
+    } else {
+      return 'USD';
+    }
+  }
+
   return (
     <div className="table__wrapper">
       <table className="table table--transactions">
@@ -32,7 +48,7 @@ const WalletBalance = (props: Props) => {
             <th className="date-header">{__('Date')}</th>
             <th className="channelName-header">{<>{__('Receiving Channel Name')}</>}</th>
             <th className="location-header">{__('Tip Location')}</th>
-            <th className="amount-header">{__('Amount (USD)')} </th>
+            <th className="amount-header">{__('Amount')} </th>
             <th className="processingFee-header">{__('Processing Fee')}</th>
             <th className="odyseeFee-header">{__('Odysee Fee')}</th>
             <th className="receivedAmount-header">{__('Received Amount')}</th>
@@ -63,10 +79,22 @@ const WalletBalance = (props: Props) => {
                     button="link"
                   />
                 </td>
-                <td>${transaction.tipped_amount / 100}</td>
+                <td>
-                <td>${transaction.transaction_fee / 100}</td>
+                  {getSymbol(transaction)}
-                <td>${transaction.application_fee / 100}</td>
+                  {transaction.tipped_amount / 100} {getCurrencyIso(transaction)}
-                <td>${transaction.received_amount / 100}</td>
+                </td>
+                <td>
+                  {getSymbol(transaction)}
+                  {transaction.transaction_fee / 100}
+                </td>
+                <td>
+                  {getSymbol(transaction)}
+                  {transaction.application_fee / 100}
+                </td>
+                <td>
+                  {getSymbol(transaction)}
+                  {transaction.received_amount / 100}
+                </td>
               </tr>
             ))}
         </tbody>

ui/component/walletSendTip/index.js

@@ -43,6 +43,7 @@ const select = (state, props) => {
     instantTipMax: selectClientSetting(state, SETTINGS.INSTANT_PURCHASE_MAX),
     isPending: selectIsSendingSupport(state),
     title: selectTitleForUri(state, uri),
+    preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
   };
 };
 

ui/component/walletSendTip/view.jsx

@@ -46,9 +46,18 @@ type Props = {
   hasSelectedTab?: string,
   customText?: string,
   doHideModal: () => void,
-  doSendCashTip: (TipParams, boolean, UserParams, string, ?string) => string,
+  doSendCashTip: (
+    TipParams,
+    anonymous: boolean,
+    UserParams,
+    claimId: string,
+    stripe: ?string,
+    preferredCurrency: string,
+    ?(any) => void
+  ) => string,
   doSendTip: (SupportParams, boolean) => void, // function that comes from lbry-redux
   setAmount?: (number) => void,
+  preferredCurrency: string,
 };
 
 export default function WalletSendTip(props: Props) {
@@ -75,6 +84,7 @@ export default function WalletSendTip(props: Props) {
     doSendCashTip,
     doSendTip,
     setAmount,
+    preferredCurrency,
   } = props;
 
   /** WHAT TAB TO SHOW **/
@@ -118,8 +128,10 @@ export default function WalletSendTip(props: Props) {
       confirmLabel = __('Boosting');
       break;
     case TAB_FIAT:
-      explainerText = __('Show this channel your appreciation by sending a donation in USD. ');
+      explainerText = __('Show this channel your appreciation by sending a donation in %currencyToUse%. ', {
-      confirmLabel = __('Tipping Fiat (USD)');
+        currencyToUse: preferredCurrency,
+      });
+      confirmLabel = __('Tipping %currencyToUse%', { currencyToUse: preferredCurrency });
       break;
     case TAB_LBC:
       explainerText = __('Show this channel your appreciation by sending a donation of Credits. ');
@@ -192,7 +204,14 @@ export default function WalletSendTip(props: Props) {
         const userParams: UserParams = { activeChannelName, activeChannelId };
 
         // hit backend to send tip
-        doSendCashTip(tipParams, !activeChannelId || incognito, userParams, claimId, stripeEnvironment);
+        doSendCashTip(
+          tipParams,
+          !activeChannelId || incognito,
+          userParams,
+          claimId,
+          stripeEnvironment,
+          preferredCurrency
+        );
         doHideModal();
       }
       // if it's a boost (?)
@@ -224,7 +243,7 @@ export default function WalletSendTip(props: Props) {
       case TAB_BOOST:
         return titleText;
       case TAB_FIAT:
-        return __('Send a $%displayAmount% Tip', { displayAmount });
+        return __('Send a %fiatSymbolToUse%%displayAmount% Tip', { displayAmount, fiatSymbolToUse });
       case TAB_LBC:
         return __('Send a %displayAmount% Credit Tip', { displayAmount });
     }
@@ -247,6 +266,13 @@ export default function WalletSendTip(props: Props) {
 
   const tabButtonProps = { isOnConfirmationPage, activeTab, setActiveTab };
 
+  let fiatIconToUse = ICONS.FINANCE;
+  let fiatSymbolToUse = '$';
+  if (preferredCurrency === 'EUR') {
+    fiatIconToUse = ICONS.EURO;
+    fiatSymbolToUse = '€';
+  }
+
   return (
     <Form onSubmit={handleSubmit}>
       {/* if there is no LBC balance, show user frontend to get credits */}
@@ -260,7 +286,7 @@ export default function WalletSendTip(props: Props) {
               <div className="section">
                 {/* tip fiat tab button */}
                 {stripeEnvironment && (
-                  <TabSwitchButton icon={ICONS.FINANCE} label={__('Tip')} name={TAB_FIAT} {...tabButtonProps} />
+                  <TabSwitchButton icon={fiatIconToUse} label={__('Tip')} name={TAB_FIAT} {...tabButtonProps} />
                 )}
 
                 {/* tip LBC tab button */}
@@ -298,7 +324,7 @@ export default function WalletSendTip(props: Props) {
                   <div className="confirm__label">{confirmLabel}</div>
                   <div className="confirm__value">
                     {activeTab === TAB_FIAT ? (
-                      <p>{`$ ${(Math.round(tipAmount * 100) / 100).toFixed(2)}`}</p>
+                      <p>{`${fiatSymbolToUse} ${(Math.round(tipAmount * 100) / 100).toFixed(2)}`}</p>
                     ) : (
                       <LbcSymbol postfix={tipAmount} size={22} />
                     )}

ui/component/walletTipAmountSelector/index.js

@@ -2,10 +2,13 @@ import { connect } from 'react-redux';
 import { selectBalance } from 'redux/selectors/wallet';
 import { selectClaimForUri } from 'redux/selectors/claims';
 import WalletTipAmountSelector from './view';
+import { selectClientSetting } from 'redux/selectors/settings';
+import * as SETTINGS from 'constants/settings';
 
 const select = (state, props) => ({
   balance: selectBalance(state),
   claim: selectClaimForUri(state, props.uri),
+  preferredCurrency: selectClientSetting(state, SETTINGS.PREFERRED_CURRENCY),
 });
 
 export default connect(select)(WalletTipAmountSelector);

ui/component/walletTipAmountSelector/view.jsx

@@ -28,13 +28,13 @@ type Props = {
   customTipAmount?: number,
   exchangeRate?: any,
   fiatConversion?: boolean,
-  tipError: boolean,
   tipError: string,
   uri: string,
   onChange: (number) => void,
   setConvertedAmount?: (number) => void,
   setDisableSubmitButton: (boolean) => void,
   setTipError: (any) => void,
+  preferredCurrency: string,
 };
 
 function WalletTipAmountSelector(props: Props) {
@@ -52,6 +52,7 @@ function WalletTipAmountSelector(props: Props) {
     setConvertedAmount,
     setDisableSubmitButton,
     setTipError,
+    preferredCurrency,
   } = props;
 
   const isMobile = useIsMobile();
@@ -229,6 +230,9 @@ function WalletTipAmountSelector(props: Props) {
     <div className={classnames('help', customClassName)}>{helpMessage}</div>
   );
 
+  let fiatIconToUse = ICONS.FINANCE;
+  if (preferredCurrency === 'EUR') fiatIconToUse = ICONS.EURO;
+
   return (
     <>
       <div className="section">
@@ -244,7 +248,7 @@ function WalletTipAmountSelector(props: Props) {
                 'button-toggle--disabled': amount > balance,
               })}
               label={defaultAmount}
-              icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
+              icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
               onClick={() => {
                 handleCustomPriceChange(defaultAmount);
                 setUseCustomTip(false);
@@ -258,7 +262,7 @@ function WalletTipAmountSelector(props: Props) {
           className={classnames('button-toggle button-toggle--expandformobile', {
             'button-toggle--active': useCustomTip,
           })}
-          icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
+          icon={activeTab === TAB_LBC ? ICONS.LBC : fiatIconToUse}
           label={__('Custom')}
           onClick={() => setUseCustomTip(true)}
         />

ui/constants/icons.js

@@ -206,3 +206,4 @@ export const UPGRADE = 'Upgrade';
 export const DISMISS_ALL = 'DismissAll';
 export const SUBMIT = 'Submit';
 export const FILTERED_BY_LANG = 'FilteredByLang';
+export const EURO = 'Euro';

ui/page/settingsStripeCard/view.jsx

@@ -27,9 +27,12 @@ type Props = {
   email: ?string,
   scriptFailedToLoad: boolean,
   doOpenModal: (string, {}) => void,
+  doToast: ({}) => void,
   openModal: (string, {}) => void,
   setAsConfirmingCard: () => void,
   locale: ?any,
+  preferredCurrency: string,
+  setPreferredCurrency: (string) => void,
 };
 
 // type State = {
@@ -368,7 +371,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
   render() {
     let that = this;
 
-    const returnToValue = new URLSearchParams(this.props.location.search).get('returnTo');
+    const returnToValue = new URLSearchParams(location.search).get('returnTo');
     let shouldShowBackToMembershipButton = returnToValue === 'premium';
 
     function setAsConfirmingCard() {
@@ -482,7 +485,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
             <br />
 
             <div className="currency-to-use-div">
-              <h1 className="currency-to-use-header">Currency To Use:</h1>
+              <h1 className="currency-to-use-header">{__('Currency To Use')}:</h1>
 
               <fieldset-section>
                 <FormField
@@ -491,7 +494,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
                   type="select"
                   onChange={onCurrencyChange}
                   value={preferredCurrency}
-                  // disabled={automaticDarkModeEnabled}
                 >
                   {['USD', 'EUR'].map((currency) => (
                     <option key={currency} value={currency}>

ui/redux/actions/wallet.js

@@ -715,9 +715,15 @@ export const doCheckPendingTxs = () => (dispatch, getState) => {
   }, 30000);
 };
 
-export const doSendCashTip = (tipParams, anonymous, userParams, claimId, stripeEnvironment, successCallback) => (
+export const doSendCashTip = (
-  dispatch
+  tipParams,
-) => {
+  anonymous,
+  userParams,
+  claimId,
+  stripeEnvironment,
+  preferredCurrency,
+  successCallback
+) => (dispatch) => {
   Lbryio.call(
     'customer',
     'tip',
@@ -728,7 +734,7 @@ export const doSendCashTip = (tipParams, anonymous, userParams, claimId, stripeE
       creator_channel_claim_id: tipParams.channelClaimId,
       tipper_channel_name: anonymous ? '' : userParams.activeChannelName,
       tipper_channel_claim_id: anonymous ? '' : userParams.activeChannelId,
-      currency: 'USD',
+      currency: preferredCurrency || 'USD',
       anonymous: anonymous,
       source_claim_id: claimId,
       environment: stripeEnvironment,
@@ -736,12 +742,18 @@ export const doSendCashTip = (tipParams, anonymous, userParams, claimId, stripeE
     'post'
   )
     .then((customerTipResponse) => {
+      const fiatIconToUse = preferredCurrency === 'USD' ? '$' : '€';
+
       dispatch(
         doToast({
-          message: __("You sent $%tipAmount% as a tip to %tipChannelName%, I'm sure they appreciate it!", {
+          message: __(
-            tipAmount: tipParams.tipAmount,
+            "You sent %fiatIconToUse%%tipAmount% as a tip to %tipChannelName%, I'm sure they appreciate it!",
-            tipChannelName: tipParams.tipChannelName,
+            {
-          }),
+              tipAmount: tipParams.tipAmount,
+              tipChannelName: tipParams.tipChannelName,
+              fiatIconToUse,
+            }
+          ),
         })
       );