Merge pull request #316 from buberdds/mz/newExtWarning

Warn about not storing mnemonic in next version

config.js

@@ -99,3 +99,8 @@ export const network_config = [
   },
 ]
 
+/**
+ * Update when release date of new extension is known.
+ * format: YYYY-MM-DD
+ */
+export const NEW_EXTENSION_RELEASE_DATE = undefined

package.json

@@ -26,6 +26,7 @@
     "bignumber.js": "9.0.1",
     "bip39": "3.0.2",
     "classnames": "2.2.6",
+    "date-fns": "^2.30.0",
     "ethereumjs-util": "7.1.3",
     "extensionizer": "1.0.1",
     "i18next": "19.8.4",

src/constant/storageKey.js

@@ -18,3 +18,9 @@ export const LANGUAGE_CONFIG = "LANGUAGE_CONFIG"
  */
 export const ADDRESS_BOOK_CONFIG = "ADDRESS_BOOK_CONFIG"
 
+
+
+/**
+ * Date when the user decides to dismiss the new extension warning.
+ */
+export const DISMISSED_NEW_EXTENSION_WARNING = "DISMISSED_NEW_EXTENSION_WARNING"

src/i18n/en.json

@@ -287,5 +287,9 @@
 
     "withdrawTitle":"Withdraw",
     "withdrawToAddress":"Withdraw Address",
-    "withdrawInfo":"Withdraw Info"
+    "withdrawInfo":"Withdraw Info",
+
+    "warning": "Warning",
+    "newExtensionNotice": "Your mnemonic will no longer be stored in the new version of the wallet extension. You'll be able to backup your mnemonic again before we stop storing it.",
+    "remindMe": "Remind me later"
 }

src/i18n/zh_CN.json

@@ -279,6 +279,9 @@
 
   "withdrawTitle":"提现",
   "withdrawToAddress":"提现地址",
-  "withdrawInfo":"提现信息"
+  "withdrawInfo":"提现信息",
 
+  "warning": "警告",
+  "newExtensionNotice": "您的助记词将不再存储在新版本的钱包扩展中。在我们停止存储助记词之前，您可以再次备份助记词。",
+  "remindMe": "稍后提醒我"
 }

src/popup/component/NewExtensionWarning/index.js

