Unified login

docusaurus.config.js

@@ -3,6 +3,7 @@
 
 require("dotenv").config();
 const { themes } = require("prism-react-renderer");
+const { REF_ALLOW_LOGIN_PATH } = require("./src/lib/constants");
 const codeTheme = themes.dracula;
 const remarkCodesandbox = require("remark-codesandbox");
 const isProd = process.env.NODE_ENV === "production";
@@ -32,6 +33,8 @@ const config = {
 
   customFields: {
     LD_CLIENT_ID: process.env.LD_CLIENT_ID,
+    VERCEL_ENV: process.env.VERCEL_ENV,
+    DASHBOARD_PREVIEW_URL: process.env.DASHBOARD_PREVIEW_URL,
   },
 
   trailingSlash: true,
@@ -88,6 +91,7 @@ const config = {
     ],
   ],
   plugins: [
+    "docusaurus-plugin-sass",
     [
       "@docusaurus/plugin-content-docs",
       {
@@ -168,7 +172,7 @@ const config = {
               replaysOnErrorSampleRate: isProd ? 1.0 : 0,
               replaysSessionSampleRate: isProd ? 1.0 : 0,
               sampleRate: isProd ? 0.25 : 0,
-              tracesSampleRate: 0, 
+              tracesSampleRate: 0,
             },
           },
         },
@@ -220,6 +224,11 @@ const config = {
             label: "User support",
             position: "right",
           },
+          {
+            type: "custom-navbarWallet",
+            position: "right",
+            includeUrl: REF_ALLOW_LOGIN_PATH,
+          },
           /* Language drop down
           {
             type: "localeDropdown",

package.json

@@ -5,7 +5,7 @@
   "license": "(MIT OR Apache-2.0)",
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "start": "docusaurus start -p 3003",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -19,7 +19,7 @@
     "lint:js": "eslint . --ext js,jsx,ts,tsx --max-warnings=5",
     "lint:style": "stylelint \"**/*.css\" --fix",
     "lint:fix": "npm run lint:js -- --fix",
-    "format": "prettier --write '{blog,docs,src,static}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
+    "format": "prettier --write '{blog,docs,src}/**/*.{md,mdx,ts,js,tsx,jsx,json}'"
   },
   "lint-staged": {
     "src/**/*.{ts,js,jsx,tsx}": "npm run lint:fix",
@@ -31,35 +31,43 @@
     "@apidevtools/json-schema-ref-parser": "^11.6.4",
     "@docusaurus/core": "^3.0.0",
     "@docusaurus/plugin-content-docs": "^3.0.0",
+    "@docusaurus/plugin-content-pages": "^3.4.0",
     "@docusaurus/theme-common": "^3.0.0",
     "@docusaurus/theme-mermaid": "^3.0.0",
     "@intercom/messenger-js-sdk": "^0.0.11",
     "@mdx-js/react": "^3.0.0",
     "@metamask/design-tokens": "^1.11.1",
     "@metamask/docusaurus-openrpc": "^0.4.1",
-    "@metamask/sdk": "^0.26.5",
-    "@metamask/sdk-react": "^0.26.5",
+    "@metamask/profile-sync-controller": "^0.6.0",
+    "@metamask/sdk": "^0.28.1",
     "@rjsf/core": "^5.18.4",
     "@rjsf/utils": "^5.18.4",
     "@rjsf/validator-ajv8": "^5.18.4",
+    "@types/react": "^18.3.3",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "^0.2.5",
     "docusaurus-plugin-segment": "^1.0.4",
     "docusaurus-plugin-sentry": "^2.0.0",
     "dotenv": "^16.4.5",
+    "ethers": "^6.13.2",
     "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
     "launchdarkly-js-client-sdk": "^3.3.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isobject": "^3.0.2",
     "node-polyfill-webpack-plugin": "^2.0.1",
-    "prettier": "^3.0.0",
+    "prettier": "^3.3.3",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
+    "react-alert": "^7.0.3",
     "react-dom": "^18.0.0",
     "react-dropdown-select": "^4.11.2",
+    "react-modal": "^3.16.1",
     "react-player": "^2.13.0",
     "react-tippy": "^1.4.0",
     "remark-codesandbox": "^0.10.1",
-    "remark-docusaurus-tabs": "^0.2.0"
+    "remark-docusaurus-tabs": "^0.2.0",
+    "sass": "^1.77.6"
   },
   "devDependencies": {
     "@docusaurus/eslint-plugin": "^3.0.0",
@@ -69,12 +77,14 @@
     "@docusaurus/types": "^3.4.0",
     "@lavamoat/allow-scripts": "^3.0.4",
     "@tsconfig/docusaurus": "^1.0.5",
+    "@types/react-alert": "^7.0.6",
+    "@types/react-modal": "^3.16.3",
     "@typescript-eslint/parser": "^7.12.0",
     "eslint-plugin-react": "^7.34.2",
     "stylelint": "^15.0.0 ",
     "stylelint-config-standard": "^34.0.0",
     "tsc-files": "^1.1.4",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   },
   "browserslist": {
     "production": [
@@ -112,7 +122,9 @@
       "@metamask/sdk-react>@metamask/sdk>eciesjs>secp256k1": false,
       "@metamask/sdk>@metamask/sdk-communication-layer>bufferutil": false,
       "@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false,
-      "@metamask/sdk>eciesjs>secp256k1": false
+      "@metamask/sdk>eciesjs>secp256k1": false,
+      "ethers>ws>bufferutil": false,
+      "ethers>ws>utf-8-validate": false
     }
   }
 }

