First working version of the snap

.editorconfig

@@ -7,3 +7,6 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -18,6 +18,9 @@ module.exports = {
       extends: ['@metamask/eslint-config-typescript'],
       rules: {
         '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+        '@typescript-eslint/promise-function-async': 'off',
+        '@typescript-eslint/naming-convention': 'off',
+        'import/order': 'off',
       },
     },
 
@@ -37,6 +40,7 @@ module.exports = {
     '!.prettierrc.js',
     '**/!.eslintrc.js',
     '**/dist*/',
+    '**/backend',
     '**/*__GENERATED__*',
     '**/build',
     '**/public',

.gitignore

@@ -65,6 +65,8 @@ node_modules/
 # dotenv environment variables file
 .env
 .env.test
+.env.development
+.env.local
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "@metamask/template-snap-monorepo",
+  "name": "@tuum-tech/hedera-pulse-monorepo",
   "version": "0.1.0",
   "private": true,
   "description": "",
-  "homepage": "https://github.com/MetaMask/template-snap-monorepo#readme",
+  "homepage": "https://github.com/tuum-tech/hedera-pulse#readme",
   "bugs": {
-    "url": "https://github.com/MetaMask/template-snap-monorepo/issues"
+    "url": "https://github.com/tuum-tech/hedera-pulse/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/MetaMask/template-snap-monorepo.git"
+    "url": "git+https://github.com/tuum-tech/hedera-pulse.git"
   },
   "license": "(MIT-0 OR Apache-2.0)",
   "author": "",
@@ -18,34 +18,34 @@
   ],
   "scripts": {
     "build": "yarn workspaces foreach --parallel --topological --verbose run build",
-    "install-chrome": "./scripts/install-chrome.sh",
+    "clean": "yarn workspaces foreach --parallel --interlaced --verbose run clean",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
     "lint:eslint": "eslint . --cache --ext js,ts",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!**/CHANGELOG.md' '**/*.yml' --ignore-path .gitignore",
     "start": "yarn workspaces foreach --parallel --interlaced --verbose run start",
-    "test": "echo \"TODO\""
+    "test": "yarn workspaces foreach --parallel --interlaced --verbose run test"
   },
   "devDependencies": {
-    "@metamask/eslint-config": "^10.0.0",
-    "@metamask/eslint-config-jest": "^10.0.0",
-    "@metamask/eslint-config-nodejs": "^10.0.0",
-    "@metamask/eslint-config-typescript": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.2",
-    "eslint-plugin-jsdoc": "^39.2.9",
+    "@metamask/eslint-config": "^11.1.0",
+    "@metamask/eslint-config-jest": "^11.1.0",
+    "@metamask/eslint-config-nodejs": "^11.1.0",
+    "@metamask/eslint-config-typescript": "^11.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-jsdoc": "^46.8.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.2.1",
-    "prettier-plugin-packagejson": "^2.2.18",
-    "typescript": "^4.7.4"
+    "prettier": "^3.0.3",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.13.0"
   }
 }

packages/site/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "site",
+  "name": "@tuum-tech/hedera-pulse-site",
   "version": "0.1.0",
   "private": true,
   "license": "(MIT-0 OR Apache-2.0)",
@@ -26,42 +26,45 @@
   },
   "dependencies": {
     "@metamask/providers": "^9.0.0",
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "styled-components": "5.3.3"
   },
   "devDependencies": {
-    "@metamask/eslint-config": "^10.0.0",
-    "@metamask/eslint-config-jest": "^10.0.0",
-    "@metamask/eslint-config-nodejs": "^10.0.0",
-    "@metamask/eslint-config-typescript": "^10.0.0",
+    "@metamask/eslint-config": "^11.1.0",
+    "@metamask/eslint-config-jest": "^11.1.0",
+    "@metamask/eslint-config-nodejs": "^11.1.0",
+    "@metamask/eslint-config-typescript": "^11.1.0",
     "@svgr/webpack": "^6.4.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.5.0",
     "@types/react": "^18.0.15",
+    "@types/react-bootstrap": "^0.32.32",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.2",
-    "eslint-plugin-jsdoc": "^39.2.9",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsdoc": "^40.1.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "gatsby": "^4.24.4",
     "gatsby-plugin-manifest": "^4.24.0",
     "gatsby-plugin-styled-components": "^5.24.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "prettier": "^2.2.1",
-    "prettier-plugin-packagejson": "^2.2.18",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "prettier": "^2.8.7",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.4"
   }
 }

packages/site/src/App.tsx

@@ -1,8 +1,10 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { FunctionComponent, ReactNode, useContext } from 'react';
 import styled from 'styled-components';
-import { Footer, Header } from './components';
+import { Footer, Header } from './components/base';
 
 import { GlobalStyle } from './config/theme';
+import { ModalContextProvider } from './contexts/ModalContext';
 import { ToggleThemeContext } from './Root';
 
 const Wrapper = styled.div`
@@ -25,7 +27,7 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
       <GlobalStyle />
       <Wrapper>
         <Header handleToggleClick={toggleTheme} />
-        {children}
+        <ModalContextProvider>{children}</ModalContextProvider>
         <Footer />
       </Wrapper>
     </>

packages/site/src/components/Buttons.tsx → packages/site/src/components/base/Buttons.tsx

@@ -1,8 +1,10 @@
 import { ComponentProps } from 'react';
+import BSButton from 'react-bootstrap/Button';
+import Spinner from 'react-bootstrap/Spinner';
 import styled from 'styled-components';
-import { MetamaskState } from '../hooks';
-import { ReactComponent as FlaskFox } from '../assets/flask_fox.svg';
-import { shouldDisplayReconnectButton } from '../utils';
+import { ReactComponent as FlaskFox } from '../../assets/flask_fox.svg';
+import { MetamaskState } from '../../contexts/MetamaskContext';
+import { shouldDisplayReconnectButton } from '../../utils';
 
 const Link = styled.a`
   display: flex;
@@ -76,6 +78,23 @@ export const InstallFlaskButton = () => (
   </Link>
 );
 
+export const LinkButton = ({
+  link,
+  title,
+}: {
+  link: string;
+  title: string;
+}) => (
+  <BSButton
+    href={link}
+    variant="link"
+    style={{ textDecoration: 'none', marginRight: 24 }}
+    size="lg"
+  >
+    {title}
+  </BSButton>
+);
+
 export const ConnectButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button {...props}>
@@ -94,8 +113,15 @@ export const ReconnectButton = (props: ComponentProps<typeof Button>) => {
   );
 };
 
-export const SendHelloButton = (props: ComponentProps<typeof Button>) => {
-  return <Button {...props}>Send message</Button>;
+type ButtonProps = ComponentProps<typeof Button> & { loading?: boolean };
+
+export const SendHelloButton = ({ loading, ...props }: ButtonProps) => {
+  return (
+    <Button {...props}>
+      {loading && <Spinner animation="border" style={{ marginRight: 8 }} />}
+      {props.buttonText}
+    </Button>
+  );
 };
 
 export const HeaderButtons = ({

packages/site/src/components/Card.tsx → packages/site/src/components/base/Card.tsx

@@ -3,15 +3,19 @@ import styled from 'styled-components';
 
 type CardProps = {
   content: {
-    title?: string;
-    description: ReactNode;
-    button?: ReactNode;
+    title: string;
+    description: string;
+    form?: ReactNode;
+    button: ReactNode;
   };
   disabled?: boolean;
   fullWidth?: boolean;
 };
 
-const CardWrapper = styled.div<{ fullWidth?: boolean; disabled: boolean }>`
+const CardWrapper = styled.div<{
+  fullWidth?: boolean;
+  disabled: boolean;
+}>`
   display: flex;
   flex-direction: column;
   width: ${({ fullWidth }) => (fullWidth ? '100%' : '250px')};
@@ -40,19 +44,18 @@ const Title = styled.h2`
   }
 `;
 
-const Description = styled.div`
+const Description = styled.p`
   margin-top: 2.4rem;
   margin-bottom: 2.4rem;
 `;
 
 export const Card = ({ content, disabled = false, fullWidth }: CardProps) => {
-  const { title, description, button } = content;
+  const { title, description, button, form } = content;
   return (
     <CardWrapper fullWidth={fullWidth} disabled={disabled}>
-      {title && (
-        <Title>{title}</Title>
-      )}
+      <Title>{title}</Title>
       <Description>{description}</Description>
+      {form}
       {button}
     </CardWrapper>
   );

packages/site/src/components/Footer.tsx → packages/site/src/components/base/Footer.tsx

@@ -1,5 +1,5 @@
 import styled, { useTheme } from 'styled-components';
-import { ReactComponent as MetaMaskFox } from '../assets/metamask_fox.svg';
+import { ReactComponent as MetaMaskFox } from '../../assets/metamask_fox.svg';
 import { MetaMask } from './MetaMask';
 import { PoweredBy } from './PoweredBy';
 

packages/site/src/components/Header.tsx → packages/site/src/components/base/Header.tsx

@@ -1,8 +1,11 @@
 import { useContext } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { MetamaskActions, MetaMaskContext } from '../hooks';
-import { connectSnap, getSnap, getThemePreference } from '../utils';
-import { HeaderButtons } from './Buttons';
+import {
+  MetamaskActions,
+  MetaMaskContext,
+} from '../../contexts/MetamaskContext';
+import { connectSnap, getSnap, getThemePreference } from '../../utils';
+import { HeaderButtons, LinkButton } from './Buttons';
 import { SnapLogo } from './SnapLogo';
 import { Toggle } from './Toggle';
 
@@ -44,6 +47,8 @@ export const Header = ({
 }) => {
   const theme = useTheme();
   const [state, dispatch] = useContext(MetaMaskContext);
+  // eslint-disable-next-line no-negated-condition
+  const url = typeof window !== 'undefined' ? window.location.href : '';
 
   const handleConnectClick = async () => {
     try {
@@ -63,13 +68,17 @@ export const Header = ({
     <HeaderWrapper>
       <LogoWrapper>
         <SnapLogo color={theme.colors.icon.default} size={36} />
-        <Title>hedera-pulse-snap</Title>
+        <Title>identify-snap</Title>
       </LogoWrapper>
       <RightContainer>
         <Toggle
           onToggle={handleToggleClick}
           defaultChecked={getThemePreference()}
         />
+        <LinkButton
+          link={url.includes('/login') ? '/' : '/login'}
+          title={url.includes('/login') ? 'Main Page' : 'DID Auth Login'}
+        />
         <HeaderButtons state={state} onConnectClick={handleConnectClick} />
       </RightContainer>
     </HeaderWrapper>

packages/site/src/components/base/Modal.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useContext, useMemo } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import { ModalContext } from '../../contexts/ModalContext';
+
+const CustomModal = () => {
+  const { show, setShow, modalData } = useContext(ModalContext);
+
+  const handleClose = useCallback(() => setShow(false), [setShow]);
+
+  const content = useMemo(() => {
+    try {
+      const data = JSON.parse(modalData?.content || '');
+      return JSON.stringify(data, undefined, 2);
+    } catch (e) {
+      return modalData?.content;
+    }
+  }, [modalData]);
+
+  return (
+    <Modal show={show} onHide={handleClose} animation={false}>
+      <Modal.Header closeButton>
+        <Modal.Title>{modalData?.title}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <pre>{content}</pre>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export { CustomModal as Modal };

packages/site/src/components/base/TextInput.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const TextInput = styled.textarea<{
+  fullWidth?: boolean;
+}>`
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+`;