feat: add seed phrase security warning banner

src/components/SeedPhraseWarning.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Alert } from "antd";
+import localStorage from "../util/localStorage";
+
+const WARNING_MESSAGE =
+  "GridPlus will never ask for your seed phrase, private keys, or recovery words. If asked, you may be on a phishing site.";
+
+export const SeedPhraseWarning = ({ style }: { style?: React.CSSProperties }) => {
+  const [visible, setVisible] = useState(
+    !localStorage.getSeedWarningAcknowledged()
+  );
+
+  if (!visible) return null;
+
+  return (
+    <Alert
+      message={WARNING_MESSAGE}
+      type="warning"
+      showIcon
+      closable
+      afterClose={() => {
+        localStorage.setSeedWarningAcknowledged();
+        setVisible(false);
+      }}
+      style={{ marginBottom: "16px", textAlign: "left", ...style }}
+    />
+  );
+};

src/components/connect.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Alert, Button, Card, Col, Input, Row, Modal } from "antd";
 import { DesktopOutlined, LinkOutlined } from "@ant-design/icons";
 import { Settings } from "./index";
+import { SeedPhraseWarning } from "./SeedPhraseWarning";
 import { constants } from "../util/helpers";
 import { NameEditor } from "./NameEditor";
 import { LoginData } from "../types/authentication";
@@ -362,6 +363,7 @@ class Connect extends React.Component<ConnectProps, ConnectState> {
                   />
                 </div>
               ) : null}
+              <SeedPhraseWarning style={{ margin: "10px 0" }} />
               {this.renderMsg()}
               {tooLong ? (
                 <p>

src/components/landing.tsx

@@ -16,6 +16,7 @@ import React from "react";
 import { useFeature } from "../hooks/useFeature";
 import { PageContent } from "./index";
 import { LandingCard } from "./LandingCard";
+import { SeedPhraseWarning } from "./SeedPhraseWarning";
 
 const Landing = ({ goToPage }) => {
   const { USES_AUTO_ABI } = useFeature();
@@ -37,6 +38,7 @@ const Landing = ({ goToPage }) => {
             justifyItems: "center",
           }}
         >
+          <SeedPhraseWarning />
           <div
             style={{
               display: "flex",

src/components/pair.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, Input } from 'antd'
 import { PageContent } from './index'
+import { SeedPhraseWarning } from './SeedPhraseWarning';
 import { AppContext } from '../store/AppContext';
 const SUBMIT_LEN = 8; // 8 characters in a code
 
@@ -64,6 +65,7 @@ class Pair extends React.Component<any, any> {
     const content = (
       <center>
         <Card title="Enter Secret" bordered={true} id='secret-card'>
+          <SeedPhraseWarning />
           <p></p>
           <p>Please enter the pairing secret displayed on your Lattice screen:</p>
           <Input

src/components/settings.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Card, Col, Collapse, Input, Radio, Row, Space, Table } from 'antd'
 import { WarningOutlined } from '@ant-design/icons';
 import { PageContent } from './index'
+import { SeedPhraseWarning } from './SeedPhraseWarning';
 import omit from "lodash/omit"
 import { constants, getBtcPurpose } from '../util/helpers';
 import localStorage from '../util/localStorage';
@@ -213,6 +214,7 @@ class Settings extends React.Component<any, any> {
   renderCard() {
     return (
       <div>
+        <SeedPhraseWarning />
         {this.renderKeyringsSetting()}
         {this.renderCustomEndpointSetting()}
         {this.renderBitcoinVersionSetting()}

src/util/localStorage.ts

@@ -43,6 +43,16 @@ const removeRootStoreItem = (key) =>
 
 // #endregion
 
+// #region -- Seed Phrase Warning Functions (sessionStorage - resets each browser session)
+
+const SEED_WARNING_KEY = "gridplus_seed_phrase_warning_ack";
+const getSeedWarningAcknowledged = (): boolean =>
+  window.sessionStorage.getItem(SEED_WARNING_KEY) === "true";
+const setSeedWarningAcknowledged = (): void =>
+  window.sessionStorage.setItem(SEED_WARNING_KEY, "true");
+
+// #endregion
+
 // #region -- Settings Functions
 
 const getSettings = () => getRootStoreItem("settings");
@@ -151,6 +161,8 @@ const exports = {
   getRootStoreItem,
   setRootStoreItem,
   removeRootStoreItem,
+  getSeedWarningAcknowledged,
+  setSeedWarningAcknowledged,
   getSettings,
   setSettings,
   getLoginId,