further wallet provider oauth fixes and additional styling fixes

brave-intl · Jul 3, 2024 · 09549f6 · 09549f6
1 parent 688c0bf
commit 09549f6
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 65 deletions.
diff --git a/app/controllers/api/nextv1/oauth2_controller.rb b/app/controllers/api/nextv1/oauth2_controller.rb
@@ -9,11 +9,7 @@ class Api::Nextv1::Oauth2Controller < Api::Nextv1::BaseController
   include Oauth2::Errors
   before_action :set_controller_state
   before_action :set_request_state, only: [:create]
-  before_action :set_access_token_response, only: [:callback]
 
-  # This is just a convenience wrapper, create is not particularly explicit.
-  # All a code auth request does is perform a redirect but for the sake
-  # of implementation I'm just keeping the nomenclature the same for now.
   def create
     render json: {authorization_url: authorization_url}
   end
@@ -70,15 +66,6 @@ def state_verified?
     end
   end
 
-  def set_access_token_response
-    # This will be correct in most oauth2 cases, but
-    # I'm keeping open the opportunity to easily override this
-    # when needed.
-    if @access_token_response.nil?
-      @access_token_response = AccessTokenResponse
-    end
-  end
-
   def generic_error
     Oauth2::Errors::ConnectionError.new(I18n.t("shared.error"))
   end

