Skip to content

[STR-598] Update Device Verification #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frostbournesb merged 7 commits into from
May 23, 2023
Merged

[STR-598] Update Device Verification #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cdd60c4
Add email preview
frostbournesb May 22, 2023
343f492
Add request device verification
frostbournesb May 23, 2023
f6112c0
err handling
frostbournesb May 23, 2023
2141e1e
Update copy
frostbournesb May 23, 2023
4fb2af6
move request to not use onmount
frostbournesb May 23, 2023
f83013c
rm retrylogin
frostbournesb May 23, 2023
f196710
space to tab
frostbournesb May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions src/lib/events/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,28 @@ export interface StringEvent<T = any> {
}

export enum Events {
LOAD_PAYLOAD = 'load_payload',
IFRAME_READY = 'ready',
IFRAME_RESIZE = 'resize',
IFRAME_CLOSE = 'close',
REQUEST_AUTHORIZE_USER = 'request_authorize_user',
RECEIVE_AUTHORIZE_USER = 'receive_authorize_user',
REQUEST_RETRY_LOGIN = 'request_retry_login',
RECEIVE_RETRY_LOGIN = 'receive_retry_login',
REQUEST_UPDATE_USER = 'request_update_user',
RECEIVE_UPDATE_USER = 'receive_update_user',
REQUEST_EMAIL_VERIFICATION = "request_email_verification",
RECEIVE_EMAIL_VERIFICATION = "receive_email_verification",
LOAD_PAYLOAD = "load_payload",
IFRAME_READY = "ready",
IFRAME_RESIZE = "resize",
IFRAME_CLOSE = "close",
REQUEST_AUTHORIZE_USER = "request_authorize_user",
RECEIVE_AUTHORIZE_USER = "receive_authorize_user",
REQUEST_RETRY_LOGIN = "request_retry_login",
RECEIVE_RETRY_LOGIN = "receive_retry_login",
REQUEST_UPDATE_USER = 'request_update_user',
RECEIVE_UPDATE_USER = 'receive_update_user',
REQUEST_EMAIL_VERIFICATION = "request_email_verification",
RECEIVE_EMAIL_VERIFICATION = "receive_email_verification",
REQUEST_EMAIL_PREVIEW = "request_email_preview",
RECEIVE_EMAIL_PREVIEW = "receive_email_preview",
REQUEST_DEVICE_VERIFICATION = "request_device_verification",
RECEIVE_DEVICE_VERIFICATION = "receive_device_verification",
REQUEST_CONFIRM_TRANSACTION = "request_confirm_transaction",
RECEIVE_CONFIRM_TRANSACTION = "receive_confirm_transaction",
REQUEST_QUOTE_START = "request_quote_start",
QUOTE_CHANGED = "quote_changed",
REQUEST_QUOTE_STOP = "request_quote_stop"
};
REQUEST_QUOTE_START = "request_quote_start",
QUOTE_CHANGED = "quote_changed",
REQUEST_QUOTE_STOP = "request_quote_stop",
}

