Combine Buy and Swap

## Issue
5873 Unify swap and buy flow // swaps round 2

## Changes
- Added "Buy|Swap" tab in the Buy Page and display the Swap component when needed.
- Removed 'Swap' button from Wallet Page.
- "Buy More" and related tooltips updated to "Buy or Swap Credits".

static/app-strings.json

@@ -1150,6 +1150,7 @@
   "Update Your Password": "Update Your Password",
   "Your Wallet is Empty": "Your Wallet is Empty",
   "Buy Credits": "Buy Credits",
+  "Buy/Swap Credits": "Buy/Swap Credits",
   "LBRY, Inc. partners with Moonpay to provide the option to purchase LBRY Credits. %learn_more%.": "LBRY, Inc. partners with Moonpay to provide the option to purchase LBRY Credits. %learn_more%.",
   "Earn Rewards": "Earn Rewards",
   "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.": "Rewards are currently disabled for your account. Turn on diagnostic data sharing, in %settings%, to re-enable them.",
@@ -1197,6 +1198,7 @@
   "Send a %amount% Tip": "Send a %amount% Tip",
   "Channel to show support as": "Channel to show support as",
   "Buy more LBRY Credits": "Buy more LBRY Credits",
+  "Buy or swap more LBRY Credits": "Buy or swap more LBRY Credits",
   "Support this content": "Support this content",
   "Custom support amount": "Custom support amount",
   "(%lbc_balance% Credits available)": "(%lbc_balance% Credits available)",

ui/component/walletBalance/view.jsx

