Customise Cere Wallet texts (#182)

cere-io · Mar 18, 2024 · 72fe136 · 72fe136
1 parent 9a3b1a7
commit 72fe136
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 71 deletions.
diff --git a/playground/Wallet.tsx b/playground/Wallet.tsx
@@ -116,6 +116,23 @@ export const Wallet = () => {
     wallet.setContext({
       whiteLabel: {
         skipLoginIntro: true,
+        connectScreenSettings: {
+          connectScreenMainTitle: 'Davinci Wallet',
+          hideIconInHeader: true,
+          connectScreenMainText:
+            'Sign-up to invest/sell and trade artist collectibles. Net proceeds will go directly to the artists.',
+          poweredBySection: true,
+        },
+        verifyScreenSettings: {
+          verifyScreenMainTitle: 'Verify your Email',
+          hideIconInHeader: true,
+          verifyScreenMainText: 'Access Davinci using the code sent to your email',
+          poweredBySection: true,
+        },
+        permissionsScreenSettings: {
+          hideIconInHeader: true,
+          poweredBySection: true,
+        },
       },
       banner: {
         thumbnailUrl: nftImageUrl,

diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx
@@ -21,7 +21,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { AuthApiService } from '~/api/auth-api.service';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { getTokenWithFacebook, getTokenWithGoogle } from './auth.service';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { SUPPORTED_SOCIAL_LOGINS } from '~/constants';
 import { useAppContextStore } from '~/hooks';
 import { AppContextBanner } from '../AppContextBanner';
@@ -55,6 +55,7 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
   const store = useAppContextStore();
 
   const skipLoginIntro = Boolean(store.whiteLabel?.skipLoginIntro);
+  const connectScreenSettings = store?.whiteLabel?.connectScreenSettings;
 
   useEffect(() => {
     const isSignUp = location.pathname.endsWith('signup');
@@ -75,6 +76,46 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
     },
   });
 
+  const connectScreenMainTitle = useMemo(() => {
+    if (isGame) {
+      return 'Sign up';
+    }
+    return connectScreenSettings?.connectScreenMainTitle || 'Cere wallet';
+  }, [isGame, connectScreenSettings?.connectScreenMainTitle]);
+
+  const cereWalletIcon = useMemo(() => {
+    if (isGame) {
+      return <CereWhiteLogo />;
+    }
+    if (connectScreenSettings?.hideIconInHeader) {
+      return;
+    }
+    return <CereIcon />;
+  }, [isGame, connectScreenSettings?.hideIconInHeader]);
+
+  const connectScreenMainText = useMemo(() => {
+    if (isGame) {
+      return "Creating an account is easy! Fill in your email, confirm & claim your spot on the leaderboard! As a sign-up bonus you'll receive 10 credits to continue playing for free";
+    }
+    return (
+      connectScreenSettings?.connectScreenMainText || 'Send and receive any currency or simply top up with your card.'
+    );
+  }, [isGame, connectScreenSettings?.connectScreenMainText]);
+
+  const poweredBySection = useMemo(() => {
+    if (!connectScreenSettings?.poweredBySection) {
+      return;
+    }
+    return (
+      <Stack spacing={2} marginTop={8} direction="row" alignItems="center" justifyContent="center">
+        <Typography sx={{ marginRight: '8px' }} variant="body2" color="text.secondary">
+          Powered by Cere Wallet
+        </Typography>
+        <CereIcon />
+      </Stack>
+    );
+  }, [connectScreenSettings?.poweredBySection]);
+
   const onSubmit: SubmitHandler<any> = async () => {
     const value = getFormValues('email');
 
@@ -122,14 +163,12 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
     >
       <Stack direction="row" spacing={1} alignItems="center">
         <Typography variant="h2" flex={1} color={isGame ? '#FFF' : 'text.primary'}>
-          {isGame ? 'Sign up' : 'CERE wallet'}
+          {connectScreenMainTitle}
         </Typography>
-        {isGame ? <CereWhiteLogo /> : <CereIcon />}
+        {cereWalletIcon}
       </Stack>
       <Typography variant="body2" color={isGame ? 'primary.light' : 'text.secondary'}>
-        {isGame
-          ? "Creating an account is easy! Fill in your email, confirm & claim your spot on the leaderboard! As a sign-up bonus you'll receive 10 credits to continue playing for free"
-          : 'Send and receive any currency or simply top up with your card.'}
+        {connectScreenMainText}
       </Typography>
 
       <Banner hideBackButton variant="banner" placement="content" />
@@ -186,6 +225,7 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
           </Stack>
         </>
       )}
+      {poweredBySection}
     </Stack>
   );
 };
diff --git a/src/components/Login/OtpPage.tsx b/src/components/Login/OtpPage.tsx
@@ -9,7 +9,7 @@ import {
   Alert,
   useTheme,
 } from '@cere-wallet/ui';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import * as yup from 'yup';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -18,6 +18,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { reportError } from '~/reporting';
 import { AuthApiService } from '~/api/auth-api.service';
 import { CereWhiteLogo } from '~/components';
+import { useAppContextStore } from '~/hooks';
 
 const TIME_LEFT = 60; // seconds before next otp request
 
@@ -37,6 +38,9 @@ export const OtpPage = ({ email, onRequestLogin }: OtpProps) => {
   const navigate = useNavigate();
   const [timeLeft, setTimeLeft] = useState<number>(TIME_LEFT);
   const { isGame } = useTheme();
+  const store = useAppContextStore();
+
+  const verifyScreenSettings = store?.whiteLabel?.verifyScreenSettings;
 
   const {
     register,
@@ -91,72 +95,110 @@ export const OtpPage = ({ email, onRequestLogin }: OtpProps) => {
     }
   }, [email, location, navigate]);
 
-  return (
-    <Stack
-      direction="column"
-      spacing={2}
-      alignItems="stretch"
-      component="form"
-      noValidate
-      autoComplete="off"
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <Stack direction="row" alignItems="center">
-        <Typography variant="h2" flex={1} color={isGame ? 'primary.light' : 'text.secondary'}>
-          Verify email
+  const verifyScreenMainTitle = useMemo(() => {
+    return verifyScreenSettings?.verifyScreenMainTitle || 'Verify email';
+  }, [verifyScreenSettings?.verifyScreenMainTitle]);
+
+  const cereWalletIcon = useMemo(() => {
+    if (isGame) {
+      return <CereWhiteLogo />;
+    }
+    if (verifyScreenSettings?.hideIconInHeader) {
+      return;
+    }
+    return <CereIcon />;
+  }, [isGame, verifyScreenSettings?.hideIconInHeader]);
+
+  const verifyScreenMainText = useMemo(() => {
+    if (isGame) {
+      return 'Access your account using the code sent to your email';
+    }
+    return verifyScreenSettings?.verifyScreenMainText || 'Access CERE using code sent to your email';
+  }, [isGame, verifyScreenSettings?.verifyScreenMainText]);
+
+  const poweredBySection = useMemo(() => {
+    if (!verifyScreenSettings?.poweredBySection) {
+      return;
+    }
+    return (
+      <Stack direction="row" alignItems="center" justifyContent="center" marginTop={4}>
+        <Typography sx={{ marginRight: '8px' }} variant="body2" color="text.secondary">
+          Powered by Cere Wallet
         </Typography>
-        {isGame ? <CereWhiteLogo /> : <CereIcon />}
+        <CereIcon />
       </Stack>
-      <Typography variant="body2" color={isGame ? 'primary.light' : 'text.secondary'}>
-        {isGame ? 'Access your account using the code sent to your email' : 'Access CERE using code sent to your email'}
-      </Typography>
-      <TextField
-        value={email}
-        variant="outlined"
-        disabled={true}
-        sx={{
-          '& .MuiInputBase-input.Mui-disabled': {
-            WebkitTextFillColor: isGame ? 'rgba(245, 250, 252, 1)' : '',
-          },
-        }}
-      />
-      <Typography variant="body2" color={isGame ? '#FFF' : 'text.secondary'} align={isGame ? 'center' : 'left'}>
-        Verification code
-      </Typography>
-      <OtpInput
-        {...register('code')}
-        onChange={(val) => setFormValue('code', val)}
-        errorMessage={errors?.code?.message}
-      />
-
-      {errors.root && (
-        <Alert variant="outlined" severity="warning" sx={{ marginY: 1 }}>
-          {errors.root?.message}
-        </Alert>
-      )}
-
-      <LoadingButton loading={isSubmitting} variant="contained" size="large" type="submit">
-        {errors.root ? 'Retry' : 'Verify'}
-      </LoadingButton>
-      {timeLeft ? (
-        <Typography variant="body1" align="center" color={isGame ? 'primary.light' : 'text.secondary'}>
-          Resend verification code in <strong>{timeLeft}</strong> seconds
+    );
+  }, [verifyScreenSettings?.poweredBySection]);
+
+  return (
+    <Stack>
+      <Stack
+        direction="column"
+        spacing={2}
+        alignItems="stretch"
+        component="form"
+        noValidate
+        autoComplete="off"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Stack direction="row" alignItems="center">
+          <Typography variant="h2" flex={1} color={isGame ? 'primary.light' : 'text.secondary'}>
+            {verifyScreenMainTitle}
+          </Typography>
+          {cereWalletIcon}
+        </Stack>
+        <Typography variant="body2" color={isGame ? 'primary.light' : 'text.secondary'}>
+          {verifyScreenMainText}
         </Typography>
-      ) : (
-        <Typography variant="body1" align="center" color={isGame ? 'primary.light' : 'text.secondary'}>
-          Did not receive a code?{' '}
-          <Button
-            variant="text"
-            onClick={handleResend}
-            sx={{
-              fontSize: isGame ? '16px' : '14px',
-              color: isGame ? 'rgba(243, 39, 88, 1)' : 'primary.main',
-            }}
-          >
-            Resend code
-          </Button>
+        <TextField
+          value={email}
+          variant="outlined"
+          disabled={true}
+          sx={{
+            '& .MuiInputBase-input.Mui-disabled': {
+              WebkitTextFillColor: isGame ? 'rgba(245, 250, 252, 1)' : '',
+            },
+          }}
+        />
+        <Typography variant="body2" color={isGame ? '#FFF' : 'text.secondary'} align={isGame ? 'center' : 'left'}>
+          Verification code
         </Typography>
-      )}
+        <OtpInput
+          {...register('code')}
+          onChange={(val) => setFormValue('code', val)}
+          errorMessage={errors?.code?.message}
+        />
+
+        {errors.root && (
+          <Alert variant="outlined" severity="warning" sx={{ marginY: 1 }}>
+            {errors.root?.message}
+          </Alert>
+        )}
+
+        <LoadingButton loading={isSubmitting} variant="contained" size="large" type="submit">
+          {errors.root ? 'Retry' : 'Verify'}
+        </LoadingButton>
+        {timeLeft ? (
+          <Typography variant="body1" align="center" color={isGame ? 'primary.light' : 'text.secondary'}>
+            Resend verification code in <strong>{timeLeft}</strong> seconds
+          </Typography>
+        ) : (
+          <Typography variant="body1" align="center" color={isGame ? 'primary.light' : 'text.secondary'}>
+            Did not receive a code?{' '}
+            <Button
+              variant="text"
+              onClick={handleResend}
+              sx={{
+                fontSize: isGame ? '16px' : '14px',
+                color: isGame ? 'rgba(243, 39, 88, 1)' : 'primary.main',
+              }}
+            >
+              Resend code
+            </Button>
+          </Typography>
+        )}
+      </Stack>
+      {poweredBySection}
     </Stack>
   );
 };
diff --git a/src/routes/Authorize/AuthorizePermissions.tsx b/src/routes/Authorize/AuthorizePermissions.tsx
@@ -1,17 +1,43 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import { ArrowBackIosIcon, Box, LoadingButton, CereIcon, Stack, Typography, useIsMobile } from '@cere-wallet/ui';
 
 import { AuthorizePopupStore } from '~/stores';
 import { Permissions } from '~/components';
 import { reportError } from '~/reporting';
+import { useAppContextStore } from '~/hooks';
 
 const AuthorizePermissions = () => {
   const store = useOutletContext<AuthorizePopupStore>();
+  const appStore = useAppContextStore();
   const navigate = useNavigate();
   const isMobile = useIsMobile();
   const [isLoading, setLoading] = useState(false);
+
+  const permissionsScreenSettings = appStore.whiteLabel?.permissionsScreenSettings;
+
+  const cereWalletIcon = useMemo(() => {
+    if (permissionsScreenSettings?.hideIconInHeader) {
+      return;
+    }
+    return <CereIcon />;
+  }, [permissionsScreenSettings?.hideIconInHeader]);
+
+  const poweredBySection = useMemo(() => {
+    if (!permissionsScreenSettings?.poweredBySection) {
+      return;
+    }
+    return (
+      <Stack spacing={2} marginTop={8} direction="row" alignItems="center" justifyContent="center">
+        <Typography sx={{ marginRight: '8px' }} variant="body2" color="text.secondary">
+          Powered by Cere Wallet
+        </Typography>
+        <CereIcon />
+      </Stack>
+    );
+  }, [permissionsScreenSettings?.poweredBySection]);
+
   const handleContinue = useCallback(async () => {
     try {
       setLoading(true);
@@ -31,7 +57,7 @@ const AuthorizePermissions = () => {
           <Typography variant="h2" flex={1}>
             Permissions
           </Typography>
-          <CereIcon />
+          {cereWalletIcon}
         </Stack>
 
         <Typography variant="body2" color={'text.secondary'}>
@@ -54,6 +80,7 @@ const AuthorizePermissions = () => {
           Continue
         </LoadingButton>
       </Stack>
+      {poweredBySection}
     </Stack>
   );
 };