feature: OTP email configuration (#209)

.env.dev

@@ -43,3 +43,4 @@ REACT_APP_RAMP_API_KEY=e5vj99sfvuxcyt99y6u9bahbcxex4feo4y6eaqjx
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.prod

@@ -42,4 +42,5 @@ REACT_APP_SENTRY_DNS=https://[email protected]
 
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
-REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.prod-legacy

@@ -39,3 +39,8 @@ REACT_APP_GMT_ID=GTM-WQ33L7GG
 
 # Reporting
 REACT_APP_SENTRY_DNS=https://[email protected]/4505266227052544
+
+# Feature flags
+REACT_APP_TRANSFER_ASSETS_FEATURE=true
+REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.simulation-cyan

@@ -46,3 +46,4 @@ REACT_APP_SENTRY_DNS=https://[email protected]
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.simulation-mainnet

@@ -46,3 +46,4 @@ REACT_APP_SENTRY_DNS=https://[email protected]
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.simulation-testnet

@@ -46,3 +46,4 @@ REACT_APP_SENTRY_DNS=https://[email protected]
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

.env.stage

@@ -43,3 +43,4 @@ REACT_APP_SENTRY_DNS=https://[email protected]
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=false

.env.test

@@ -43,3 +43,4 @@ REACT_APP_GMT_ID=GTM-WQ33L7GG
 # Feature flags
 REACT_APP_TRANSFER_ASSETS_FEATURE=true
 REACT_APP_ASSETS_MANAGEMENT_FEATURE=true
+REACT_APP_ENABLE_OTP_LINK=true

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ### vNext
 
--
+- Send OTP email with context specific values
 
 ### v1.40.0
 

packages/embed-wallet/src/types.ts

@@ -22,6 +22,7 @@ export type ContextApp = {
   appId?: string;
   name?: string;
   logoUrl?: string;
+  supportEmail?: string;
 };
 
 export type ContextWhiteLabel = Record<string, any>; // TODO: Use proper white label types

src/api/auth-api.service.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 
 import { reportError } from '~/reporting';
-import { WALLET_API } from '~/constants';
+import { FEATURE_FLAGS, WALLET_API } from '~/constants';
 import { ApiResponse } from '~/api/interfaces';
 
 export type TokenData = {
@@ -12,16 +12,27 @@ export type TokenByLinkData = TokenData & {
   code: string;
 };
 
+export type SendOtpOptions = {
+  appTitle?: string;
+  supportEmail?: string;
+  authLink?: boolean;
+  popupId?: string;
+};
+
 const api = axios.create({
   baseURL: WALLET_API,
 });
 
 export class AuthApiService {
-  public static async sendOtp(email: string): Promise<string | null> {
+  public static async sendOtp(email: string, options: SendOtpOptions = {}): Promise<string | null> {
     let result: AxiosResponse<ApiResponse<{ authLinkCode: string }>> | null = null;
 
     try {
-      result = await api.post('/auth/otp/send', { email });
+      result = await api.post('/auth/otp/send', {
+        ...options,
+        email,
+        authLink: options.authLink ?? FEATURE_FLAGS.otpLink,
+      });
     } catch (err: any) {
       reportError(err);
     }

src/components/Login/OtpPage.tsx

@@ -41,11 +41,12 @@ export const OtpPage = ({ email, onRequestLogin, busy = false, code }: OtpProps)
   const location = useLocation();
   const navigate = useNavigate();
   const [spamNotice, setSpamNotice] = useState(false);
+  const [otpAccepted, setOtpAccepted] = useState(false);
   const [timeLeft, setTimeLeft] = useState<number>(TIME_LEFT);
   const { isGame } = useTheme();
-  const store = useAppContextStore();
+  const appStore = useAppContextStore();
 
-  const verifyScreenSettings = store?.whiteLabel?.verifyScreenSettings;
+  const verifyScreenSettings = appStore?.whiteLabel?.verifyScreenSettings;
 
   const {
     control,
@@ -76,6 +77,8 @@ export const OtpPage = ({ email, onRequestLogin, busy = false, code }: OtpProps)
       return setError('code', { message: 'The code is wrong, please try again' });
     }
 
+    setOtpAccepted(true);
+
     try {
       await onRequestLogin(token);
     } catch (error) {
@@ -89,7 +92,14 @@ export const OtpPage = ({ email, onRequestLogin, busy = false, code }: OtpProps)
 
   const handleResend = async () => {
     setTimeLeft(TIME_LEFT);
-    await AuthApiService.sendOtp(email!);
+
+    /**
+     * TODO: Use AuthorizePopupStore method to send OTP
+     */
+    await AuthApiService.sendOtp(email!, {
+      appTitle: appStore.app?.name,
+      supportEmail: appStore.app?.supportEmail,
+    });
   };
 
   useEffect(() => {
@@ -203,7 +213,7 @@ export const OtpPage = ({ email, onRequestLogin, busy = false, code }: OtpProps)
           </Typography>
         )}
 
-        {spamNotice && (
+        {spamNotice && !otpAccepted && (
           <Fade in>
             <Alert variant="standard" severity="info">
               If you didn’t get the verification email please check your Spam folder.

src/constants.ts

@@ -27,6 +27,7 @@ export const ANALYTICS = {
 export const FEATURE_FLAGS = {
   transferAssets: process.env.REACT_APP_TRANSFER_ASSETS_FEATURE === 'true',
   assetsManagement: process.env.REACT_APP_ASSETS_MANAGEMENT_FEATURE === 'true',
+  otpLink: process.env.REACT_APP_ENABLE_OTP_LINK === 'true',
 };
 
 /**

src/routes/Authorize/Authorize.tsx

@@ -24,7 +24,7 @@ const Authorize = () => {
         sessionNamespace,
         loginHint,
         email,
-        appId: wallet.appContextStore.app?.appId,
+        app: wallet.appContextStore.app,
       }),
     [wallet],
   );

src/stores/AppContextStore/AppContextStore.tsx

@@ -71,7 +71,16 @@ export class AppContextStore {
 
     const name = this.context.app.name || new URL(this.context.app.url).hostname;
 
-    return { ...this.context.app, name };
+    let supportEmail = this.context.app.supportEmail;
+
+    /**
+     * TODO: Remove this condition after Developer Console provide email via SDK
+     */
+    if (!supportEmail && this.context.app.appId === 'developer-console') {
+      supportEmail = '[email protected]';
+    }
+
+    return { ...this.context.app, name, supportEmail };
   }
 
   async disconnect() {

src/stores/AuthorizePopupStore/AuthorizePopupStore.ts

@@ -6,6 +6,7 @@ import { reportError } from '~/reporting';
 import { OpenLoginStore } from '../OpenLoginStore';
 import { SessionStore } from '../SessionStore';
 import { Web3AuthStore } from '../Web3AuthStore';
+import { type App } from '../AppContextStore';
 import { createSharedPopupState } from '../sharedState';
 import { createRedirectUrl } from './createRedirectUrl';
 import { Wallet } from '../types';
@@ -23,7 +24,7 @@ export type AuthorizePopupStoreOptions = {
   redirectUrl?: string;
   forceMfa?: boolean;
   sessionNamespace?: string;
-  appId?: string;
+  app?: App;
   loginHint?: string;
   email?: string;
 };
@@ -130,7 +131,7 @@ export class AuthorizePopupStore {
 
     const { userInfo, permissions } = await this.web3AuthStore.login({
       idToken,
-      appId: this.options.appId,
+      appId: this.options.app?.appId,
       checkMfa: isMfa === undefined,
     });
 
@@ -190,7 +191,10 @@ export class AuthorizePopupStore {
       throw new Error('Email is required to send OTP');
     }
 
-    const authLinkCode = await AuthApiService.sendOtp(toEmail);
+    const authLinkCode = await AuthApiService.sendOtp(toEmail, {
+      appTitle: this.options.app?.name,
+      supportEmail: this.options.app?.supportEmail,
+    });
 
     if (authLinkCode) {
       this.authLinkResource?.dispose();