@@ -0,0 +1,36 @@
+import differenceInDays from 'date-fns/differenceInDays';
+import { NEW_EXTENSION_RELEASE_DATE } from '../../../../config';
+import warningIconSrc from '../../../assets/images/warning.svg';
+import { getLanguage } from '../../../i18n';
+import { DISMISSED_NEW_EXTENSION_WARNING } from '../../../constant/storageKey';
+import { saveLocal } from '../../../background/storage/localStorage';
+import './index.scss';
+
+const canDismiss = NEW_EXTENSION_RELEASE_DATE
+  ? differenceInDays(new Date(NEW_EXTENSION_RELEASE_DATE), new Date()) > 3
+  : true;
+
+export const NewExtensionWarning = (props) => {
+  const handleClick = () => {
+    saveLocal(DISMISSED_NEW_EXTENSION_WARNING, new Date().toISOString());
+    props.handleClick();
+  };
+
+  return (
+    <div className="indicator">
+      <div>
+        <img src={warningIconSrc} alt={getLanguage('warning')} />
+      </div>
+      <div className="indicator-content">
+        {getLanguage('newExtensionNotice')}
+        {canDismiss && (
+          <div>
+            <button className="indicator-reminder" onClick={handleClick}>
+              {getLanguage('remindMe')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/popup/component/NewExtensionWarning/index.scss

@@ -0,0 +1,26 @@
+.indicator {
+  display: flex;
+  padding: 10px 5px;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  background: #fcf1d0;
+
+  &-content {
+    color: #06152b;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 125%;
+  }
+
+  &-reminder {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font: inherit;
+    color: #0092f6;
+  }
+}

src/popup/pages/Lock/index.js

@@ -9,6 +9,7 @@ import { NETWORK_CONFIG } from "../../../constant/storageKey";
 import { RESET_WALLET, WALLET_APP_SUBMIT_PWD } from "../../../constant/types";
 import { getLanguage } from "../../../i18n";
 import { resetWallet } from "../../../reducers";
+import { hideNewExtensionWarning } from "../../../reducers/appReducer";
 import { updateCurrentAccount } from "../../../reducers/accountReducer";
 import { updateNetConfigList } from "../../../reducers/network";
 import { sendMsg } from "../../../utils/commonMsg";
@@ -20,6 +21,7 @@ import CustomView from "../../component/CustomView";
 import TestModal from "../../component/TestModal";
 import TextInput from "../../component/TextInput";
 import Toast from "../../component/Toast";
+import { NewExtensionWarning } from "../../component/NewExtensionWarning"
 import "./index.scss";
 class LockPage extends React.Component {
     constructor(props) {
@@ -230,6 +232,11 @@ class LockPage extends React.Component {
             isReceive={true}
             history={this.props.history}>
             <div className={"lock-container"}>
+                {this.props.showNewExtensionWarning && (
+                    <div style={{ marginBottom: '20px', marginTop: '-70px'}}>
+                        <NewExtensionWarning handleClick={this.props.hideNewExtensionWarning} />
+                    </div>
+                )}
                 <div className={"lock-logo-container"}>
                     <img className={"lock-home-logo"} src={home_logo} />
                 </div>
@@ -246,6 +253,7 @@ class LockPage extends React.Component {
 }
 
 const mapStateToProps = (state) => ({
+    showNewExtensionWarning: state.appReducer.showNewExtensionWarning,
 });
 
 function mapDispatchToProps(dispatch) {
@@ -259,7 +267,9 @@ function mapDispatchToProps(dispatch) {
         updateNetConfigList: (config) => {
             dispatch(updateNetConfigList(config))
         },
-
+        hideNewExtensionWarning: () => {
+            dispatch(hideNewExtensionWarning());
+        },
     };
 }
 

src/popup/pages/Wallet/index.js

@@ -14,6 +14,7 @@ import { getBalance, getRpcNonce, getTransactionList } from "../../../background
 import { DAPP_ACCOUNT_CONNECT_SITE, DAPP_CHANGE_CONNECTING_ADDRESS, DAPP_DISCONNECT_SITE, DAPP_GET_ALL_APPROVE_ACCOUNT, SEND_PAGE_TYPE_SEND, WALLET_CHANGE_CURRENT_ACCOUNT, WALLET_SEND_RUNTIME_EVM_WITHDRAW } from "../../../constant/types";
 import { ACCOUNT_TYPE, TRANSACTION_TYPE } from '../../../constant/walletType';
 import { getLanguage } from "../../../i18n";
+import { hideNewExtensionWarning } from "../../../reducers/appReducer";
 import { updateAccountTx, updateCurrentAccount, updateNetAccount, updateRpcNonce } from "../../../reducers/accountReducer";
 import { setAccountInfo, updateDappConnectList, updateNetConfigRequest, updateSendPageType } from "../../../reducers/cache";
 import { updateNetConfigList } from "../../../reducers/network";
@@ -24,6 +25,7 @@ import Clock from "../../component/Clock";
 import TestModal from "../../component/TestModal";
 import Toast from "../../component/Toast";
 import WalletBar from "../../component/WalletBar";
+import { NewExtensionWarning } from "../../component/NewExtensionWarning"
 import "./index.scss";
 import oasisIcon from "../../../assets/images/oasisIcon.svg";
 import evmIcon from "../../../assets/images/evmIcon.svg";
@@ -650,6 +652,11 @@ class Wallet extends React.Component {
         <div className={"home-wallet-top-container"}>
           <WalletBar history={this.props.params.history} />
         </div>
+        {this.props.showNewExtensionWarning && (
+          <div style={{ marginTop: '12px'}}>
+              <NewExtensionWarning handleClick={this.props.hideNewExtensionWarning} />
+          </div>
+        )}
         {infoAndHistory}
         {this.renderChangeModal()}
         <Clock schemeEvent={() => { this.fetchData(this.props.currentAccount.address) }} />
@@ -670,6 +677,7 @@ const mapStateToProps = (state) => ({
   dappConnectAccountList: state.cache.dappConnectAccountList,
   dappConnectAddressList: state.cache.dappConnectAddressList,
   currentActiveTabUrl: state.cache.currentActiveTabUrl,
+  showNewExtensionWarning: state.appReducer.showNewExtensionWarning,
 });
 
 function mapDispatchToProps(dispatch) {
@@ -704,6 +712,9 @@ function mapDispatchToProps(dispatch) {
     updateHomeIndex: (index) => {
       dispatch(updateHomeIndex(index));
     },
+    hideNewExtensionWarning: () => {
+      dispatch(hideNewExtensionWarning());
+    },
   };
 }
 

src/popup/pages/Welcome/index.js

@@ -10,11 +10,12 @@ import {
   getLanguage,
   languageOption
 } from "../../../i18n";
-import { setLanguage } from "../../../reducers/appReducer";
+import { setLanguage, hideNewExtensionWarning } from "../../../reducers/appReducer";
 import { setWelcomeNextRoute } from "../../../reducers/cache";
 import { openCurrentRouteInPersistentPopup } from '../../../utils/popup';
 import Button from "../../component/Button";
 import Select from "../../component/Select";
+import { NewExtensionWarning } from "../../component/NewExtensionWarning"
 import "./index.scss";
 class Welcome extends React.Component {
   constructor(props) {
@@ -82,6 +83,7 @@ class Welcome extends React.Component {
 
   render() {
     return (<div className="welcome_container">
+      {this.props.showNewExtensionWarning &&  <NewExtensionWarning handleClick={this.props.hideNewExtensionWarning} />}
       <div className={"welcome-top-container"}>
         <img src={home_logo} className={"welcome-logo"} />
         <p className={"welcome-wallet-name"}>{"Oasis Wallet"}</p>
@@ -108,6 +110,7 @@ class Welcome extends React.Component {
 
 const mapStateToProps = (state) => ({
   language: state.appReducer.language,
+  showNewExtensionWarning: state.appReducer.showNewExtensionWarning,
 });
 
 function mapDispatchToProps(dispatch) {
@@ -118,6 +121,9 @@ function mapDispatchToProps(dispatch) {
     setWelcomeNextRoute: (nextRoute) => {
       dispatch(setWelcomeNextRoute(nextRoute))
     },
+    hideNewExtensionWarning: () => {
+      dispatch(hideNewExtensionWarning());
+    },
   };
 }
 

src/popup/pages/Welcome/index.scss

@@ -8,7 +8,7 @@
 }
 
 .welcome-button-container {
-  margin-top: 200px;
+  margin-top: 150px;
   width: 100%;
   text-align: center;
 }

src/reducers/appReducer.js

@@ -1,6 +1,10 @@
-import { DEFAULT_LANGUAGE } from "../../config";
+import differenceInDays from 'date-fns/differenceInDays'
+import { DEFAULT_LANGUAGE, NEW_EXTENSION_RELEASE_DATE } from "../../config";
+import { DISMISSED_NEW_EXTENSION_WARNING } from "../constant/storageKey";
+import { getLocal, removeLocal } from "../background/storage/localStorage";
 
 const SET_LANGUAGE = "SET_LANGUAGE"
+const HIDE_NEW_EXTENSION_WARNING = "HIDE_NEW_EXTENSION_WARNING"
 
 
 export function setLanguage(language) {
@@ -10,17 +14,53 @@ export function setLanguage(language) {
     };
 }
 
+export function hideNewExtensionWarning() {
+    return {
+        type: HIDE_NEW_EXTENSION_WARNING
+    };
+}
+
+function shouldShowNewExtensionWarning() {
+    const dismissed = getLocal(DISMISSED_NEW_EXTENSION_WARNING);
+    if (!dismissed || !NEW_EXTENSION_RELEASE_DATE) {
+        return !dismissed;
+    }
+
+    const dismissedDate = new Date(dismissed);
+    const releaseDate = new Date(NEW_EXTENSION_RELEASE_DATE);
+    // Always show the warning if the release date is less than or equal to 3 days away
+    if (differenceInDays(releaseDate, new Date()) <= 3) {
+        return true;
+    }
+    // Show the warning and reset the dismissed date
+    // if it was set more than two weeks before the release date
+    if (differenceInDays(releaseDate, dismissedDate) > 14) {
+        removeLocal(DISMISSED_NEW_EXTENSION_WARNING);
+        return true;
+    }
+
+    return false;
+}
+
+
 const initState = {
     language: DEFAULT_LANGUAGE,
+    showNewExtensionWarning: shouldShowNewExtensionWarning()
 };
 
 const appReducer = (state = initState, action) => {
     switch (action.type) {
         case SET_LANGUAGE:
             let language = action.language
             return {
+                ...state,
                 language,
             };
+        case HIDE_NEW_EXTENSION_WARNING:
+            return {
+                ...state,
+                showNewExtensionWarning: false,
+            };
         default:
             return state;
     }

yarn.lock

@@ -2286,6 +2286,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.21.0":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
+  integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -6515,6 +6522,13 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -13200,6 +13214,11 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"