From 76faa39371d2134a2fa7bf1b8a06030a0be9cc91 Mon Sep 17 00:00:00 2001
From: CarmitKl <96685244+CarmitKl@users.noreply.github.com>
Date: Tue, 29 Mar 2022 14:18:10 +0300
Subject: [PATCH] feat: onboarding modal (#109)
---
.env.development | 2 +
.env.production | 2 +
src/__tests__/utils/date.spec.js | 15 +-
src/components/Features/Bridge/Bridge.js | 25 +-
.../Modal/OnboardingModal/OnboardingModal.js | 20 +
.../OnboardingModal.module.scss | 7 +
.../OnboardingModal.strings.js | 9 +
src/config/envs.js | 5 +-
src/config/strings.js | 12 +
src/providers/ModalProvider/modal-hooks.js | 13 +
src/utils/date.js | 7 +
yarn.lock | 2373 ++++++++++++++++-
12 files changed, 2376 insertions(+), 114 deletions(-)
create mode 100644 src/components/UI/Modal/OnboardingModal/OnboardingModal.js
create mode 100644 src/components/UI/Modal/OnboardingModal/OnboardingModal.module.scss
create mode 100644 src/components/UI/Modal/OnboardingModal/OnboardingModal.strings.js
diff --git a/.env.development b/.env.development
index a4a7bdca..b4adc069 100644
--- a/.env.development
+++ b/.env.development
@@ -7,3 +7,5 @@ REACT_APP_STARKNET_CONTRACT_ADDRESS=0xde29d060D45901Fb19ED6C6e959EB22d8626708e
REACT_APP_ETHERSCAN_URL=//goerli.etherscan.io
REACT_APP_VOYAGER_URL=//goerli.voyager.online
REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY=STARKGATE_TRANSFERS
+REACT_APP_LOCAL_STORAGE_ONBOARDING_TIMESTAMP_KEY=STARKGATE_ONBOARDING_TIMESTAMP
+REACT_APP_ONBOARDING_MODAL_TIMEOUT_HRS=24
\ No newline at end of file
diff --git a/.env.production b/.env.production
index b37d5d83..8f354dd6 100644
--- a/.env.production
+++ b/.env.production
@@ -7,3 +7,5 @@ REACT_APP_STARKNET_CONTRACT_ADDRESS=
REACT_APP_ETHERSCAN_URL=//etherscan.io
REACT_APP_VOYAGER_URL=//voyager.online
REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY=STARKGATE_TRANSFERS
+REACT_APP_LOCAL_STORAGE_ONBOARDING_TIMESTAMP_KEY=STARKGATE_ONBOARDING_TIMESTAMP
+REACT_APP_ONBOARDING_MODAL_TIMEOUT_HRS=24
\ No newline at end of file
diff --git a/src/__tests__/utils/date.spec.js b/src/__tests__/utils/date.spec.js
index 35c56534..60efca7d 100644
--- a/src/__tests__/utils/date.spec.js
+++ b/src/__tests__/utils/date.spec.js
@@ -1,6 +1,6 @@
import utils from '../../utils';
-const {get24Time, getDate} = utils.date;
+const {get24Time, getDate, getMsFromHrs} = utils.date;
describe('getDate', () => {
it('should return date of the form DD/MM/YYYY from timestamp', () => {
@@ -13,3 +13,16 @@ describe('get24Time', () => {
expect(get24Time(1644828892412).endsWith(':54:52')).toBeTruthy();
});
});
+
+describe('getMsFromHrs', () => {
+ it('should return the equivalent time from hours to milliseconds', () => {
+ expect(getMsFromHrs(1)).toEqual(3600000);
+ expect(getMsFromHrs('24')).toEqual(86400000);
+ expect(getMsFromHrs('0')).toEqual(0);
+ });
+
+ it('should return undefined if parseFloat got NaN', () => {
+ expect(getMsFromHrs('something')).toEqual(undefined);
+ expect(getMsFromHrs(undefined)).toEqual(undefined);
+ });
+});
diff --git a/src/components/Features/Bridge/Bridge.js b/src/components/Features/Bridge/Bridge.js
index 1fa50ddc..2c7c3730 100644
--- a/src/components/Features/Bridge/Bridge.js
+++ b/src/components/Features/Bridge/Bridge.js
@@ -1,12 +1,35 @@
-import React from 'react';
+import React, {useEffect} from 'react';
import {Account, Faq, SelectToken, ToastProvider, Transfer} from '..';
+import envs from '../../../config/envs';
import {MenuType} from '../../../enums';
import {useMenu} from '../../../providers/MenuProvider';
+import {useOnboardingModal} from '../../../providers/ModalProvider';
+import utils from '../../../utils';
import styles from './Bridge.module.scss';
+const {localStorageOnboardingExpirationTimestampKey, onboardingModalTimeoutHrs} = envs;
+
export const Bridge = () => {
const {menu, menuProps} = useMenu();
+ const showOnboardingModal = useOnboardingModal();
+
+ useEffect(() => {
+ maybeShowOnboardingModal();
+ }, []);
+
+ const maybeShowOnboardingModal = () => {
+ const onboardingTimestamp = utils.storage.getItem(localStorageOnboardingExpirationTimestampKey);
+ const now = Date.now();
+ const onboardingModalTimeoutMs = utils.date.getMsFromHrs(onboardingModalTimeoutHrs);
+ if (!onboardingTimestamp || onboardingTimestamp < now) {
+ showOnboardingModal();
+ utils.storage.setItem(
+ localStorageOnboardingExpirationTimestampKey,
+ now + onboardingModalTimeoutMs
+ );
+ }
+ };
const renderMenu = () => {
switch (menu) {
diff --git a/src/components/UI/Modal/OnboardingModal/OnboardingModal.js b/src/components/UI/Modal/OnboardingModal/OnboardingModal.js
new file mode 100644
index 00000000..db30503e
--- /dev/null
+++ b/src/components/UI/Modal/OnboardingModal/OnboardingModal.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './OnboardingModal.module.scss';
+import {SUBTITLE_TXT, BULLETS_TXT, INCOGNITO_TXT} from './OnboardingModal.strings';
+
+const OnboardingModal = () => {
+ return (
+
+
{SUBTITLE_TXT}
+
+ {BULLETS_TXT.map((bullet, i) => (
+ - {bullet}
+ ))}
+
+
+