Merge pull request #1 from bnb-chain/feat-ui-modification

feat:ui fix

.env.example

@@ -40,4 +40,7 @@ NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING=
 NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING=
 
 # Redefine
-NEXT_PUBLIC_REDEFINE_API=
+NEXT_PUBLIC_REDEFINE_API=
+
+# Default chain id
+NEXT_PUBLIC_DEFAULT_CHAIN_ID=5611

README.md

@@ -46,6 +46,7 @@ Here's the list of all the required and optional variables:
 | `NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION`            | optional     | FCM vapid key on production
 | `NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING`                 | optional     | FCM `initializeApp` options on staging
 | `NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING`               | optional     | FCM vapid key on staging
+| `NEXT_DEFAULT_CHAIN_ID`                                | optional     | Default chain id to use when connecting to a wallet
 
 If you don't provide some of the optional vars, the corresponding features will be disabled in the UI.
 

src/components/common/Footer/index.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router'
 import css from './styles.module.css'
 import { AppRoutes } from '@/config/routes'
 import packageJson from '../../../../package.json'
-import AppstoreButton from '../AppStoreButton'
 import ExternalLink from '../ExternalLink'
 import MUILink from '@mui/material/Link'
 import { IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
@@ -69,17 +68,14 @@ const Footer = (): ReactElement | null => {
             </li>
           </>
         ) : (
-          <li>{'This is an unofficial distribution of Safe{Wallet}'}</li>
+          <li>{'This is an unofficial distribution of BNB Safe{Wallet}'}</li>
         )}
 
         <li>
           <ExternalLink href={`${packageJson.homepage}/releases/tag/v${packageJson.version}`}>
             v{packageJson.version}
           </ExternalLink>
         </li>
-        <li>
-          <AppstoreButton placement="footer" />
-        </li>
       </ul>
     </footer>
   )

src/components/common/MetaTags/index.tsx

@@ -4,7 +4,7 @@ import { lightPalette, darkPalette } from '@safe-global/safe-react-components'
 
 const descriptionText =
   'Safe (prev. Gnosis Safe) is the most trusted platform to manage digital assets on Ethereum and multiple EVMs. Over $40B secured.'