export const sendEvent = (eventName: string, data?: any) => {
const message = JSON.stringify({
Expand Down
0 .../modals/onboarding/ResendEmailLink.svelte → src/lib/modals/onboarding/CheckEmail.svelte
View file
Open in desktop
File renamed without changes.
28 changes: 23 additions & 5 deletions src/lib/modals/onboarding/Onboarding.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import VerifyDevice from './VerifyDevice.svelte';

import { onMount } from 'svelte';
import { modalManager, __user } from '$lib/stores';
import { modalManager, __user, userEmailPreview } from '$lib/stores';
import { sdkService } from '$lib/services';

let action = authorizeWallet; // default component behavior: Show Authorize Wallet button
Expand Down Expand Up @@ -36,18 +36,31 @@
if (user.status !== 'email_verified') return sendToEmailVerify();
else return sendToCheckout();
} catch (err: any) {
handleAuthError(err);
await handleAuthError(err);
}
}

function handleAuthError(err: any) {
async function handleAuthError(err: any) {
if (err.code === 'INVALID_EMAIL') return sendToEmailVerify();
if (err.code === 'UNPROCESSABLE_ENTITY') return sendToDeviceVerify();
if (err.code === 'UNPROCESSABLE_ENTITY') return await sendToDeviceVerify();

// unhandled error. Improve the styling of this error message
alert('An unexpected error has occurred. Please try again.');
}

const requestDeviceVerification = async () => {
try {
const { status } = await sdkService.requestDeviceVerification($__user.walletAddress);

if (status === 'verified') {
sendToCheckout();
}
} catch (e: any) {
console.error(e);
alert("Something went wrong. Please try again.")
}
}

const sendToEmailVerify = async () => {
modalManager.set(VerifyEmailForm);
};
Expand All @@ -56,7 +69,12 @@
modalManager.set(OrderDetails);
};

const sendToDeviceVerify = () => {
const sendToDeviceVerify = async () => {
const { email } = await sdkService.getUserEmailPreview($__user.walletAddress);
$userEmailPreview = email;

requestDeviceVerification();

modalManager.set(VerifyDevice);
};
</script>
Expand Down
46 changes: 6 additions & 40 deletions src/lib/modals/onboarding/VerifyDevice.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,10 @@
<script lang="ts">
import ModalBase from '../ModalBase.svelte';
import BackButton from '$lib/components/shared/BackButton.svelte';
import StyledButton from '$lib/components/shared/StyledButton.svelte';

import Onboarding from './Onboarding.svelte';
import OrderDetails from '../checkout/OrderDetails.svelte';
import VerifyEmailForm from './VerifyEmailForm.svelte';

import { modalManager } from '$lib/stores';
import { sdkService } from '$lib/services';

const sendToCheckout = () => {
modalManager.set(OrderDetails);
};

const sendToVerify = () => {
modalManager.set(VerifyEmailForm);
};

const retry = async () => {
try {
const { user } = await sdkService.retryLogin();

if (user.status !== 'email_verified') {
return sendToVerify();
} else {
return sendToCheckout();
}
} catch (err: any) {
console.log('Could not verify device: ' + err.code);
handleAuthError(err);
}
};

const handleAuthError = (err: any) => {
if (err.code === 'UNPROCESSABLE_ENTITY')
return alert('Could not verify device, please check your email again');

alert('An unexpected error has occurred. Please try again.');
}
import { modalManager, userEmailPreview, __user } from '$lib/stores';

const back = () => {
modalManager.set(Onboarding);
Expand All @@ -49,12 +15,12 @@
<ModalBase title="Verify this device" type="onboarding">
<div class="text-xl mt-5">
<p>We detected that you are using a new device.</p>
<p class="mb-5">We’ve sent an email to the email on file.</p>
<p>Follow the instructions in the email and click the button below to continue.</p>
<p class="mb-5">We’ve sent an email to {$userEmailPreview ?? "the email on file"}</p>
<p>Follow the instructions in the email and wait for the screen to continue.</p>
</div>
<p class="mt-5">Haven’t received the email? Check your spam folder</p>
<div class="float-right mt-7">
<p class="mt-5">Haven’t received the email? Check your spam folder.</p>
<div class="float-right mt-7 mb-6">
<BackButton {back} />
<StyledButton action={retry} wide={false}>Retry Login</StyledButton>
<!-- <StyledButton action={resendVerify} wide={false}>Resend Email</StyledButton> -->
</div>
</ModalBase>
4 changes: 2 additions & 2 deletions src/lib/modals/onboarding/VerifyEmailForm.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import StyledButton from '$lib/components/shared/StyledButton.svelte';
import StyledInput from '$lib/components/shared/StyledInput.svelte';

import ResendEmailLink from './ResendEmailLink.svelte';
import CheckEmail from './CheckEmail.svelte';
import Onboarding from './Onboarding.svelte';
import OrderDetails from '../checkout/OrderDetails.svelte';

Expand Down Expand Up @@ -84,7 +84,7 @@
}

function next() {
modalManager.set(ResendEmailLink);
modalManager.set(CheckEmail);
}

//TODO: We want the error to be removed when the field is empty
Expand Down
25 changes: 16 additions & 9 deletions src/lib/services/sdk.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,19 @@ export function createSdkService(): SdkService {
return promisifyEvent<{ user: User }>(Events.RECEIVE_AUTHORIZE_USER, { timeout: 120 }); // wait 2 minutes for user to authorize
}

async function retryLogin() {
sendEvent(Events.REQUEST_RETRY_LOGIN);
return promisifyEvent<{ user: User }>(Events.RECEIVE_RETRY_LOGIN);
}

async function requestEmailVerification(userId: string, email: string) {
sendEvent(Events.REQUEST_EMAIL_VERIFICATION, { userId, email });
return promisifyEvent<{status: string}>(Events.RECEIVE_EMAIL_VERIFICATION, { timeout: 15 * 60 }); // wait 15 minutes for user to verify email
return promisifyEvent<{ status: string }>(Events.RECEIVE_EMAIL_VERIFICATION, { timeout: 15 * 60 }); // wait 15 minutes for user to verify email
}

async function requestDeviceVerification(walletAddress: string) {
sendEvent(Events.REQUEST_DEVICE_VERIFICATION, { walletAddress });
return promisifyEvent<{ status: string }>(Events.RECEIVE_DEVICE_VERIFICATION, { timeout: 15 * 60 }); // wait 15 minutes for user to verify email
}

async function getUserEmailPreview(walletAddress: string) {
sendEvent(Events.REQUEST_EMAIL_PREVIEW, { walletAddress });
return promisifyEvent<{ email: string }>(Events.RECEIVE_EMAIL_PREVIEW);
}

async function updateUserName(userId: string, update: UserUpdate) {
Expand All @@ -40,9 +45,10 @@ export function createSdkService(): SdkService {

return {
requestAuthorization,
retryLogin,
updateUserName,
requestEmailVerification,
requestDeviceVerification,
getUserEmailPreview,
updateUserName,
requestQuoteStart,
requestQuoteStop,
transact
Expand All @@ -51,9 +57,10 @@ export function createSdkService(): SdkService {

interface SdkService {
requestAuthorization: (walletAddress: string) => Promise<{ user: User }>;
retryLogin: () => Promise<{ user: User }>;
getUserEmailPreview: (walletAddress: string) => Promise<{ email: string }>;
updateUserName: (userId: string, update: UserUpdate) => Promise<void>
requestEmailVerification: (userId: string, email: string) => Promise<{ status: string }>;
requestDeviceVerification: (walletAddress: string) => Promise<{ status: string }>;
requestQuoteStart: () => Promise<void>;
requestQuoteStop: () => Promise<void>;
transact: (payload: ExecutionRequest) => Promise<TransactionResponse>;
Expand Down
2 changes: 2 additions & 0 deletions src/lib/stores/modules/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,5 @@ export const __user = writable<User>({
status: "",
email: "",
});

export const userEmailPreview = writable("");