@@ -155,7 +155,6 @@ const WalletBalance = (props: Props) => {
             <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}`} />
-            <Button button="secondary" label={__('Swap')} icon={ICONS.COIN_SWAP} navigate={`/$/${PAGES.SWAP}`} />
           </div>
           {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
             <p className="help">

ui/component/walletSendTip/view.jsx

@@ -149,7 +149,7 @@ function WalletSendTip(props: Props) {
                 label={__('Earn Rewards')}
                 navigate={`/$/${PAGES.REWARDS}`}
               />
-              <Button icon={ICONS.BUY} button="secondary" label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
+              <Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
               <Button button="link" label={__('Nevermind')} onClick={closeModal} />
             </div>
           }
@@ -255,7 +255,7 @@ function WalletSendTip(props: Props) {
                       button="secondary"
                       className="button-toggle-group-action"
                       icon={ICONS.BUY}
-                      title={__('Buy more LBRY Credits')}
+                      title={__('Buy or swap more LBRY Credits')}
                       navigate={`/$/${PAGES.BUY}`}
                     />
                   )}

ui/component/walletTipAmountSelector/view.jsx

@@ -84,7 +84,7 @@ function WalletTipAmountSelector(props: Props) {
             button="secondary"
             className="button-toggle-group-action"
             icon={ICONS.BUY}
-            title={__('Buy more LBRY Credits')}
+            title={__('Buy or swap more LBRY Credits')}
             navigate={`/$/${PAGES.BUY}`}
           />
         )}

ui/component/yrblWalletEmpty/view.jsx

@@ -39,7 +39,7 @@ export default function YrblHelp(props: Props) {
         actions={
           <div className="section__actions">
             <Button button="primary" icon={ICONS.REWARDS} label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} />
-            <Button button="secondary" icon={ICONS.BUY} label={'Buy Credits'} navigate={`/$/${PAGES.BUY}`} />
+            <Button button="secondary" icon={ICONS.BUY} label={'Buy/Swap Credits'} navigate={`/$/${PAGES.BUY}`} />
             {includeWalletLink && (
               <Button
                 icon={ICONS.RECEIVE}

ui/page/buy/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React from 'react';
 import Page from 'component/page';
 import Card from 'component/common/card';
@@ -14,6 +15,8 @@ import Nag from 'component/common/nag';
 import I18nMessage from 'component/i18nMessage';
 import LbcSymbol from 'component/common/lbc-symbol';
 import { SIMPLE_SITE } from 'config';
+import classnames from 'classnames';
+import WalletSwap from 'component/walletSwap';
 
 const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY;
 const COUNTRIES = Array.from(
@@ -34,6 +37,11 @@ const COUNTRIES = Array.from(
   )
 );
 
+const TAB = {
+  BUY: 'BUY',
+  SWAP: 'SWAP',
+};
+
 type Props = {
   receiveAddress: ?string,
   gettingNewAddress: boolean,
@@ -46,6 +54,7 @@ type Props = {
 export default function BuyPage(props: Props) {
   const { receiveAddress, gettingNewAddress, doGetNewAddress, email, user, doUserSetCountry } = props;
   const initialCountry = (user && user.country) || '';
+  const [tab, setTab] = React.useState(TAB.BUY);
   const [url, setUrl] = React.useState();
   const [country, setCountry] = React.useState(initialCountry);
   const [showPurchaseScreen, setShowPurchaseScreen] = React.useState(false);
@@ -97,93 +106,125 @@ export default function BuyPage(props: Props) {
   return (
     <Page
       noSideNavigation
-      className="main--buy"
+      className="main--swap"
       backout={{
         backoutLabel: __('Done'),
-        title: (
-          <>
-            <LbcSymbol prefix={__('Buy')} size={28} />
-          </>
-        ),
+        title: <LbcSymbol prefix={__('Buy or Swap')} size={28} />,
       }}
     >
-      {!user && (
-        <div className="main--empty">
-          <Spinner delayed />
-        </div>
-      )}
+      <div className="section">
+        <Button
+          key="tip"
+          icon={ICONS.BUY}
+          label={__('Buy')}
+          button="alt"
+          onClick={() => setTab(TAB.BUY)}
+          className={classnames('button-toggle', { 'button-toggle--active': tab === TAB.BUY })}
+        />
+        <Button
+          key="boost"
+          icon={ICONS.COIN_SWAP}
+          label={__('Swap')}
+          button="alt"
+          onClick={() => setTab(TAB.SWAP)}
+          className={classnames('button-toggle', { 'button-toggle--active': tab === TAB.SWAP })}
+        />
+      </div>
+      <div className="section">
+        {tab === TAB.SWAP && <WalletSwap />}
+        {tab === TAB.BUY && (
+          <>
+            {!user && (
+              <div className="main--empty">
+                <Spinner delayed />
+              </div>
+            )}
 
-      {user && (
-        <>
-          {showPurchaseScreen ? (
-            <Card
-              title={title}
-              subtitle={subtitle}
-              actions={
-                url ? (
-                  <iframe
-                    allow="accelerometer; autoplay; camera; gyroscope; payment"
-                    frameBorder="0"
-                    src={url}
-                    width="100%"
-                  >
-                    <p>{__('Your browser does not support iframes.')}</p>
-                  </iframe>
-                ) : (
-                  <div className="main--empty">
-                    <Spinner delayed />
-                  </div>
-                )
-              }
-            />
-          ) : (
-            <Card
-              title={title}
-              subtitle={subtitle}
-              nag={country && !isValid && <Nag relative type="helpful" message={"This country isn't supported yet."} />}
-              actions={
-                <div>
-                  <div className="section">
-                    <FormField
-                      label={__('Country')}
-                      type="select"
-                      name="country-codes"
-                      helper={__(
-                        'Only some countries are eligible at this time. We are working to make this available to everyone.'
-                      )}
-                      value={country}
-                      onChange={(e) => setCountry(e.target.value)}
-                    >
-                      <option value="" disabled defaultValue>
-                        {__('Select your country')}
-                      </option>
-                      {COUNTRIES.map((country, index) => (
-                        <option key={country} value={country}>
-                          {country}
-                        </option>
-                      ))}
-                    </FormField>
-                  </div>
-                  {country && (
-                    <div className="section">
-                      {isValid ? (
-                        <div className="section__actions">
-                          <Button button="primary" label={__('Continue')} onClick={() => setShowPurchaseScreen(true)} />
-                        </div>
+            {user && (
+              <>
+                {showPurchaseScreen ? (
+                  <Card
+                    title={title}
+                    subtitle={subtitle}
+                    actions={
+                      url ? (
+                        <iframe
+                          allow="accelerometer; autoplay; camera; gyroscope; payment"
+                          frameBorder="0"
+                          src={url}
+                          width="100%"
+                        >
+                          <p>{__('Your browser does not support iframes.')}</p>
+                        </iframe>
                       ) : (
-                        <div className="section__actions">
-                          <Button button="alt" label={__('Go Back')} onClick={() => goBack()} />
-                          <Button button="link" label={__('Try Anyway')} onClick={() => setShowPurchaseScreen(true)} />
+                        <div className="main--empty">
+                          <Spinner delayed />
                         </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              }
-            />
-          )}
-        </>
-      )}
+                      )
+                    }
+                  />
+                ) : (
+                  <Card
+                    title={title}
+                    subtitle={subtitle}
+                    nag={
+                      country &&
+                      !isValid && <Nag relative type="helpful" message={"This country isn't supported yet."} />
+                    }
+                    actions={
+                      <div>
+                        <div className="section">
+                          <FormField
+                            label={__('Country')}
+                            type="select"
+                            name="country-codes"
+                            helper={__(
+                              'Only some countries are eligible at this time. We are working to make this available to everyone.'
+                            )}
+                            value={country}
+                            onChange={(e) => setCountry(e.target.value)}
+                          >
+                            <option value="" disabled defaultValue>
+                              {__('Select your country')}
+                            </option>
+                            {COUNTRIES.map((country, index) => (
+                              <option key={country} value={country}>
+                                {country}
+                              </option>
+                            ))}
+                          </FormField>
+                        </div>
+                        {country && (
+                          <div className="section">
+                            {isValid ? (
+                              <div className="section__actions">
+                                <Button
+                                  button="primary"
+                                  label={__('Continue')}
+                                  onClick={() => setShowPurchaseScreen(true)}
+                                />
+                              </div>
+                            ) : (
+                              <div className="section__actions">
+                                <Button button="alt" label={__('Go Back')} onClick={() => goBack()} />
+                                <Button
+                                  button="link"
+                                  label={__('Try Anyway')}
+                                  onClick={() => setShowPurchaseScreen(true)}
+                                />
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    }
+                  />
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
     </Page>
   );
 }