src/components/Alert/alert.module.scss

@@ -0,0 +1,85 @@
+:root[data-theme="dark"] {
+  --alert-error-background: rgb(53, 40, 41);
+  --alert-error-border: #e06470;
+  --alert-success-background: rgb(34, 48, 36);
+  --alert-success-border: #28a745;
+  --alert-info-background: rgb(61, 57, 43);
+  --alert-info-border: #ffdf70;
+}
+
+:root[data-theme="light"] {
+  --alert-error-background: rgb(248, 235, 237);
+  --alert-error-border: #d73847;
+  --alert-success-background: rgb(234, 242, 235);
+  --alert-success-border: #1c8234;
+  --alert-info-background: rgb(247, 238, 231);
+  --alert-info-border: #bf5208;
+}
+
+.alert {
+  padding: 8px 36px;
+  border-radius: 4px;
+  border-left: 4px solid;
+  position: relative;
+  width: 80vw;
+  box-shadow: var(--ifm-alert-shadow);
+
+  &.info {
+    border-color: var(--alert-info-border);
+    background-color: var(--alert-info-background);
+
+    .icon {
+      color: var(--alert-info-border);
+    }
+  }
+
+  &.success {
+    border-color: var(--alert-success-border);
+    background-color: var(--alert-success-background);
+
+    .icon {
+      color: var(--alert-success-border);
+    }
+  }
+
+  &.error {
+    border-color: var(--alert-error-border);
+    background-color: var(--alert-error-background);
+
+    .icon {
+      color: var(--alert-error-border);
+    }
+  }
+
+  .icon {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+  }
+
+  .closeButton {
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    line-height: 1;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    .closeIcon {
+      min-width: 16px;
+      width: 16px;
+      min-height: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.alertTitle {
+  font-weight: 500 !important;
+  margin: 0;
+}
+
+.alertText {
+  margin: 0;
+}

src/components/Alert/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { positions, types } from "react-alert";
+import clsx from "clsx";
+import CloseImg from "./close.svg";
+import InfoImg from "./info.svg";
+import SuccessImg from "./success.svg";
+import ErrorImg from "./error.svg";
+import Text from "@site/src/components/Text";
+import styles from "./alert.module.scss";
+
+export const options = {
+  position: positions.TOP_CENTER,
+  timeout: 10000,
+  offset: "5px",
+  containerStyle: {
+    zIndex: 1000,
+    marginTop: 64,
+  },
+};
+
+export const AlertTemplate = ({ style, options, message, close }) => (
+  <div
+    style={style}
+    className={clsx(
+      styles.alert,
+      options.type === types.INFO && styles.info,
+      options.type === types.SUCCESS && styles.success,
+      options.type === types.ERROR && styles.error,
+    )}
+  >
+    {options.type === types.INFO && <InfoImg className={styles.icon} />}
+    {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
+    {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
+    {message}
+    <span role="button" onClick={close} className={styles.closeButton}>
+      <CloseImg className={styles.closeIcon} />
+    </span>
+  </div>
+);
+
+export const AlertTitle = ({
+  children,
+}: {
+  children: string | React.ReactElement;
+}) => (
+  <Text as="p" className={styles.alertTitle}>
+    {children}
+  </Text>
+);
+
+export const AlertText = ({
+  children,
+}: {
+  children: string | React.ReactElement;
+}) => (
+  <Text as="p" className={styles.alertText}>
+    {children}
+  </Text>
+);