Merge pull request #4263 from brave-intl/feat/add-try-brave-modal

brave-intl · Nov 14, 2023 · ba81f50 · ba81f50
2 parents 90c7f3d + ac210cf
commit ba81f50
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 6 deletions.
diff --git a/app/assets/images/orange_checkmark.png b/app/assets/images/orange_checkmark.png
diff --git a/app/assets/images/try_wallet_modal_gradient.png b/app/assets/images/try_wallet_modal_gradient.png
diff --git a/app/assets/images/wallet_icon_color.png b/app/assets/images/wallet_icon_color.png
diff --git a/app/javascript/components/modal/Modal.tsx b/app/javascript/components/modal/Modal.tsx
@@ -6,6 +6,7 @@ import {
   Background,
   CloseIcon,
   Container,
+  ExtraExtraSmallContainer,
   ExtraSmallContainer,
   LargeContainer,
   MediumContainer,
@@ -16,6 +17,7 @@ import {
 } from "./ModalStyle";
 
 export enum ModalSize {
+  ExtraExtraSmall,
   ExtraSmall,
   Small,
   Medium,
@@ -76,6 +78,10 @@ export default class Modal extends React.Component<IModalProps> {
 
     let container = <Container>{childElements}</Container>;
     switch (this.props.size) {
+      case ModalSize.ExtraExtraSmall: {
+        container = <ExtraExtraSmallContainer>{childElements}</ExtraExtraSmallContainer>;
+        break;
+      }
       case ModalSize.ExtraSmall: {
         container = <ExtraSmallContainer>{childElements}</ExtraSmallContainer>;
         break;

diff --git a/app/javascript/components/modal/ModalStyle.ts b/app/javascript/components/modal/ModalStyle.ts
@@ -33,6 +33,7 @@ enum ModalSize {
   Medium,
   Large,
   Auto,
+  ExtraExtraSmall,
 }
 
 interface IContainerProps {
@@ -63,6 +64,19 @@ export const PaddingContainer = styled.div`
   `}
 `;
 
+export const ExtraExtraSmallContainer = styled(Container)`
+  width: 95%;
+  min-width: 420px;
+  border-radius: 16px;
+
+  @media only screen and (min-width: 600px) {
+    max-width: 420px;
+  }
+  @media only screen and (min-width: 768px) {
+    max-width: 420px;
+  }
+`;
+
 export const ExtraSmallContainer = styled(Container)`
   width: 95%;
   min-width: 20rem;

diff --git a/app/javascript/components/modal/ModalStyle.tsx b/app/javascript/components/modal/ModalStyle.tsx
@@ -32,7 +32,8 @@ enum ModalSize {
   Small,
   Medium,
   Large,
-  Auto
+  Auto,
+  ExtraExtraSmall
 }
 
 interface IContainerProps {
@@ -49,6 +50,12 @@ export const Container = styled.div`
   z-index: 2;
 `;
 
+export const ExtraExtraSmallContainer = styled(Container)`
+  max-width: 420px;
+  width: 33%;
+  border-radius: 16px;
+`;
+
 export const ExtraSmallContainer = styled(Container)`
   width: 33%;
   min-width: 30rem;

diff --git a/app/javascript/locale/en.ts b/app/javascript/locale/en.ts
@@ -335,7 +335,7 @@ export default {
     privacyDisclaimer: "Please note that your contribution will be publicly visible as a transaction on the blockchain network you select, and cannot be deleted.",
     generateQR: "Generate QR Code",
     QRModalHeader: "Send from mobile wallets",
-    QRModalText: "Scanning this QR code will give you the creator’s {chain} address.",
+    QRModalText: "You can send by scanning this QR code using a Web3 wallet from your mobile device.",
     paymentHeading: "Show your love and send a token of your gratitude",
     paymentSubHeading: "Support your favorite creators",
     send: "Send",
@@ -349,12 +349,21 @@ export default {
     hooray: "Hooray! {amount} sent",
     successTweet: "I just sent some {symbol} to {name} via their Brave contribution page {url}! Want to receive {symbol} too? Sign up at https://creators.brave.com!",
     QRBatText: "Scanning this QR code will give you the creator’s BAT address on {chain}.",
+    QRStandardText: "Scanning this QR code will give you the creator’s {chain} address.",
     ErrorTitle: "There was a problem sending your contribution",
     ErrorMsg: "Please try again.",
     noEthTitle: "No Ethereum wallet detected",
     noEthMsg: "Connect an Ethereum wallet to send to this creator",
     noSolTitle: "No Solana wallet detected",
     noSolMsg: "Connect a Solana wallet to send to this creator",
+    ETH: 'Ethereum',
+    SOL: 'Solana',
+    tryBraveHeader: "Try Brave Wallet",
+    tryBraveSubheader: "Available only on Brave browser",
+    tryBraveButton: "Try it out!",
+    tryBraveBullet1: "Browser-native, inherently secure",
+    tryBraveBullet2: "Native NFT support",
+    tryBraveBullet3: "Multi-chain support",
   }
 };
 

diff --git a/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx b/app/javascript/views/publicChannelPage/CryptoPaymentWidget.jsx
@@ -24,6 +24,7 @@ import Select from 'react-select';
 import routes from "../routes";
 import Modal, { ModalSize } from "../../components/modal/Modal";
 import QRCodeModal from "./QRCodeModal";
+import TryBraveModal from "./TryBraveModal";
 import CryptoPaymentOption from "./CryptoPaymentOption";
 import SuccessWidget from "./SuccessWidget";
 import {
@@ -107,6 +108,7 @@ class CryptoPaymentWidget extends React.Component {
       displayChain: currentChain,
       defaultAmounts: [1,5,10],
       isModalOpen: false,
+      isTryBraveModalOpen: false,
       ratios: {},
       customAmount: null,
       toggle: 'crypto',
@@ -171,6 +173,14 @@ class CryptoPaymentWidget extends React.Component {
     this.setState({ isModalOpen: true });
   }
 
+  closeTryBraveModal = () => {
+    this.setState({ isTryBraveModalOpen: false });
+  }
+
+  launchTryBraveModal() {
+    this.setState({ isTryBraveModalOpen: true });
+  }
+
   sendPayment = async () => {
     if (this.state.currentChain === "ETH") {
       await this.sendEthPayment();
@@ -230,6 +240,7 @@ class CryptoPaymentWidget extends React.Component {
           this.setGenericError();
         });
     } else {
+      launchTryBraveModal();
       this.setError('publicChannelPage.noEthTitle', 'publicChannelPage.noEthMsg')
       return;
     }
@@ -269,13 +280,15 @@ class CryptoPaymentWidget extends React.Component {
         return;
       }
     } else {
+      launchTryBraveModal();
       this.setError('publicChannelPage.noEthTitle', 'publicChannelPage.noEthMsg');
       return;
     }
   }
 
   sendSolPayment = async () => {
     if (!window.solana) {
+      launchTryBraveModal();
       this.setError('publicChannelPage.noSolTitle', 'publicChannelPage.noSolMsg');
       return;
     }
@@ -317,6 +330,7 @@ class CryptoPaymentWidget extends React.Component {
 
   sendSolBatPayment = async () => {
     if (!window.solana) {
+      launchTryBraveModal();
       this.setError('publicChannelPage.noSolTitle', 'publicChannelPage.noSolMsg');
       return;
     }
@@ -553,6 +567,14 @@ class CryptoPaymentWidget extends React.Component {
               displayChain={this.state.displayChain}
             />
           </Modal>
+          <Modal
+            show={this.state.isTryBraveModalOpen}
+            size={ModalSize.ExtraExtraSmall}
+            padding={false}
+            handleClose={() => this.closeTryBraveModal()}
+          >
+            <TryBraveModal />
+          </Modal>
         </CryptoWidgetWrapper>
       )
     }

diff --git a/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js b/app/javascript/views/publicChannelPage/PublicChannelPageStyle.js
@@ -4,6 +4,9 @@ import DefaultBg from "../../../assets/images/default_banner_bg.jpg"
 import CryptoWidgetBackground from "../../../assets/images/crypto_widget_bg.png";
 import CryptoWidgetSuccess from "../../../assets/images/crypto_widget_success.png";
 import Exchange from "../../../assets/images/exchange.svg";
+import TryWalletBackground from "../../../assets/images/try_wallet_modal_gradient.png";
+import OrangeCheckmark from "../../../assets/images/orange_checkmark.png";
+
 
 export const PublicChannelContainer = styled.div`
   font-family: 'poppins', sans-serif;
@@ -370,3 +373,85 @@ export const ErrorMessage = styled.div`
   font-size: 12px;
   color: #89001E;
 `;
+
+export const TryBraveBackground = styled.div`
+  background-size: cover;
+  background-image: url(${TryWalletBackground});
+  padding: 15px;
+  border-radius: 16px;
+
+  @media only screen and (min-width: 768px) {
+    padding: 50px;
+  }
+`;
+
+export const TryBraveHeaderSection = styled.div`
+  text-align: left;
+  padding-bottom: 36px;
+  > div {
+    display: inline-block;
+  }
+`;
+
+export const TryBraveIcon = styled.div`
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
+  border: 1px solid rgba(161, 171, 186, 0.4);
+  padding: 9px;
+  border-radius: 8px;
+  width: 48px;
+  vertical-align: text-bottom;
+  margin-right: 16px;
+  background-color: white;
+
+  img {
+    max-height:100%;
+    max-width:100%;
+  }
+`;
+
+export const TryBraveHeader = styled.div`
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 500;
+`;
+
+export const TryBraveSubHeader = styled.div`
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.10000000149011612px;
+`;
+
+export const TryBraveBullet = styled.div`
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  padding-bottom: 20px;
+
+  img {
+    vertical-align: text-top;
+    max-height: 14px;
+    padding-right: 16px;
+  }
+`;
+
+export const TryBraveButton = styled.a`
+  text-align: center;
+  width: 100%;
+  padding: 14px 20px 14px 20px;
+  border-radius: 26px;
+  background: linear-gradient(174.36deg, #FF5500 2.32%, #F5002D 93.33%);
+  color: #ffffff;
+  font-weight: 600;
+  font-family: poppins, sans-serif;
+  font-size 0.9em;
+  display: block;
+  cursor: pointer;
+  margin-top: 16px;
+
+  &:hover {
+    color: #ffffff;
+    text-decoration: none;
+  }
+`;
diff --git a/app/javascript/views/publicChannelPage/QRCodeModal.jsx b/app/javascript/views/publicChannelPage/QRCodeModal.jsx
@@ -14,10 +14,11 @@ import qr_logo from "../../../assets/images/qr_logo.png";
 class QRCodeModal extends React.Component {
   constructor(props) {
     super(props);
-    console.log(props)
+
     this.paymentUrl = props.address;
     this.chain = props.chain;
     this.displayChain = props.displayChain;
+    this.fullChain = props.intl.formatMessage({id: `publicChannelPage.${this.chain}`});
   }
 
   componentDidMount() {
@@ -55,16 +56,18 @@ class QRCodeModal extends React.Component {
         <QRTitle>
           <FormattedMessage id="publicChannelPage.QRModalHeader" />
             {this.displayChain.includes('BAT') ? (
-              <QRSubTitle><FormattedMessage id="publicChannelPage.QRBatText" values={{chain: this.chain}}/></QRSubTitle>
-            ) : null}
+              <QRSubTitle><FormattedMessage id="publicChannelPage.QRBatText" values={{chain: this.fullChain}}/></QRSubTitle>
+            ) : (
+              <QRSubTitle><FormattedMessage id="publicChannelPage.QRStandardText" values={{chain: this.chain}}/></QRSubTitle>
+            )}
         </QRTitle>
         <QRBox id="qr-wrapper" className="text-center" />
         <QRText>
           <QRTextItem>
             <img src={icon} className="pr-2"/>
           </QRTextItem>
           <QRTextItem>
-            <FormattedMessage id="publicChannelPage.QRModalText" values={{chain: this.chain}}/>
+            <FormattedMessage id="publicChannelPage.QRModalText" />
           </QRTextItem>
         </QRText>
       </div>

diff --git a/app/javascript/views/publicChannelPage/TryBraveModal.jsx b/app/javascript/views/publicChannelPage/TryBraveModal.jsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { FormattedMessage, injectIntl } from "react-intl";
+import {
+  TryBraveButton,
+  TryBraveBackground,
+  TryBraveHeader,
+  TryBraveSubHeader,
+  TryBraveBullet,
+  TryBraveHeaderSection,
+  TryBraveIcon,
+} from "./PublicChannelPageStyle.js";
+import icon from "../../../assets/images/wallet_icon_color.png";
+import orangeCheckmark from "../../../assets/images/orange_checkmark.png";
+
+
+class TryBraveModal extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <TryBraveBackground>
+        <TryBraveHeaderSection>
+          <TryBraveIcon>
+            <img src={icon}/>
+          </TryBraveIcon>
+          <div>
+            <TryBraveHeader>
+              <FormattedMessage id="publicChannelPage.tryBraveHeader" />
+            </TryBraveHeader>
+            <TryBraveSubHeader>
+              <FormattedMessage id="publicChannelPage.tryBraveSubheader" />
+            </TryBraveSubHeader>
+          </div>
+        </TryBraveHeaderSection>
+        <TryBraveBullet>
+          <img src={orangeCheckmark}/>
+          <FormattedMessage id="publicChannelPage.tryBraveBullet1" />
+        </TryBraveBullet>
+        <TryBraveBullet>
+          <img src={orangeCheckmark}/>
+          <FormattedMessage id="publicChannelPage.tryBraveBullet2" />
+        </TryBraveBullet>
+        <TryBraveBullet>
+          <img src={orangeCheckmark}/>
+          <FormattedMessage id="publicChannelPage.tryBraveBullet3" />
+        </TryBraveBullet>
+        <TryBraveButton href="https://brave.com/wallet/" target="_blank">
+          <FormattedMessage id="publicChannelPage.tryBraveButton" />
+        </TryBraveButton>
+      </TryBraveBackground>
+    )
+  }
+}
+
+export default injectIntl(TryBraveModal);