-const titleText = 'Safe{Wallet}'
+const titleText = 'BNB Safe{Wallet}'
 
 const MetaTags = ({ prefetchUrl }: { prefetchUrl: string }) => (
   <>

src/components/common/PairingDetails/PairingDeprecationWarning.tsx

@@ -3,8 +3,8 @@ import { Alert } from '@mui/material'
 const PairingDeprecationWarning = (): React.ReactElement => {
   return (
     <Alert severity="warning" sx={{ mb: 4 }}>
-      The {'Safe{Wallet}'} web-mobile pairing feature will be discontinued from 15th November 2023. Please migrate to a
-      different signer wallet before this date.
+      The {'BNB Safe{Wallet}'} web-mobile pairing feature will be discontinued from 15th November 2023. Please migrate
+      to a different signer wallet before this date.
     </Alert>
   )
 }

src/components/common/PairingDetails/PairingDescription.tsx

@@ -9,7 +9,7 @@ const PairingDescription = (): ReactElement => {
   return (
     <>
       <Typography variant="caption" align="center">
-        Scan this code in the {'Safe{Wallet}'} mobile app to sign transactions with your mobile device.
+        Scan this code in the {'BNB Safe{Wallet}'} mobile app to sign transactions with your mobile device.
         <br />
         <ExternalLink href={HelpCenterArticle.MOBILE_SAFE} title="Learn more about mobile pairing.">
           Learn more about this feature.

src/components/dashboard/Relaying/index.tsx

@@ -21,7 +21,7 @@ const Relaying = () => {
   return (
     <WidgetContainer>
       <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
-        New in {'Safe{Wallet}'}
+        New in {'BNB Safe{Wallet}'}
       </Typography>
 
       <WidgetBody>

src/components/licenses/index.tsx

@@ -14,7 +14,7 @@ const SafeLicenses = () => {
       <Box mb={4}>
         <Typography mb={3}>
           This page contains a list of attribution notices for third party software that may be contained in portions of
-          the {'Safe{Wallet}'}. We thank the open source community for all of their contributions.
+          the {'BNB Safe{Wallet}'}. We thank the open source community for all of their contributions.
         </Typography>
         <Typography variant="h2" mb={2}>
           Android

src/components/privacy/index.tsx

@@ -149,8 +149,8 @@ const SafePrivacyPolicy = () => {
            released under LGPL-3.0.
         </li>
         <li>
-          &ldquo;{'Safe{Wallet}'}&rdquo; refers to a web-based graphical user interface for Safe Accounts as well as a
-          mobile application on Android and iOS.
+          &ldquo;{'BNB Safe{Wallet}'}&rdquo; refers to a web-based graphical user interface for Safe Accounts as well as
+          a mobile application on Android and iOS.
         </li>
         <li>
           &ldquo;Safe Account Transaction&rdquo; is a Transaction of a Safe Account, authorized by a user, typically via
@@ -194,10 +194,10 @@ const SafePrivacyPolicy = () => {
         BLOCKCHAIN WILL BECOME PUBLICLY AVAILABLE
       </p>
       <h3 id="4">4. How We Use Personal Data</h3>
-      <h4>4.1. When visiting our website and using {'Safe{Wallet}'}</h4>
+      <h4>4.1. When visiting our website and using {'BNB Safe{Wallet}'}</h4>
       <p>
-        When visiting our website or using {'Safe{Wallet}'}, we may collect and process personal data. The data will be
-        stored in different instances
+        When visiting our website or using {'BNB Safe{Wallet}'}, we may collect and process personal data. The data will
+        be stored in different instances
       </p>
       <ol start={1} className={css.alphaList}>
         <li>
@@ -235,7 +235,7 @@ const SafePrivacyPolicy = () => {
       <ol start={4} className={css.alphaList}>
         <li>
           When you create a Profile for an existing Safe Account for the purpose of allowing you to view and use them in
-          the {'Safe{Wallet}'}, we process your
+          the {'BNB Safe{Wallet}'}, we process your
           <ol start={1} className={css.romanList}>
             <li>public Wallet address, </li>
             <li>Safe Account balance, </li>
@@ -280,7 +280,7 @@ const SafePrivacyPolicy = () => {
       <ol start={8} className={css.alphaList}>
         <li>
           When we collect relevant&nbsp;data&nbsp;from the Blockchain to display context information in the
-          {`Safe{Wallet}`}
+          {`BNB Safe{Wallet}`}
           we process:
           <ol start={1} className={css.romanList}>
             <li>your public Wallet address, </li>
@@ -400,8 +400,8 @@ const SafePrivacyPolicy = () => {
         <li>range of managed funds</li>
       </ol>
       <p>
-        In addition, we may take a recording of you while testing {'Safe{Wallet}'} for internal and external use. The
-        basis for this collection and processing is our legitimate business interest in monitoring and improving our
+        In addition, we may take a recording of you while testing {'BNB Safe{Wallet}'} for internal and external use.
+        The basis for this collection and processing is our legitimate business interest in monitoring and improving our
         services.
       </p>
       <p>
@@ -568,7 +568,7 @@ const SafePrivacyPolicy = () => {
       </p>
       <h4>5.4. Mobile app stores</h4>
       <p>
-        {'Safe{Wallet}'} mobile apps are distributed via{' '}
+        {'BNB Safe{Wallet}'} mobile apps are distributed via{' '}
         <Link href="https://www.apple.com/app-store/" passHref legacyBehavior>
           <MUILink target="_blank" rel="noreferrer">
             Apple AppStore
@@ -586,10 +586,10 @@ const SafePrivacyPolicy = () => {
       </p>
       <h4>5.5. Fingerprint/Touch ID/ Face ID</h4>
       <p>
-        We enable the user to unlock the {'Safe{Wallet}'} mobile app via biometrics information (touch ID or face ID).
-        This is a feature of the operating system. We do not store any of this data. Instead, the API of the operating
-        system is used to validate the user input. If you have any further questions you should consult with your
-        preferred mobile device provider or manufacturer.
+        We enable the user to unlock the {'BNB Safe{Wallet}'} mobile app via biometrics information (touch ID or face
+        ID). This is a feature of the operating system. We do not store any of this data. Instead, the API of the
+        operating system is used to validate the user input. If you have any further questions you should consult with
+        your preferred mobile device provider or manufacturer.
       </p>
       <h4>5.6. Google Firebase</h4>
       <p>

src/components/safe-apps/AddCustomAppModal/index.tsx

@@ -134,7 +134,7 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
                             })}
                           />
                         }
-                        label="This Safe App is not part of Safe{Wallet} and I agree to use it at my own risk."
+                        label="This Safe App is not part of BNB Safe{Wallet} and I agree to use it at my own risk."
                         sx={{ mt: 2 }}
                       />
 

src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx

@@ -33,7 +33,7 @@ const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }
       text={
         <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
-          integrated with the {'Safe{Wallet}'} using the WalletConnect Safe App.
+          integrated with the {'BNB Safe{Wallet}'} using the WalletConnect Safe App.
         </Typography>
       }
     >

src/components/settings/DataManagement/ImportFileUpload.tsx

@@ -52,7 +52,7 @@ export const ImportFileUpload = ({
 
   return (
     <>
-      <Typography>Import {'Safe{Wallet}'} data by uploading a file in the area below.</Typography>
+      <Typography>Import {'BNB Safe{Wallet}'} data by uploading a file in the area below.</Typography>
 
       <FileUpload
         fileType={FileTypes.JSON}
@@ -74,7 +74,7 @@ export const ImportFileUpload = ({
             mr: 0.5,
           }}
         />
-        Only JSON files exported from the {'Safe{Wallet}'} can be imported.
+        Only JSON files exported from the {'BNB Safe{Wallet}'} can be imported.
       </Typography>
     </>
   )

src/components/settings/DataManagement/index.tsx

@@ -9,7 +9,6 @@ import { addedSafesSlice, selectAllAddedSafes } from '@/store/addedSafesSlice'
 import { safeAppsSlice, selectSafeApps } from '@/store/safeAppsSlice'
 import { selectSettings, settingsSlice } from '@/store/settingsSlice'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import ExternalLink from '@/components/common/ExternalLink'
 import { ImportFileUpload } from '@/components/settings/DataManagement/ImportFileUpload'
 import { ImportDialog } from '@/components/settings/DataManagement/ImportDialog'
 import { SAFE_EXPORT_VERSION } from '@/components/settings/DataManagement/useGlobalImportFileParser'
@@ -109,8 +108,6 @@ const DataManagement = () => {
                   mr: 0.5,
                 }}
               />
-              You can also export your data from the{' '}
-              <ExternalLink href="https://gnosis-safe.io/app/export">old app</ExternalLink>
             </Typography>
           </Grid>
         </Grid>

src/components/settings/DataManagement/useGlobalImportFileParser.ts

@@ -16,7 +16,7 @@ export const enum SAFE_EXPORT_VERSION {
 }
 
 export enum ImportErrors {
-  INVALID_VERSION = 'The file is not a Safe{Wallet} export.',
+  INVALID_VERSION = 'The file is not a BNB Safe{Wallet} export.',
   INVALID_JSON_FORMAT = 'The JSON format is invalid.',
   NO_IMPORT_DATA_FOUND = 'This file contains no importable data.',
 }

src/components/settings/FallbackHandler/__tests__/index.test.tsx

@@ -135,7 +135,7 @@ describe('FallbackHandler', () => {
       await waitFor(() => {
         expect(
           fbHandler.queryByText(
-            new RegExp('The Safe{Wallet} may not work correctly as no fallback handler is currently set.'),
+            new RegExp('The BNB Safe{Wallet} may not work correctly as no fallback handler is currently set.'),
           ),
         ).toBeInTheDocument()
         expect(fbHandler.queryByText('Transaction Builder')).toBeInTheDocument()
@@ -171,7 +171,7 @@ describe('FallbackHandler', () => {
       await waitFor(() => {
         expect(
           fbHandler.queryByText(
-            new RegExp('The Safe{Wallet} may not work correctly as no fallback handler is currently set.'),
+            new RegExp('The BNB Safe{Wallet} may not work correctly as no fallback handler is currently set.'),
           ),
         ).toBeInTheDocument()
         expect(fbHandler.queryByText('Transaction Builder')).not.toBeInTheDocument()

src/components/settings/FallbackHandler/index.tsx

@@ -35,7 +35,7 @@ export const FallbackHandler = (): ReactElement | null => {
 
   const tooltip = !safe.fallbackHandler ? (
     <>
-      The {'Safe{Wallet}'} may not work correctly as no fallback handler is currently set.
+      The {'BNB Safe{Wallet}'} may not work correctly as no fallback handler is currently set.
       {txBuilder && (
         <>
           {' '}

src/components/settings/SafeAppsSigningMethod/index.tsx

@@ -26,7 +26,7 @@ export const SafeAppsSigningMethod = () => {
 
         <Grid item xs>
           <Typography mb={2}>
-            This setting determines how the {'Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
+            This setting determines how the {'BNB Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
             off-chain signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.
           </Typography>

src/components/sidebar/Sidebar/index.tsx

@@ -47,7 +47,6 @@ const Sidebar = (): ReactElement => {
 
         <Divider flexItem />
 
-        {/* What's new + Need help? */}
         <SidebarFooter />
       </div>
 

src/components/sidebar/SidebarFooter/index.tsx

@@ -12,10 +12,9 @@ import { useAppDispatch, useAppSelector } from '@/store'
 import { selectCookies, CookieType } from '@/store/cookiesSlice'
 import { openCookieBanner } from '@/store/popupSlice'
 import BeamerIcon from '@/public/images/sidebar/whats-new.svg'
-import HelpCenterIcon from '@/public/images/sidebar/help-center.svg'
 import { ListItem } from '@mui/material'
 import DebugToggle from '../DebugToggle'
-import { HELP_CENTER_URL, IS_PRODUCTION } from '@/config/constants'
+import { IS_PRODUCTION } from '@/config/constants'
 import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS } from '@/services/analytics/events/overview'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -60,16 +59,7 @@ const SidebarFooter = (): ReactElement => {
       </Track>
 
       <Track {...OVERVIEW_EVENTS.HELP_CENTER}>
-        <ListItem disablePadding>
-          <a target="_blank" rel="noopener noreferrer" href={HELP_CENTER_URL} style={{ width: '100%' }}>
-            <SidebarListItemButton>
-              <SidebarListItemIcon color="primary">
-                <HelpCenterIcon />
-              </SidebarListItemIcon>
-              <SidebarListItemText bold>Need help?</SidebarListItemText>
-            </SidebarListItemButton>
-          </a>
-        </ListItem>
+        <ListItem disablePadding></ListItem>
       </Track>
     </SidebarList>
   )

src/components/terms/index.tsx

@@ -111,10 +111,10 @@ const SafeTerms = () => {
         <li>&ldquo;Safe App&rdquo;</li>
       </ol>
       <p>
-        You may access Safe Accounts using the {'Safe{Wallet}'} web app, mobile app for iOS and android, or the browser
-        extension&nbsp;(each a &ldquo;Safe App&rdquo;). The Safe App may be used to manage your personal digital assets
-        on Ethereum and other common EVM chains when you connect a Safe Account with third-party&nbsp;services (as
-        defined below). The Safe App provides certain features that may be amended from time to time.{' '}
+        You may access Safe Accounts using the {'BNB Safe{Wallet}'} web app, mobile app for iOS and android, or the
+        browser extension&nbsp;(each a &ldquo;Safe App&rdquo;). The Safe App may be used to manage your personal digital
+        assets on Ethereum and other common EVM chains when you connect a Safe Account with third-party&nbsp;services
+        (as defined below). The Safe App provides certain features that may be amended from time to time.{' '}
       </p>
       <ol start={3}>
         <li>&ldquo;Third-Party&nbsp;Safe Apps&rdquo;</li>

src/components/welcome/NewSafe.tsx

@@ -49,7 +49,7 @@ const NewSafe = () => {
             <Accordion className={css.accordion} onClick={toggleSafeList} expanded={expanded} defaultExpanded={true}>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                 <Typography variant="h4" display="inline" fontWeight={700}>
-                  My Safe Accounts
+                  My BNB Safe Accounts
                 </Typography>
               </AccordionSummary>
 
@@ -101,7 +101,7 @@ const NewSafe = () => {
               <Paper className={css.createAddCard}>
                 <SvgIcon component={NewSafeIcon} inheritViewBox sx={{ width: '42px', height: '42px' }} />
                 <Typography variant="h3" fontWeight={700} mb={1} mt={3}>
-                  Create Safe Account
+                  Create BNB Safe Account
                 </Typography>
 
                 <Typography variant="body2" mb={3}>
@@ -133,7 +133,7 @@ const NewSafe = () => {
                 </Typography>
 
                 <Typography variant="body2" mb={3}>
-                  Already have a Safe Account? Add it via its address.
+                  Already have a BNB Safe Account? Add it via its address.
                 </Typography>
 
                 <span style={{ flex: 1 }} />

src/config/constants.ts

@@ -98,3 +98,6 @@ export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'tr
 export const REDEFINE_SIMULATION_URL = 'https://dashboard.redefine.net/reports/'
 export const REDEFINE_API = process.env.NEXT_PUBLIC_REDEFINE_API
 export const REDEFINE_ARTICLE = 'https://safe.mirror.xyz/rInLWZwD_sf7enjoFerj6FIzCYmVMGrrV8Nhg4THdwI'
+
+// Default chain id
+export const DEFAULT_CHAIN_ID = process.env.NEXT_PUBLIC_DEFAULT_CHAIN_ID || chains.eth

src/hooks/useChainId.ts

@@ -1,6 +1,6 @@
 import { useParams } from 'next/navigation'
 import { parse, type ParsedUrlQuery } from 'querystring'
-import { IS_PRODUCTION } from '@/config/constants'
+import { DEFAULT_CHAIN_ID } from '@/config/constants'
 import chains from '@/config/chains'
 import { useAppSelector } from '@/store'
 import { selectSession } from '@/store/sessionSlice'
@@ -9,7 +9,7 @@ import { prefixedAddressRe } from '@/utils/url'
 import useWallet from './wallets/useWallet'
 import useChains from './useChains'
 
-const defaultChainId = IS_PRODUCTION ? chains.eth : chains.gor
+const defaultChainId = DEFAULT_CHAIN_ID
 
 // Use the location object directly because Next.js's router.query is available only on mount
 const getLocationQuery = (): ParsedUrlQuery => {

src/pages/home.tsx

@@ -7,7 +7,7 @@ const Home: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Dashboard'}</title>
+        <title>{'BNB Safe{Wallet} – Dashboard'}</title>
       </Head>
 
       <main>

src/pages/imprint.tsx

@@ -7,7 +7,7 @@ const Imprint: NextPage = () => {
   return (
     <>
       <Head>
-        <title>{'Safe{Wallet} – Imprint'}</title>
+        <title>{'BNB Safe{Wallet} – Imprint'}</title>
       </Head>
 
       <main>{IS_OFFICIAL_HOST && <SafeImprint />}</main>