Add Funds modal now shows crypto selections centered

src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap

@@ -35,6 +35,10 @@ exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 .c10 {
@@ -142,6 +146,7 @@ exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = `
         </p>
         <div
           className="c8"
+          data-test-id="addresses"
         />
         <div
           className="c9"

src/features/rewards/modalAddFunds/index.tsx

@@ -74,6 +74,7 @@ export default class ModalAddFunds extends React.PureComponent<Props, State> {
       <StyledAddress
         isMobile={!!isMobile}
         key={`address-${address.type}`}
+        data-test-id='single-address'
       >
         <StyledHeader>
           <StyledLogo>
@@ -123,7 +124,7 @@ export default class ModalAddFunds extends React.PureComponent<Props, State> {
           <StyledText>
             {getLocale('addFundsText')}
           </StyledText>
-          <StyledAddresses>
+          <StyledAddresses data-test-id='addresses'>
             {
               addresses && addresses.map((address: Address) => this.getAddress(address))
             }

src/features/rewards/modalAddFunds/style.ts

@@ -36,6 +36,7 @@ export const StyledAddresses = styled<{}, 'div'>('div') `
   flex-wrap: wrap;
   margin: 0 -15px;
   align-items: stretch;
+  justify-content: center;
 `
 
 export const StyledAddress = styled<StyleProps, 'div'>('div') `

src/features/rewards/walletWrapper/index.tsx

@@ -80,6 +80,7 @@ export interface ActionWallet {
   icon: React.ReactNode
   name: string
   action: () => void
+  testId?: string
 }
 
 export type NotificationType = 'ads' | 'ads-launch' | 'backupWallet' | 'contribute' | 'grant' | 'insufficientFunds' | 'tipsProcessed' | 'error' | ''
@@ -132,10 +133,10 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
     }
   }
 
-  generateActions (actions: { icon: React.ReactNode, name: string, action: () => void }[], id?: string) {
+  generateActions (actions: { icon: React.ReactNode, name: string, testId?: string, action: () => void }[], id?: string) {
     return actions && actions.map((action, i: number) => {
       return (
-        <StyledAction key={`${id}-${i}`} onClick={action.action}>
+        <StyledAction key={`${id}-${i}`} onClick={action.action} data-test-id={action.testId}>
           <StyledActionIcon>{action.icon}</StyledActionIcon>
           <StyledActionText>{action.name}</StyledActionText>
         </StyledAction>

stories/features/rewards/modal.tsx

@@ -394,6 +394,22 @@ storiesOf('Feature Components/Rewards/Modal', module)
       />
     )
   })
+  .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[] = [
       {
@@ -452,10 +468,10 @@ storiesOf('Feature Components/Rewards/Modal', module)
     const rows: PendingDetailRow[] = [
       {
         profile: {
-          name: 'Bart Baker',
-          verified: false,
+          name: 'Jonathon Doe',
+          verified: true,
           provider: 'youtube',
-          src: bart
+          src: favicon
         },
         url: 'https://brave.com',
         type: 'recurring',

stories/features/rewards/settings/pageWallet.tsx

@@ -252,7 +252,8 @@ class PageWallet extends React.Component<{}, State> {
             {
               name: 'Add funds',
               action: doNothing,
-              icon: <WalletAddIcon />
+              icon: <WalletAddIcon />,
+              testId: 'panel-add-funds'
             },
             {
               name: 'Withdraw Funds',

stories/features/rewards/table.tsx

@@ -211,10 +211,10 @@ storiesOf('Feature Components/Rewards/Table', module)
     const rows: PendingDetailRow[] = [
       {
         profile: {
-          name: 'Bart Baker',
-          verified: false,
+          name: 'Jonathon Doe',
+          verified: true,
           provider: 'youtube',
-          src: bart
+          src: favicon
         },
         url: 'https://brave.com',
         type: 'recurring',