From 512d5928c729ef795d0fd0ffa15df00f8deb6287 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Sun, 29 Sep 2019 22:16:53 -0700
Subject: [PATCH 1/2] Fixes brave/brave-browser#6219 - removes unneeded mobile
 UI code

---
 .../resources/ui/components/amount/index.tsx  | 17 +++++-------
 .../resources/ui/components/amount/style.ts   | 13 +++++-----
 .../resources/ui/components/donate/index.tsx  | 13 ++++------
 .../resources/ui/components/donate/style.ts   | 26 +++----------------
 4 files changed, 20 insertions(+), 49 deletions(-)

diff --git a/components/brave_rewards/resources/ui/components/amount/index.tsx b/components/brave_rewards/resources/ui/components/amount/index.tsx
index 9ae924f7e37d..a215a21379f8 100644
--- a/components/brave_rewards/resources/ui/components/amount/index.tsx
+++ b/components/brave_rewards/resources/ui/components/amount/index.tsx
@@ -15,7 +15,6 @@ export interface Props {
   selected?: boolean
   type?: 'big' | 'small'
   currency?: string
-  isMobile?: boolean
 }
 
 export default class Amount extends React.PureComponent<Props, {}> {
@@ -25,20 +24,16 @@ export default class Amount extends React.PureComponent<Props, {}> {
     converted: 0
   }
 
-  getAboutText = (isMobile?: boolean) => {
-    return isMobile ? '' : getLocale('about')
-  }
-
   render () {
-    const { id, onSelect, amount, selected, type, converted, currency, isMobile } = this.props
+    const { id, onSelect, amount, selected, type, converted, currency } = this.props
 
     return (
-      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} isMobile={isMobile} data-test-id={'amount-wrapper'}>
-        <StyledAmount selected={selected} type={type} isMobile={isMobile}>
-          <StyledLogo isMobile={isMobile}><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
+      <StyledWrapper id={id} onClick={onSelect.bind(this, amount)} data-test-id={'amount-wrapper'}>
+        <StyledAmount selected={selected} type={type}>
+          <StyledLogo><BatColorIcon /></StyledLogo><StyledNumber>{amount}</StyledNumber> <StyledTokens>{type === 'big' ? 'BAT' : null}</StyledTokens>
         </StyledAmount>
-        <StyledConverted selected={selected} type={type} isMobile={isMobile}>
-          {this.getAboutText(isMobile)} {converted} {currency}
+        <StyledConverted selected={selected} type={type}>
+          {getLocale('about')} {converted} {currency}
         </StyledConverted>
       </StyledWrapper>
     )
diff --git a/components/brave_rewards/resources/ui/components/amount/style.ts b/components/brave_rewards/resources/ui/components/amount/style.ts
index 9dcb615e7a59..01f77c140828 100644
--- a/components/brave_rewards/resources/ui/components/amount/style.ts
+++ b/components/brave_rewards/resources/ui/components/amount/style.ts
@@ -12,9 +12,9 @@ export const StyledWrapper = styled<Partial<Props>, 'button'>('button')`
   background: none;
   padding: 0;
   cursor: pointer;
-  display: ${p => p.isMobile ? 'block' : 'flex'};
+  display: flex;
   align-items: center;
-  margin: ${p => p.isMobile ? '0 auto 8px auto' : '0 0 8px 0'};
+  margin: 0 0 8px 0;
 `
 
 export const StyledAmount = styled<Partial<Props>, 'div'>('div')`
@@ -26,12 +26,11 @@ export const StyledAmount = styled<Partial<Props>, 'div'>('div')`
   vertical-align: baseline;
   padding: ${p => p.type === 'big' ? '0 16px' : '0 12px'};
   min-height: ${p => p.type === 'big' ? 40 : 32}px;
-  min-width: ${p => p.isMobile ? '100px' : p.type === 'big' ? '118px' : '82px'};
-  margin-right: ${p => p.isMobile ? 0 : 12}px;
+  min-width: ${p => p.type === 'big' ? '118px' : '82px'};
+  margin-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: ${p => p.isMobile ? 5 : 0}px;
 `
 
 export const StyledTokens = styled<{}, 'div'>('div')`
@@ -44,7 +43,7 @@ export const StyledNumber = styled.span`
 
 export const StyledLogo = styled<Partial<Props>, 'div'>('div')`
   margin-right: 6px;
-  width: ${p => p.isMobile ? 20 : 23}px;
+  width: 23px;
 `
 
 export const StyledConverted = styled<Partial<Props>, 'div'>('div')`
@@ -52,6 +51,6 @@ export const StyledConverted = styled<Partial<Props>, 'div'>('div')`
   opacity: ${p => p.selected ? 1 : 0.4};
   font-size: ${p => p.type === 'big' ? '12px' : '10px'};
   color: #ffffff;
-  display: ${p => p.isMobile ? 'block' : 'inline-block'};
+  display: inline-block;
   font-weight: 500;
 `
diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx
index f3fe0ddae80c..1217378999bd 100644
--- a/components/brave_rewards/resources/ui/components/donate/index.tsx
+++ b/components/brave_rewards/resources/ui/components/donate/index.tsx
@@ -43,7 +43,6 @@ export interface Props {
   id?: string
   donateType: DonateType
   children?: React.ReactNode
-  isMobile?: boolean
   addFundsLink?: string
   type: BannerType
   nextContribution?: string
@@ -108,7 +107,6 @@ export default class Donate extends React.PureComponent<Props, State> {
       title,
       currentAmount,
       donateType,
-      isMobile,
       addFundsLink,
       type,
       nextContribution
@@ -119,15 +117,14 @@ export default class Donate extends React.PureComponent<Props, State> {
     const SendButton = isMonthly ? StyledMonthlySendButton : StyledSendButton
 
     return (
-      <StyledWrapper donateType={donateType} disabled={disabled} isMobile={isMobile}>
-        <StyledContent id={id} isMobile={isMobile}>
-          <StyledDonationTitle isMobile={isMobile}>{title}</StyledDonationTitle>
-            <StyledAmountsWrapper isMobile={isMobile}>
+      <StyledWrapper donateType={donateType} disabled={disabled}>
+        <StyledContent id={id}>
+          <StyledDonationTitle>{title}</StyledDonationTitle>
+            <StyledAmountsWrapper>
               {
                 donationAmounts && donationAmounts.map((donation: Donation) => {
                   return <div key={`${id}-tip-${donation.tokens}`}>
                     <Amount
-                      isMobile={isMobile}
                       amount={donation.tokens}
                       selected={donation.tokens === currentAmount.toString()}
                       onSelect={this.onAmountChange}
@@ -142,7 +139,7 @@ export default class Donate extends React.PureComponent<Props, State> {
         </StyledContent>
 
         <StyledSend onClick={this.validateDonation} data-test-id={'send-tip-button'} monthly={isMonthly}>
-          <StyledButtonWrapper isMobile={isMobile}>
+          <StyledButtonWrapper>
             <SendButton>
               <StyledIconSend disabled={disabled} donateType={donateType} monthly={isMonthly}>
                 <SendIcon />
diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts
index 05307fb68cbc..cac49517beee 100644
--- a/components/brave_rewards/resources/ui/components/donate/style.ts
+++ b/components/brave_rewards/resources/ui/components/donate/style.ts
@@ -18,7 +18,6 @@ interface Theme {
 interface StyleProps {
   disabled?: boolean
   donateType?: DonateType
-  isMobile?: boolean
   monthly?: boolean
 }
 
@@ -51,21 +50,6 @@ const getStyle = (p: StyleProps) => {
   `
 }
 
-const getAmountStyle = (isMobile?: boolean) => {
-  if (!isMobile) {
-    return null
-  }
-
-  return css`
-    display: grid;
-    grid-gap: 0px;
-    grid-template-columns: 1fr 1fr 1fr;
-    align-items: center;
-    justify-content: center;
-    padding: 0px 10px;
-  `
-}
-
 const getIconColor = (p: StyleProps) => {
   if (p.monthly) {
     return palette.orange500
@@ -81,13 +65,11 @@ const getIconColor = (p: StyleProps) => {
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
   position: relative;
   font-family: ${p => p.theme.fontFamily.body};
-  margin: ${p => p.isMobile ? '0 auto 8px auto' : 0}px
   ${getStyle}
 `
 
 export const StyledContent = styled<StyleProps, 'div'>('div')`
-  margin-top: ${p => p.isMobile ? -30 : 0}px;
-  padding: ${p => p.isMobile ? '0px' : 'var(--donate-content-padding)'};
+  padding: var(--donate-content-padding);
 `
 
 export const StyledDonationTitle = styled<StyleProps, 'div'>('div')`
@@ -95,12 +77,11 @@ export const StyledDonationTitle = styled<StyleProps, 'div'>('div')`
   font-weight: 600;
   line-height: 1.75;
   color: #fff;
-  margin-bottom: ${p => p.isMobile ? 20 : 14}px;
+  margin-bottom: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 167px;
-  padding-left: ${p => p.isMobile ? 20 : 0}px;
 `
 
 export const StyledSend = styled<StyleProps, 'div'>('div')`
@@ -143,7 +124,7 @@ export const StyledMonthlySendButton = styled(StyledSendButton)`
 
 export const StyledButtonWrapper = styled<StyleProps, 'div'>('div')`
   display: block;
-  width: ${p => p.isMobile ? 190 : 245}px;
+  width: 245px;
   margin: 0 auto;
 `
 
@@ -189,7 +170,6 @@ export const StyledFundsText = styled<{}, 'div'>('div')`
 export const StyledAmountsWrapper = styled<StyleProps, 'div'>('div')`
   width: 100%;
   display: block;
-  ${p => getAmountStyle(p.isMobile)}
 `
 
 export const StyledContributionWrapper = styled<{}, 'div'>('div')`

From 77160f1da4187923ba63a4359864517fa728c713 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Mon, 30 Sep 2019 10:36:22 -0700
Subject: [PATCH 2/2] Removing ModalAddFunds component

---
 .../resources/ui/components/index.ts          |   2 -
 .../modalAddFunds/__snapshots__/spec.tsx.snap |  68 ---------
 .../ui/components/modalAddFunds/index.tsx     | 141 ------------------
 .../ui/components/modalAddFunds/spec.tsx      |  24 ---
 .../ui/components/modalAddFunds/style.ts      | 129 ----------------
 .../resources/ui/stories/modal.tsx            |  48 ------
 .../settingsMobile/mobileWalletPanel.tsx      | 129 ----------------
 .../stories/settingsMobile/settingsMobile.tsx |   5 -
 8 files changed, 546 deletions(-)
 delete mode 100644 components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap
 delete mode 100644 components/brave_rewards/resources/ui/components/modalAddFunds/index.tsx
 delete mode 100644 components/brave_rewards/resources/ui/components/modalAddFunds/spec.tsx
 delete mode 100644 components/brave_rewards/resources/ui/components/modalAddFunds/style.ts
 delete mode 100644 components/brave_rewards/resources/ui/stories/settingsMobile/mobileWalletPanel.tsx

diff --git a/components/brave_rewards/resources/ui/components/index.ts b/components/brave_rewards/resources/ui/components/index.ts
index 34e2453773d6..a92006ed349b 100644
--- a/components/brave_rewards/resources/ui/components/index.ts
+++ b/components/brave_rewards/resources/ui/components/index.ts
@@ -24,7 +24,6 @@ import ListToken from './listToken'
 import MainToggle from './mainToggle'
 import MediaBox from './mediaBox'
 import ModalActivity from './modalActivity'
-import ModalAddFunds from './modalAddFunds'
 import ModalBackupRestore from './modalBackupRestore'
 import ModalContribute from './modalContribute'
 import ModalDonation from './modalDonation'
@@ -84,7 +83,6 @@ export {
   MainToggle,
   MediaBox,
   ModalActivity,
-  ModalAddFunds,
   ModalBackupRestore,
   ModalContribute,
   ModalDonation,
diff --git a/components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap
deleted file mode 100644
index 82b562c6c1a7..000000000000
--- a/components/brave_rewards/resources/ui/components/modalAddFunds/__snapshots__/spec.tsx.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = `
-<div
-  className="sc-kpOJdX jpznxG"
-  id="modal"
-  onClick={[Function]}
->
-  <div
-    className="sc-dxgOiQ hjCLQn"
-    size="normal"
-  >
-    <div
-      className="sc-ckVGcZ bHnoAp"
-    >
-      <svg
-        aria-hidden="true"
-        className="sc-frDJqD bnsddl"
-        focusable="false"
-        viewBox="0 0 32 32"
-      >
-        <path
-          d="M16 3a13 13 0 1 0 13 13A13 13 0 0 0 16 3zm0 24a11 11 0 1 1 11-11 11 11 0 0 1-11 11z"
-        />
-        <path
-          d="M20.71 11.29a1 1 0 0 0-1.42 0L16 14.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.29-3.3 3.29 3.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42L17.41 16l3.3-3.29a1 1 0 0 0 0-1.42z"
-        />
-      </svg>
-    </div>
-    <div
-      className="sc-jKJlTe gsPrjO"
-    >
-      <div
-        className="sc-bZQynM fXJRED"
-      >
-        <div
-          className="sc-gzVnrw cPMxVj"
-        >
-          MISSING: addFundsTitle
-        </div>
-        <p
-          className="sc-kGXeez VUxFl"
-        >
-          MISSING: addFundsText
-        </p>
-        <div
-          className="sc-dnqmqq glDomO"
-          data-test-id="addresses"
-        />
-        <div
-          className="sc-htoDjs biAWTq"
-        >
-          MISSING: addFundsNote
-           
-          <a
-            className="sc-kAzzGY glXQhK"
-            href="https://brave.com/faq-payments/#brave-payments"
-            target="_blank"
-          >
-            MISSING: addFundsFAQ
-          </a>
-          .
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/components/brave_rewards/resources/ui/components/modalAddFunds/index.tsx b/components/brave_rewards/resources/ui/components/modalAddFunds/index.tsx
deleted file mode 100644
index a65f2ff602b4..000000000000
--- a/components/brave_rewards/resources/ui/components/modalAddFunds/index.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import * as React from 'react'
-import {
-  StyledWrapper,
-  StyledTitle,
-  StyledNote,
-  StyledAddresses,
-  StyledAddress,
-  StyledLogo,
-  StyledData,
-  StyledShowQR,
-  StyledQRImageWrapper,
-  StyledQRImage,
-  StyledAddressTitle,
-  StyledLink,
-  StyledHeader,
-  StyledWalletAddress,
-  StyledQRButton,
-  StyledText
-} from './style'
-import Modal from 'brave-ui/components/popupModals/modal/index'
-import { getLocale } from 'brave-ui/helpers'
-import Input from 'brave-ui/components/formControls/input'
-import { BatColorIcon, BitcoinColorIcon, EthereumColorIcon, LitecoinColorIcon } from 'brave-ui/components/icons'
-
-export type Type = 'BAT' | 'ETH' | 'BTC' | 'LTC'
-
-export interface Address {
-  address: string
-  qr: string | null
-  type: Type
-}
-
-export interface Props {
-  onClose: () => void
-  id?: string
-  isMobile?: boolean
-  addresses: Address[]
-}
-
-const icons: Record<Type, React.ReactNode> = {
-  BAT: <BatColorIcon />,
-  ETH: <EthereumColorIcon />,
-  BTC: <BitcoinColorIcon />,
-  LTC: <LitecoinColorIcon />
-}
-
-interface State {
-  current?: Type
-}
-
-export default class ModalAddFunds extends React.PureComponent<Props, State> {
-  constructor (props: Props) {
-    super(props)
-    this.state = {
-      current: undefined
-    }
-  }
-
-  onQR = (type: Type) => {
-    this.setState({
-      current: type
-    })
-  }
-
-  getAddress = (address: Address) => {
-    const { isMobile } = this.props
-    const current = address.type === this.state.current
-
-    return (
-      <StyledAddress
-        isMobile={!!isMobile}
-        key={`address-${address.type}`}
-        data-test-id='single-address'
-      >
-        <StyledHeader>
-          <StyledLogo>
-            {icons[address.type]}
-          </StyledLogo>
-          <StyledAddressTitle>
-            {getLocale(`title${address.type}`)}
-          </StyledAddressTitle>
-          <StyledData>
-            <StyledWalletAddress>{getLocale('walletAddress')}</StyledWalletAddress>
-            <Input value={address.address}/>
-          </StyledData>
-        </StyledHeader>
-        {
-          address.qr
-          ? (<>
-            <StyledQRImageWrapper>
-              {
-                current
-                ? <StyledQRImage src={address.qr} />
-                : <StyledShowQR>
-                  <StyledQRButton
-                    size={'large'}
-                    brand={'rewards'}
-                    type={'accent'}
-                    text={getLocale('addFundsQR')}
-                    onClick={this.onQR.bind(this, address.type)}
-                  />
-                </StyledShowQR>
-              }
-
-            </StyledQRImageWrapper>
-          </>)
-          : null
-        }
-      </StyledAddress>
-    )
-  }
-
-  render () {
-    const { id, onClose, addresses, isMobile } = this.props
-
-    return (
-      <Modal id={id} onClose={onClose} isMobile={isMobile}>
-        <StyledWrapper>
-          <StyledTitle>{getLocale('addFundsTitle')}</StyledTitle>
-          <StyledText>
-            {getLocale('addFundsText')}
-          </StyledText>
-          <StyledAddresses data-test-id='addresses'>
-            {
-              addresses && addresses.map((address: Address) => this.getAddress(address))
-            }
-          </StyledAddresses>
-          <StyledNote>
-            {getLocale('addFundsNote')} <StyledLink href='https://brave.com/faq-payments/#brave-payments' target={'_blank'}>
-              {getLocale('addFundsFAQ')}
-              </StyledLink>.
-          </StyledNote>
-        </StyledWrapper>
-      </Modal>
-    )
-  }
-}
diff --git a/components/brave_rewards/resources/ui/components/modalAddFunds/spec.tsx b/components/brave_rewards/resources/ui/components/modalAddFunds/spec.tsx
deleted file mode 100644
index 68c63db1c2b4..000000000000
--- a/components/brave_rewards/resources/ui/components/modalAddFunds/spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/* global jest, expect, describe, it, afterEach */
-import * as React from 'react'
-import { shallow } from 'enzyme'
-import { create } from 'react-test-renderer'
-import ModalAddFunds from './index'
-import { TestThemeProvider } from 'brave-ui/theme'
-
-describe('ModalAddFunds tests', () => {
-  const baseComponent = (props?: object) => <TestThemeProvider><ModalAddFunds id='modal' {...props} /></TestThemeProvider>
-
-  describe('basic tests', () => {
-    it('matches the snapshot', () => {
-      const component = baseComponent()
-      const tree = create(component).toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-
-    it('renders the component', () => {
-      const wrapper = shallow(baseComponent())
-      const assertion = wrapper.find('#modal').length
-      expect(assertion).toBe(1)
-    })
-  })
-})
diff --git a/components/brave_rewards/resources/ui/components/modalAddFunds/style.ts b/components/brave_rewards/resources/ui/components/modalAddFunds/style.ts
deleted file mode 100644
index 31f2372c46e7..000000000000
--- a/components/brave_rewards/resources/ui/components/modalAddFunds/style.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License. v. 2.0. If a copy of the MPL was not distributed with this file.
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import styled from 'styled-components'
-import Button, { Props as ButtonProps } from 'brave-ui/components/buttonsIndicators/button'
-import { ComponentType } from 'react'
-
-interface StyleProps {
-  isMobile: boolean
-}
-
-export const StyledWrapper = styled<{}, 'div'>('div')`
-  font-family: Poppins, sans-serif;
-`
-
-export const StyledTitle = styled<{}, 'div'>('div')`
-  font-size: 32px;
-  font-weight: 500;
-  color: #4b4c5c;
-  margin-bottom: 10px;
-  line-height: 1.3;
-`
-
-export const StyledNote = styled<{}, 'div'>('div') `
-  max-width: 508px;
-  font-family: Muli,sans-serif;
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 1.5;
-  color: #686978;
-`
-
-export const StyledAddresses = styled<{}, 'div'>('div') `
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -15px;
-  align-items: stretch;
-  justify-content: center;
-`
-
-export const StyledAddress = styled<StyleProps, 'div'>('div') `
-  flex-basis: ${p => p.isMobile ? 100 : 50}%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  width: ${p => p.isMobile ? 100 : 50}%;
-  box-sizing: border-box;
-  padding: 0 15px 26px;
-`
-
-export const StyledLogo = styled<{}, 'div'>('div') `
-  height: 60px;
-  flex-basis: 60px;
-  flex-shrink: 0;
-  margin-right: 20px;
-`
-
-export const StyledData = styled<{}, 'div'>('div') `
-  flex-basis: 100%;
-  text-align: center;
-  margin-top: 22px;
-  color: #686978;
-`
-
-export const StyledAddressTitle = styled<{}, 'div'>('div') `
-  flex-basis: 30%;
-  flex-grow: 1;
-  font-size: 16px;
-  line-height: 1.38;
-  color: #4b4c5c;
-`
-
-export const StyledShowQR = styled<{}, 'div'>('div') `
-  width: 110px;
-  height: 110px;
-  justify-content: center;
-  display: flex;
-  background: #eee;
-`
-
-export const StyledQRImageWrapper = styled<{}, 'div'>('div') `
-  flex-basis: 100%;
-  justify-content: center;
-  display: flex;
-  margin: 15px 0 10px;
-  position: relative;
-`
-
-export const StyledQRImage = styled<{}, 'img'>('img') `
-  width: 110px;
-  height: 110px;
-`
-
-export const StyledQRButton = styled(Button as ComponentType<ButtonProps>) `
-  position: absolute;
-  top: calc(50% - 23px);
-  font-weight: 400;
-`
-
-export const StyledLink = styled<{}, 'a'>('a') `
-  color: #4c54d2;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`
-
-export const StyledHeader = styled<{}, 'div'>('div') `
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`
-
-export const StyledWalletAddress = styled<{}, 'div'>('div') `
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  color: #4b4c5c;
-  text-align: left;
-  margin-bottom: 4px;
-`
-
-export const StyledText = styled<{}, 'p'>('p') `
-  margin-bottom: 30px;
-  padding: 0;
-  font-size: 15px;
-  line-height: 1.4;
-`
diff --git a/components/brave_rewards/resources/ui/stories/modal.tsx b/components/brave_rewards/resources/ui/stories/modal.tsx
index fb60111ccb08..78d48c405c6d 100644
--- a/components/brave_rewards/resources/ui/stories/modal.tsx
+++ b/components/brave_rewards/resources/ui/stories/modal.tsx
@@ -23,7 +23,6 @@ import {
   ModalShowAdsHistory,
   ModalVerify
 } from '../components'
-import ModalAddFunds, { Address } from '../components/modalAddFunds'
 
 const favicon = require('./img/brave-favicon.png')
 const ddgo = require('./img/ddgo.jpg')
@@ -375,53 +374,6 @@ storiesOf('Rewards/Modal', module)
       />
     )
   })
-  .add('Add funds', () => {
-    const addresses: Address[] = [
-      {
-        type: 'BTC',
-        address: '17fBi3kyqUd2jjPDSi8ArBbMWso16qmxW5',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAAC5CAAAAABRxsGAAAABz0lEQVR42u3cQY7DIAwF0Nz/0u1uVgP5hqYV8Fh1lFF4qVRjbNrrteq4yMnJycnJycnJycnJyXeRX/ejfcO/q6X/q89GTn62PJiz+Wdz9v/uXJqNnJy8/blvRo9mLGg+V302cnLyAXm6jAfBiZyc/EF5kJ+n9yMnJ5/Pz4OZSnvu7+0syMmXlwdr+Qdffbk6R06+sjxu1YRpeD9f+EWHi5x8ZXnwuW8+QwAs1a3JycnjwJEm34OtpFJuT05+tjyIMkHtqm6bjy3k5MfI09JT0A5KL8THqcjJT5WnnddHwkqAJicnj/fDaa82zRzmO7nk5MfI+4SgxBz0eftv22hsISffVx6Ei9J0/TJYvQBNTk6ebJSDq6Os6bMW5OT7ypO1NzwhVdpf99MMcnLyuPP68HONrv7k5GfJSy2d+nY7jUHk5OQ38mDOWokqXP3nYws5+W7ydPRjUD3vLu25ycmPlV/3I60zB6cp+q/mO1zk5FvK04hSP9FU+qrAJ6tz5OS7yeuHK9IE4aoMcnLyUflgzCgVvsnJyedjS1oQSytq89U5cvLN5fWraWoerPTk5OTzv4FWf8z0uR6szpGTryxfYpCTk5OTk5OTk5OTk5OvON4QJEO8FpFK4QAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'ETH',
-        address: '0xF10bfc0EB8Fcfd1240a5BB97C3e5a7752cD1C388',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACPklEQVR42u3bwU7DMBAE0P7/T8ONA1LcGXsTFfRyKpQ2+3IY2bvm9fWfrhcNDQ0NDQ0NDQ0NDQ0NDc2p5vX+6m7y84lfry6/ebMCGhqaSU1QW/CJX2+kT6KvgIaG5h7NZd5UubQu6/KbgwpoaGg+QNNn2iWYhobm72rSzwZxRkND81GatGex+bG14eHdGg0NTd/rvPnVw51bGhqajTHj8iZplWlL5O4pLg0NTbC7qIruextBqtLQ0DyiqQaYl8LL363Dbv04hlY2NDQ0qSYoK4ikILqC5c15ptHQ0FSa4E792HJzhHo08aChoTmeEfQ3Duae/RLqqMtBQ0NzsrIJGhebtfWtz/P9DQ0NTZVpgStY43T9yrBDQkND84imGmX2rYn10qiKMxoamnFNuhxJrZvnH9MGBw0NzbgmbWakZaVReHIaioaGZkhTRVe1sgkmKNXGh4aG5h7NzHQybWb0OXfU66ShoakmHsGwI9gMBXk4s8ahoaEZ0lSdy+CU08k/TQ0lNA0NzaYmaFqmG5X+EY13bmloaI4zbXOP0g871o9tKKFpaGjSTAuOL6Y90X7Pk8YZDQ3NpCZuKoQHodYxlbY5aWhontO83l/rP+6LmTlQTUNDM6lJkyzY7lSLpODJ0tDQPKfZLDCIs2p4Mtm5paGhuVmzLjrY5KQNTxoamo/XHGfaxgiGhoZmWpO+GxxcSmNq8+ADDQ3NuCbdbAQ/phuV4I9v7NzS0ND8g4uGhoaGhoaGhoaGhoaGhqa5vgFTleQ0sHcoKgAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'BAT',
-        address: '0xF10bfc0EB8Fcfd1240a5BB97C3e5a7752cD1C388',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACPklEQVR42u3bwU7DMBAE0P7/T8ONA1LcGXsTFfRyKpQ2+3IY2bvm9fWfrhcNDQ0NDQ0NDQ0NDQ0NDc2p5vX+6m7y84lfry6/ebMCGhqaSU1QW/CJX2+kT6KvgIaG5h7NZd5UubQu6/KbgwpoaGg+QNNn2iWYhobm72rSzwZxRkND81GatGex+bG14eHdGg0NTd/rvPnVw51bGhqajTHj8iZplWlL5O4pLg0NTbC7qIruextBqtLQ0DyiqQaYl8LL363Dbv04hlY2NDQ0qSYoK4ikILqC5c15ptHQ0FSa4E792HJzhHo08aChoTmeEfQ3Duae/RLqqMtBQ0NzsrIJGhebtfWtz/P9DQ0NTZVpgStY43T9yrBDQkND84imGmX2rYn10qiKMxoamnFNuhxJrZvnH9MGBw0NzbgmbWakZaVReHIaioaGZkhTRVe1sgkmKNXGh4aG5h7NzHQybWb0OXfU66ShoakmHsGwI9gMBXk4s8ahoaEZ0lSdy+CU08k/TQ0lNA0NzaYmaFqmG5X+EY13bmloaI4zbXOP0g871o9tKKFpaGjSTAuOL6Y90X7Pk8YZDQ3NpCZuKoQHodYxlbY5aWhontO83l/rP+6LmTlQTUNDM6lJkyzY7lSLpODJ0tDQPKfZLDCIs2p4Mtm5paGhuVmzLjrY5KQNTxoamo/XHGfaxgiGhoZmWpO+GxxcSmNq8+ADDQ3NuCbdbAQ/phuV4I9v7NzS0ND8g4uGhoaGhoaGhoaGhoaGhqa5vgFTleQ0sHcoKgAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'LTC',
-        address: 'Le8aswhmGJjn9jP5teEWdyJARak4xU8sCn',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACOUlEQVR42u3bQXLDIAwF0Nz/0u0FYvKFBNN0Hit7mtq8LDTwRV4//2m8aGhoaGhoaGhoaGhoaGhouprX57H+8LvnvbstPXT9DhoamnHNc+F4fNZyWmvX0AxoaGimNe/qyONf16UrqILBO2hoaL5Is4YESx4aGpov0pRK13prQ0ND86c0gbX0zvX0g/nS0NDc0wRJ4+Gry8ktDQ3NRptxL7ksTfBeF5eGhibYXQSR5mPtS/dBHTANDc2kJkguSwUrtbYaojQ0NEc06e1mSVq7gmCUhobmoCbIHIPOZsnVWd7Q0NCMa9Iwo9TZ3MgwwwyEhoZmXBN0MR+vgmVL50QEDQ3NPU2w4Ci1LUvdzsmUg4aGpt73TE8lBWlIqYhNdjxoaGg6fc/A1d6ZpKcjk7fR0NAMatJ5pM3PYPsU/Ec/s6GhoUlXNmlforRsqR9yCLqiNDQ045pSWekccCr1VvtZJw0NTSfrDEpXUBnTk9HpXouGhua0Zv3AzW7n+iMH+540NDT1rHN97LkejsRLlM9nrmloaO5pSpFmWr+Cn1qkSy0aGprLmtJpqHVcEViH9jc0NDQlTTo2s41SejF5oouGhqaTdaYlKbgKdk6lM9I0NDRnNEElS0OP9DtJ26o0NDT3NEG96fQvgv3Smd0aDQ3NoGZzPVPqc9DQ0PxlTTC3/orlc8BBQ0NzRpMGmeltUMTW3ywNDc09TZBPBH3PemFrlVEaGpoZzdcOGhoaGhoaGhoaGhoaGhqayvgFbnvHJxkVZlQAAAAASUVORK5CYII='
-      }
-    ]
-
-    return (
-      <ModalAddFunds
-        addresses={addresses}
-        onClose={doNothing}
-      />
-    )
-  })
-  .add('Add funds (JP)', () => {
-    const addresses: Address[] = [
-      {
-        type: 'BAT',
-        address: '0xF10bfc0EB8Fcfd1240a5BB97C3e5a7752cD1C388',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACPklEQVR42u3bwU7DMBAE0P7/T8ONA1LcGXsTFfRyKpQ2+3IY2bvm9fWfrhcNDQ0NDQ0NDQ0NDQ0NDc2p5vX+6m7y84lfry6/ebMCGhqaSU1QW/CJX2+kT6KvgIaG5h7NZd5UubQu6/KbgwpoaGg+QNNn2iWYhobm72rSzwZxRkND81GatGex+bG14eHdGg0NTd/rvPnVw51bGhqajTHj8iZplWlL5O4pLg0NTbC7qIruextBqtLQ0DyiqQaYl8LL363Dbv04hlY2NDQ0qSYoK4ikILqC5c15ptHQ0FSa4E792HJzhHo08aChoTmeEfQ3Duae/RLqqMtBQ0NzsrIJGhebtfWtz/P9DQ0NTZVpgStY43T9yrBDQkND84imGmX2rYn10qiKMxoamnFNuhxJrZvnH9MGBw0NzbgmbWakZaVReHIaioaGZkhTRVe1sgkmKNXGh4aG5h7NzHQybWb0OXfU66ShoakmHsGwI9gMBXk4s8ahoaEZ0lSdy+CU08k/TQ0lNA0NzaYmaFqmG5X+EY13bmloaI4zbXOP0g871o9tKKFpaGjSTAuOL6Y90X7Pk8YZDQ3NpCZuKoQHodYxlbY5aWhontO83l/rP+6LmTlQTUNDM6lJkyzY7lSLpODJ0tDQPKfZLDCIs2p4Mtm5paGhuVmzLjrY5KQNTxoamo/XHGfaxgiGhoZmWpO+GxxcSmNq8+ADDQ3NuCbdbAQ/phuV4I9v7NzS0ND8g4uGhoaGhoaGhoaGhoaGhqa5vgFTleQ0sHcoKgAAAABJRU5ErkJggg=='
-      }
-    ]
-
-    return (
-      <ModalAddFunds
-        addresses={addresses}
-        onClose={doNothing}
-      />
-    )
-  })
   .add('Donation', () => {
     const rows: DonationDetailRow[] = [
       {
diff --git a/components/brave_rewards/resources/ui/stories/settingsMobile/mobileWalletPanel.tsx b/components/brave_rewards/resources/ui/stories/settingsMobile/mobileWalletPanel.tsx
deleted file mode 100644
index f241a79d7a7d..000000000000
--- a/components/brave_rewards/resources/ui/stories/settingsMobile/mobileWalletPanel.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import * as React from 'react'
-import { object } from '@storybook/addon-knobs'
-
-import { WalletEmpty, WalletWrapper } from '../../components'
-import { StyledWalletClose, StyledWalletOverlay, StyledWalletWrapper } from './style'
-import { CloseStrokeIcon, WalletAddIcon } from 'brave-ui/components/icons'
-import ModalAddFunds, { Address } from '../../components/modalAddFunds'
-
-interface State {
-  addFundsShown?: boolean
-}
-
-interface Props {
-  visible?: boolean
-  toggleAction: () => void
-}
-
-const doNothing = () => {
-  console.log('nothing')
-}
-
-const notImplemented = () => {
-  console.log('view not implemented')
-}
-
-class MobileWalletPanel extends React.Component<Props, State> {
-  constructor (props: Props) {
-    super(props)
-
-    this.state = {
-      addFundsShown: false
-    }
-  }
-
-  toggleAddFunds = () => {
-    this.setState({ addFundsShown: !this.state.addFundsShown })
-  }
-
-  get walletAddresses (): Address[] {
-    return [
-      {
-        type: 'BTC',
-        address: '17fBi3kyqUd2jjPDSi8ArBbMWso16qmxW5',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALkAAAC5CAAAAABRxsGAAAABz0lEQVR42u3cQY7DIAwF0Nz/0u1uVgP5hqYV8Fh1lFF4qVRjbNrrteq4yMnJycnJycnJycnJyXeRX/ejfcO/q6X/q89GTn62PJiz+Wdz9v/uXJqNnJy8/blvRo9mLGg+V302cnLyAXm6jAfBiZyc/EF5kJ+n9yMnJ5/Pz4OZSnvu7+0syMmXlwdr+Qdffbk6R06+sjxu1YRpeD9f+EWHi5x8ZXnwuW8+QwAs1a3JycnjwJEm34OtpFJuT05+tjyIMkHtqm6bjy3k5MfI09JT0A5KL8THqcjJT5WnnddHwkqAJicnj/fDaa82zRzmO7nk5MfI+4SgxBz0eftv22hsISffVx6Ei9J0/TJYvQBNTk6ebJSDq6Os6bMW5OT7ypO1NzwhVdpf99MMcnLyuPP68HONrv7k5GfJSy2d+nY7jUHk5OQ38mDOWokqXP3nYws5+W7ydPRjUD3vLu25ycmPlV/3I60zB6cp+q/mO1zk5FvK04hSP9FU+qrAJ6tz5OS7yeuHK9IE4aoMcnLyUflgzCgVvsnJyedjS1oQSytq89U5cvLN5fWraWoerPTk5OTzv4FWf8z0uR6szpGTryxfYpCTk5OTk5OTk5OTk5OvON4QJEO8FpFK4QAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'ETH',
-        address: '0xF10bfc0EB8Fcfd1240a5BB97C3e5a7752cD1C388',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACPklEQVR42u3bwU7DMBAE0P7/T8ONA1LcGXsTFfRyKpQ2+3IY2bvm9fWfrhcNDQ0NDQ0NDQ0NDQ0NDc2p5vX+6m7y84lfry6/ebMCGhqaSU1QW/CJX2+kT6KvgIaG5h7NZd5UubQu6/KbgwpoaGg+QNNn2iWYhobm72rSzwZxRkND81GatGex+bG14eHdGg0NTd/rvPnVw51bGhqajTHj8iZplWlL5O4pLg0NTbC7qIruextBqtLQ0DyiqQaYl8LL363Dbv04hlY2NDQ0qSYoK4ikILqC5c15ptHQ0FSa4E792HJzhHo08aChoTmeEfQ3Duae/RLqqMtBQ0NzsrIJGhebtfWtz/P9DQ0NTZVpgStY43T9yrBDQkND84imGmX2rYn10qiKMxoamnFNuhxJrZvnH9MGBw0NzbgmbWakZaVReHIaioaGZkhTRVe1sgkmKNXGh4aG5h7NzHQybWb0OXfU66ShoakmHsGwI9gMBXk4s8ahoaEZ0lSdy+CU08k/TQ0lNA0NzaYmaFqmG5X+EY13bmloaI4zbXOP0g871o9tKKFpaGjSTAuOL6Y90X7Pk8YZDQ3NpCZuKoQHodYxlbY5aWhontO83l/rP+6LmTlQTUNDM6lJkyzY7lSLpODJ0tDQPKfZLDCIs2p4Mtm5paGhuVmzLjrY5KQNTxoamo/XHGfaxgiGhoZmWpO+GxxcSmNq8+ADDQ3NuCbdbAQ/phuV4I9v7NzS0ND8g4uGhoaGhoaGhoaGhoaGhqa5vgFTleQ0sHcoKgAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'BAT',
-        address: '0xF10bfc0EB8Fcfd1240a5BB97C3e5a7752cD1C388',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACPklEQVR42u3bwU7DMBAE0P7/T8ONA1LcGXsTFfRyKpQ2+3IY2bvm9fWfrhcNDQ0NDQ0NDQ0NDQ0NDc2p5vX+6m7y84lfry6/ebMCGhqaSU1QW/CJX2+kT6KvgIaG5h7NZd5UubQu6/KbgwpoaGg+QNNn2iWYhobm72rSzwZxRkND81GatGex+bG14eHdGg0NTd/rvPnVw51bGhqajTHj8iZplWlL5O4pLg0NTbC7qIruextBqtLQ0DyiqQaYl8LL363Dbv04hlY2NDQ0qSYoK4ikILqC5c15ptHQ0FSa4E792HJzhHo08aChoTmeEfQ3Duae/RLqqMtBQ0NzsrIJGhebtfWtz/P9DQ0NTZVpgStY43T9yrBDQkND84imGmX2rYn10qiKMxoamnFNuhxJrZvnH9MGBw0NzbgmbWakZaVReHIaioaGZkhTRVe1sgkmKNXGh4aG5h7NzHQybWb0OXfU66ShoakmHsGwI9gMBXk4s8ahoaEZ0lSdy+CU08k/TQ0lNA0NzaYmaFqmG5X+EY13bmloaI4zbXOP0g871o9tKKFpaGjSTAuOL6Y90X7Pk8YZDQ3NpCZuKoQHodYxlbY5aWhontO83l/rP+6LmTlQTUNDM6lJkyzY7lSLpODJ0tDQPKfZLDCIs2p4Mtm5paGhuVmzLjrY5KQNTxoamo/XHGfaxgiGhoZmWpO+GxxcSmNq8+ADDQ3NuCbdbAQ/phuV4I9v7NzS0ND8g4uGhoaGhoaGhoaGhoaGhqa5vgFTleQ0sHcoKgAAAABJRU5ErkJggg=='
-      },
-      {
-        type: 'LTC',
-        address: 'Le8aswhmGJjn9jP5teEWdyJARak4xU8sCn',
-        qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAAAAAA+16u1AAACOUlEQVR42u3bQXLDIAwF0Nz/0u0FYvKFBNN0Hit7mtq8LDTwRV4//2m8aGhoaGhoaGhoaGhoaGhouprX57H+8LvnvbstPXT9DhoamnHNc+F4fNZyWmvX0AxoaGimNe/qyONf16UrqILBO2hoaL5Is4YESx4aGpov0pRK13prQ0ND86c0gbX0zvX0g/nS0NDc0wRJ4+Gry8ktDQ3NRptxL7ksTfBeF5eGhibYXQSR5mPtS/dBHTANDc2kJkguSwUrtbYaojQ0NEc06e1mSVq7gmCUhobmoCbIHIPOZsnVWd7Q0NCMa9Iwo9TZ3MgwwwyEhoZmXBN0MR+vgmVL50QEDQ3NPU2w4Ci1LUvdzsmUg4aGpt73TE8lBWlIqYhNdjxoaGg6fc/A1d6ZpKcjk7fR0NAMatJ5pM3PYPsU/Ec/s6GhoUlXNmlforRsqR9yCLqiNDQ045pSWekccCr1VvtZJw0NTSfrDEpXUBnTk9HpXouGhua0Zv3AzW7n+iMH+540NDT1rHN97LkejsRLlM9nrmloaO5pSpFmWr+Cn1qkSy0aGprLmtJpqHVcEViH9jc0NDQlTTo2s41SejF5oouGhqaTdaYlKbgKdk6lM9I0NDRnNEElS0OP9DtJ26o0NDT3NEG96fQvgv3Smd0aDQ3NoGZzPVPqc9DQ0PxlTTC3/orlc8BBQ0NzRpMGmeltUMTW3ywNDc09TZBPBH3PemFrlVEaGpoZzdcOGhoaGhoaGhoaGhoaGhqayvgFbnvHJxkVZlQAAAAASUVORK5CYII='
-      }
-    ]
-  }
-
-  render () {
-    const { visible, toggleAction } = this.props
-
-    if (!visible) {
-      return null
-    }
-
-    return (
-      <>
-        <StyledWalletOverlay>
-          <StyledWalletClose>
-            <CloseStrokeIcon onClick={toggleAction}/>
-          </StyledWalletClose>
-          <StyledWalletWrapper>
-            <WalletWrapper
-              balance={'30.0'}
-              converted={'7.00 USD'}
-              actions={[
-                {
-                  name: 'Add funds',
-                  action: this.toggleAddFunds,
-                  icon: <WalletAddIcon />
-                }
-              ]}
-              compact={true}
-              isMobile={true}
-              onSettingsClick={notImplemented}
-              onActivityClick={doNothing}
-              showSecActions={true}
-              grants={object('Claimed grants', [
-                {
-                  tokens: '8.0',
-                  expireDate: '7/15/2018',
-                  type: 'ugp'
-                },
-                {
-                  tokens: '10.0',
-                  expireDate: '9/10/2018',
-                  type: 'ugp'
-                },
-                {
-                  tokens: '10.0',
-                  expireDate: '10/10/2018',
-                  type: 'ads'
-                }
-              ])}
-            >
-              <WalletEmpty hideAddFundsText={true} />
-            </WalletWrapper>
-          </StyledWalletWrapper>
-          {
-            this.state.addFundsShown
-            ? <ModalAddFunds isMobile={true} onClose={this.toggleAddFunds} addresses={this.walletAddresses} />
-            : null
-          }
-        </StyledWalletOverlay>
-      </>
-    )
-  }
-}
-
-export default MobileWalletPanel
diff --git a/components/brave_rewards/resources/ui/stories/settingsMobile/settingsMobile.tsx b/components/brave_rewards/resources/ui/stories/settingsMobile/settingsMobile.tsx
index 34b94c20738e..80e86226b05c 100644
--- a/components/brave_rewards/resources/ui/stories/settingsMobile/settingsMobile.tsx
+++ b/components/brave_rewards/resources/ui/stories/settingsMobile/settingsMobile.tsx
@@ -9,7 +9,6 @@ import GrantMobile from './grantMobile'
 import AdsBoxMobile from './adsBoxMobile'
 import ContributeBoxMobile from './contributeBoxMobile'
 import DonationsBoxMobile from './donationsBoxMobile'
-import MobileWalletPanel from './mobileWalletPanel'
 import { StyledDisabledContent, StyledHeading, StyledText } from './style'
 import {
   MainToggleMobile,
@@ -81,10 +80,6 @@ class SettingsMobile extends React.PureComponent<{}, State> {
         <DonationsBoxMobile
           rewardsEnabled={this.state.mainToggle}
         />
-        <MobileWalletPanel
-          toggleAction={this.onToggleWallet}
-          visible={this.state.walletShown}
-        />
       </SettingsPageMobile>
     )
   }