diff --git a/nextjs/package.json b/nextjs/package.json
@@ -18,7 +18,7 @@
     "typecheck": "tsc --noEmit --incremental false"
   },
   "dependencies": {
-    "@brave/leo": "github:brave/leo#adc1619dedc076b3f810be5b91a041f8d45f4476",
+    "@brave/leo": "github:brave/leo#84b3117d0fd10eb45d94e816fba87909124e7bb1",
     "@fontsource/poppins": "5.0.12",
     "@fontsource/inter": "5.0.17",
     "@fontsource/dm-mono": "5.0.19",

diff --git a/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx b/nextjs/src/app/[locale]/publishers/home/channels/ChannelCard.tsx
@@ -12,7 +12,7 @@ import Card from '@/components/Card';
 
 import ChannelCryptoEditor from './ChannelCryptoEditor';
 
-export default function ChannelCard({ channel, publisherPayable }) {
+export default function ChannelCard({ channel, publisherPayable, onChannelDelete }) {
   const t = useTranslations();
   // TODO: come up with some default name
   const defaultName = '';
@@ -21,6 +21,8 @@ export default function ChannelCard({ channel, publisherPayable }) {
     const response = await apiRequest(`channels/${channel.id}`, 'DELETE');
     if (response.errors) {
       // TODO show error state here
+    } else {
+      onChannelDelete(channel.id);
     }
   }
 
@@ -92,7 +94,7 @@ export default function ChannelCard({ channel, publisherPayable }) {
       </section>
       <Hr />
       <section className='pt-2 text-right '>
-        <Button className='color-secondary mr-0.5' kind='plain' onClick={removeChannel}>
+        <Button className='color-secondary mr-0.5' kind='plain-faint' onClick={removeChannel}>
           {t('shared.remove')}
         </Button>
         <Button kind='outline'>{t('shared.customize')}</Button>

diff --git a/nextjs/src/app/[locale]/publishers/home/custodianServices/CustodianServiceWidget.jsx b/nextjs/src/app/[locale]/publishers/home/custodianServices/CustodianServiceWidget.jsx
@@ -4,7 +4,7 @@ import Button from '@brave/leo/react/button';
 import Dropdown from '@brave/leo/react/dropdown';
 import Icon from '@brave/leo/react/icon';
 import Link from '@brave/leo/react/link';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
 import { apiRequest } from '@/lib/api';
@@ -13,13 +13,17 @@ import countryList from './countryList.json';
 
 export default function CustodianServiceWidget({ walletData }) {
   const t = useTranslations();
+  const locale = useLocale();
   const supportedRegions = walletData.allowed_regions;
   const [selectedCountry, setSelectedCountry] = useState(undefined);
   const [unsupportedCountry, setUnsupportedCountry] = useState(false);
   const [upholdConnection, setUpholdConnection] = useState(walletData.uphold_connection);
   const [geminiConnection, setGeminiConnection] = useState(walletData.gemini_connection);
   const [bitflyerConnection, setBitflyerConnection] = useState(walletData.bitflyer_connection);
 
+  const supportUrl = locale !== 'ja' ? 'https://support.brave.com/hc/en-us/articles/9884338155149' : 'https://support.brave.com/hc/en-us/articles/23311539795597';
+
+
   const providerUpdaters = {
     gemini: setGeminiConnection,
     uphold: setUpholdConnection,
@@ -111,35 +115,37 @@ export default function CustodianServiceWidget({ walletData }) {
     return (
       <section>
         <p className='pb-3'>{t('Home.account.connect_prompt')}</p>
-        <Dropdown
-          size='normal'
-          value={selectedCountry}
-          className='w-full'
-          placeholder={t('Home.account.country_placeholder')}
-          onChange={handleCountryChange}
-        >
-          <div className='small-semibold' slot="label">{t('Home.account.country_label')}</div>
-          {selectedCountry && (
-            <div slot="left-icon">
-              <Icon name={`country-${countryList[selectedCountry].toLowerCase()}`} />
-            </div>
-          )}
-          {Object.keys(countryList).map(function (countryName) {
-            return (
-              <leo-option
-                className='py-0'
-                key={countryList[countryName]}
-                value={countryName}
-              >
-                <Icon
-                  className='inline-block'
-                  name={`country-${countryList[countryName].toLowerCase()}`}
-                />
-                <div className='px-1 inline-block align-top'>{countryName}</div>
-              </leo-option>
-            );
-          })}
-        </Dropdown>
+        {locale !== 'ja' && (
+          <Dropdown
+            size='normal'
+            value={selectedCountry}
+            className='w-full'
+            placeholder={t('Home.account.country_placeholder')}
+            onChange={handleCountryChange}
+          >
+            <div className='small-semibold' slot="label">{t('Home.account.country_label')}</div>
+            {selectedCountry && (
+              <div slot="left-icon">
+                <Icon name={`country-${countryList[selectedCountry].toLowerCase()}`} />
+              </div>
+            )}
+            {Object.keys(countryList).map(function (countryName) {
+              return (
+                <leo-option
+                  className='py-0'
+                  key={countryList[countryName]}
+                  value={countryName}
+                >
+                  <Icon
+                    className='inline-block'
+                    name={`country-${countryList[countryName].toLowerCase()}`}
+                  />
+                  <div className='px-1 inline-block align-top'>{countryName}</div>
+                </leo-option>
+              );
+            })}
+          </Dropdown>
+        )}
         {selectedCountry && (
           <div className='pt-3'>
             <p className='small-semibold mb-0.5'>
@@ -169,10 +175,20 @@ export default function CustodianServiceWidget({ walletData }) {
             )}
           </div>
         )}
+        {locale === 'ja' && (
+          <Button
+            onClick={() => redirectToAuthUrl('bitflyer')}
+            kind='outline'
+          >
+            <Icon name="bitflyer-color" slot="icon-before" />
+            {t('Home.account.bitflyer_connect')}
+            <Icon name="launch" slot="icon-after" />
+          </Button>
+        )}
         <p className='small-regular color-tertiary pt-3'>
           {t('Home.account.country_disclaimer')}
           <a
-            href='https://support.brave.com/hc/en-us/articles/9884338155149'
+            href={supportUrl}
             rel='noopener noreferrer'
             target='_blank'
             className='underline'

diff --git a/nextjs/src/app/[locale]/publishers/home/page.tsx b/nextjs/src/app/[locale]/publishers/home/page.tsx
@@ -67,6 +67,11 @@ export default function HomePage() {
     setIsLoading(false);
   }
 
+  function onChannelDelete(channelId) {
+    const newChannels = channels.filter( c => c.id !== channelId);
+    setChannels(newChannels);
+  }
+
   if (isLoading) {
     return <ProgressRing />;
   } else {
@@ -105,6 +110,7 @@ export default function HomePage() {
                           key={channel.id}
                           channel={channel}
                           publisherPayable={publisherPayable}
+                          onChannelDelete={onChannelDelete}
                         />
                       );
                     })}

diff --git a/nextjs/src/app/[locale]/publishers/layout.jsx b/nextjs/src/app/[locale]/publishers/layout.jsx
@@ -33,10 +33,10 @@ export default function NavigationLayout({ children }) {
     setRoute(window.location.pathname);
   }, []);
 
-  function updateTheme(theme) {
-    setTheme(theme);
-    document.body.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
+  function updateTheme(e) {
+    setTheme(e.value);
+    document.body.setAttribute('data-theme', e.value);
+    localStorage.setItem('theme', e.value);
   }
 
   return (
@@ -66,21 +66,20 @@ export default function NavigationLayout({ children }) {
               {t('NavDropdown.crypto_contributions_text')}{' '}
               <Link href=''>{t('shared.learn_more')}</Link>
               {' - '}
-              <Button
-                kind='plain'
+              <Link
                 className='underline font-normal'
                 onClick={() => {
                   setDismissCrypto(true);
                 }}
               >
                 {t('shared.dismiss')}
-              </Button>
+              </Link>
             </p>
           </div>
           <NavigationActions slot='actions'>
-            <div className={styles['theme-switcher']}>
+{/*            <div className={styles['theme-switcher']}>
               <span className={styles.theme}>Theme</span>
-              <SegmentedControl size='tiny' value={theme} onChange={(e)=>{updateTheme(e.detail.value)}}>
+              <SegmentedControl size='tiny' value={theme} onChange={updateTheme}>
                 <ControlItem value='light'>
                   <Icon name='theme-light' />
                 </ControlItem>
@@ -91,16 +90,16 @@ export default function NavigationLayout({ children }) {
                   <Icon name='theme-system' />
                 </ControlItem>
               </SegmentedControl>
-            </div>
+            </div>*/}
             <Hr />
             <div className='action-items'>
-              <NavigationItem
+{/*              <NavigationItem
                 outsideList={true}
                 icon='help-outline'
                 href='/faqs'
               >
                 {t('NavDropdown.faqs')}
-              </NavigationItem>
+              </NavigationItem>*/}
               <NavigationItem
                 outsideList={true}
                 icon='message-bubble-ask'

diff --git a/nextjs/src/lib/api.ts b/nextjs/src/lib/api.ts
@@ -16,6 +16,7 @@ export async function apiRequest(
     const response = await axios({ method, url, data });
     return response.data;
   } catch (err) {
+    console.log(err)
     // all response codes that aren't 200s or 300s get sent here
     // Imperatively navigate to Unauthorized page on 403
     if (err.response.status === 403 || err.response.status === 422) {

diff --git a/nextjs/src/styles/ChannelCard.module.css b/nextjs/src/styles/ChannelCard.module.css
@@ -7,9 +7,8 @@
   }
 
   .crypto-wallet-dropdown {
-    border: none;
+    border: 1px solid rgba(199 199 204 100%);
     padding-left: 30px;
-    background-color: #F0F1F4;
     border-radius: 8px;
     background-repeat: no-repeat;
     background-position: bottom 10px left 10px;
@@ -59,7 +58,6 @@
   }
 }
 
-
 .privacy-header {
   font-family: var(--font-poppins);
   font-size: 28px;

diff --git a/nextjs/src/styles/Layout.module.css b/nextjs/src/styles/Layout.module.css
@@ -2,9 +2,9 @@
 	background-image: url('../../public/images/crypto_contributions_background.svg');
 	background-repeat: no-repeat;
 	background-size: cover;
-	width: 235px;
+	width: 234px;
 	margin: 8px;
-	padding: 16px;
+	padding: 14px;
 	border: 1px solid rgb(255 209 207);
 	border-radius: 8px;
 }
@@ -24,4 +24,4 @@
   padding-left: var(--leo-spacing-m);
   color: var(--leo-color-text-secondary);
   font: var(--leo-font-components-navbutton);
-}
+}