add subheadings to channel page dropdown and correct wallet text on c…

…reator dashboard
brave-intl · Nov 21, 2023 · 3340641 · 3340641
1 parent efa4ba2
commit 3340641
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 15 deletions.
diff --git a/app/javascript/locale/en.ts b/app/javascript/locale/en.ts
@@ -316,13 +316,13 @@ export default {
     },
     verify: "Continue to Verify",
     addCryptoWidget: {
-      addWallet: "Add new wallet",
+      addWallet: "Add new crypto address",
       solanaConnectError: "Connect a Solana wallet to add an address",
       ethereumConnectError: "Connect an Ethereum wallet to add an address",
-      widgetTitle: "P2P WALLETS",
+      widgetTitle: "Crypto addresses",
       ethereum: "Ethereum",
       ethereumBAT: "Basic Attention Token",
-      solanaBAT: "Basic Attention Token (Portal)",
+      solanaBAT: "Basic Attention Token (Wormhole)",
       solana: "Solana",
       genericError: "An error occurred. Please try again later.",
       addressConnectFailure: "Connecting new address failed",
@@ -343,6 +343,10 @@ export default {
     ethereumNetwork: "Ethereum Network",
     ethereumBATNetwork: "Basic Attention Token",
     solanaNetwork: "Solana Network",
+    ethSubheading: 'ETH',
+    ethBatSubheading: "ERC-20 BAT",
+    solSubheading: 'SOL',
+    solBatSubheading: 'SPL-BAT (Wormhole)',
     share: "Share your support",
     goBack: "Go back",
     thanks: "Thanks for supporting your favorite creators",

diff --git a/app/javascript/views/cryptoWalletServices/CryptoWalletServices.jsx b/app/javascript/views/cryptoWalletServices/CryptoWalletServices.jsx
@@ -32,7 +32,7 @@ class CryptoWalletServices extends React.Component {
   formatOptionData(response, chain) {
     const options = response.data.filter( address => address.chain === chain)
                       .map( address => { return { value: address, label: address.address}})
-    options.push({label: 'Add new wallet', value: {newAddress: chain}});
+    options.push({label: this.intl.formatMessage({id: 'walletServices.addCryptoWidget.addWallet'}), value: {newAddress: chain}});
     return options;
   }
 

diff --git a/app/javascript/views/publicChannelPage/CryptoPaymentOption.jsx b/app/javascript/views/publicChannelPage/CryptoPaymentOption.jsx
@@ -1,15 +1,17 @@
 import * as React from "react";
 import { injectIntl } from "react-intl";
-import { CryptoOption } from "./PublicChannelPageStyle.js";
+import { CryptoOption, CryptoOptionSubheading, CryptoOptionText } from "./PublicChannelPageStyle.js";
 
 class CryptoPaymentOption extends React.Component {
   constructor(props) {
     super(props);
+
     this.state = {
       label: this.props.label,
       value: this.props.value,
       innerProps: this.props.innerProps,
       icon: this.props.data.icon,
+      subheading: this.props.data.subheading,
     };
   }
 
@@ -18,7 +20,10 @@ class CryptoPaymentOption extends React.Component {
       <CryptoOption {...this.state.innerProps} >
         <span>
           <img src={this.state.icon} />
-          <span>{this.state.label}</span>
+          <CryptoOptionText>
+            <span>{this.state.label}</span>
+            <CryptoOptionSubheading>{this.state.subheading}</CryptoOptionSubheading>
+          </ CryptoOptionText>
         </span>
       </CryptoOption>
     )

diff --git a/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx b/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx
@@ -20,7 +20,7 @@ import {
   createTransferInstruction,
 } from "@solana/spl-token";
 import axios from "axios";
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import routes from "../routes";
 import Modal, { ModalSize } from "../../components/modal/Modal";
 import QRCodeModal from "./QRCodeModal";
@@ -46,6 +46,7 @@ import {
   ErrorText,
   ErrorMessage,
   ErrorTitle,
+  CryptoOptionSubheading,
 } from "./PublicChannelPageStyle.js";
 import ethIcon from "../../../assets/images/eth_icon_larger.png";
 import solIcon from "../../../assets/images/solana_icon_larger.png";
@@ -74,8 +75,18 @@ class CryptoPaymentWidget extends React.Component {
       dropdownOptions.push({
         label: this.intl.formatMessage({ id: 'publicChannelPage.ethereumNetwork' }),
         options: [
-          { label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.ethereum' }), value: "ETH", icon: ethIcon },
-          { label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.ethereumBAT' }), value: "BAT", icon: batIcon }
+          {
+            label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.ethereum' }),
+            subheading: this.intl.formatMessage({id: 'publicChannelPage.ethSubheading'}),
+            value: "ETH", 
+            icon: ethIcon
+          },
+          {
+            label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.ethereumBAT' }),
+            subheading: this.intl.formatMessage({id: 'publicChannelPage.ethBatSubheading'}),
+            value: "BAT",
+            icon: batIcon
+          }
         ]
       })
     }
@@ -84,8 +95,18 @@ class CryptoPaymentWidget extends React.Component {
       dropdownOptions.push({
         label: this.intl.formatMessage({ id: 'publicChannelPage.solanaNetwork' }),
         options: [
-          { label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.solana' }), value: "SOL", icon: solIcon },
-          { label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.solanaBAT' }), value: "splBAT", icon: batIcon }
+          {
+            label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.solana' }),
+            subheading: this.intl.formatMessage({id: 'publicChannelPage.solSubheading'}),
+            value: "SOL",
+            icon: solIcon
+          },
+          {
+            label: this.intl.formatMessage({ id: 'walletServices.addCryptoWidget.solanaBAT' }),
+            subheading: this.intl.formatMessage({id: 'publicChannelPage.solBatSubheading'}),
+            value: "splBAT",
+            icon: batIcon
+          }
         ]
       })
     }
@@ -415,6 +436,7 @@ class CryptoPaymentWidget extends React.Component {
     const newState = {...this.state};
     newState.currentChain = optionVal.value;
     newState.selectValue = optionVal;
+    console.log(optionVal);
     newState.displayChain = optionVal.value.includes("BAT") ? 'BAT' : optionVal.value;
     this.setState({...newState });
   }
@@ -466,16 +488,23 @@ class CryptoPaymentWidget extends React.Component {
                 options={this.state.dropdownOptions}
                 onChange={this.changeChain.bind(this)}
                 components={{
-                  Option: CryptoPaymentOption,
+                  SingleValue: ({ children, ...rest }) => (
+                    <components.SingleValue {...rest}>
+                      {children}
+                      <CryptoOptionSubheading>{rest.data.subheading}</CryptoOptionSubheading>
+                    </components.SingleValue>
+                  ),
+                  Option: CryptoPaymentOption
                 }}
                 value={this.state.selectValue}
                 styles={{
                   control: (base) => ({ ...base, border: 'none', boxShadow: 'none' }),
-                  groupHeading: (base) => ({...base, textAlign: 'left', marginLeft: '16px'}),
+                  groupHeading: (base) => ({...base, textAlign: 'left', marginLeft: '16px', fontSize: '11px'}),
                   indicatorSeparator: (base) => ({...base, display: 'none'}),
                   input: (base) => ({...base, caretColor: 'transparent' }),
                   valueContainer: (base) => ({
                     ...base,
+                    display: 'flex',
                     textAlign: 'left',
                     padding: '16px',
                     fontWeight: '600',

diff --git a/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js b/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js
@@ -242,11 +242,24 @@ export const CryptoOption = styled.div`
 
   img {
     margin-right: 16px;
-    height: 28px;
-    width: 28px;
+    height: 32px;
+    width: 32px;
+    display: inline-block;
+    vertical-align: middle;
   }
 `;
 
+export const CryptoOptionText = styled.div`
+  display: inline-block;
+  font-size: 14px;
+`;
+
+export const CryptoOptionSubheading = styled.div`
+  font-weight: 400;
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+`;
+
 export const AmountButton = styled.button`
   background-color: #FFFFFF;
   border: 1px solid #A1ABBA;