xmtp · rygine · Dec 13, 2023 · Dec 5, 2023 · Dec 5, 2023 · Dec 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,31 +20,31 @@
   "scripts": {
     "build": "npm run build --workspaces",
     "lint": "npm run lint:eslint && npm run lint:misc --check",
-    "lint:eslint": "eslint . --cache --ext js,ts",
+    "lint:eslint": "npm run lint:eslint --workspace=site && npm run lint:eslint --workspace=@xmtp/snap",
     "lint:fix": "npm run lint:eslint --fix && npm run lint:misc --write",
     "lint:misc": "prettier '**/*.md' '!**/CHANGELOG.md' '**/*.yml' --ignore-path .gitignore",
     "start": "concurrently \"npm start --workspace=site\" \"npm start --workspace=@xmtp/snap\"",
     "test": "npm test --workspace=@xmtp/snap"
   },
   "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": "^12.2.0",
+    "@metamask/eslint-config-jest": "^12.1.0",
+    "@metamask/eslint-config-nodejs": "^12.1.0",
+    "@metamask/eslint-config-typescript": "^12.1.0",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "concurrently": "^8.2.0",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.2",
-    "eslint-plugin-jsdoc": "^39.2.9",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsdoc": "^43.0.7",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.2.1",
     "prettier-plugin-packagejson": "^2.2.18",
     "semantic-release": "^21.0.7",
-    "typescript": "^4.7.4"
+    "typescript": "^5.1.0"
   },
   "engines": {
     "node": ">=16.0.0"

diff --git a/packages/site/.eslintrc.js b/packages/site/.eslintrc.js
@@ -1,6 +1,12 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
-
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+  rules: {
+    'spaced-comment': 'off',
+    'import/unambiguous': 'off',
+  },
   overrides: [
     {
       files: ['**/*.{ts,tsx}'],
@@ -9,6 +15,5 @@ module.exports = {
       },
     },
   ],
-
   ignorePatterns: ['!.eslintrc.js', 'build/'],
 };
diff --git a/packages/site/gatsby-browser.tsx b/packages/site/gatsby-browser.tsx
diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts
diff --git a/packages/site/gatsby-ssr.tsx b/packages/site/gatsby-ssr.tsx
diff --git a/packages/site/index.html b/packages/site/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "license": "(MIT-0 OR Apache-2.0)",
   "scripts": {
-    "build": "cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby build",
+    "build": "vite build",
     "clean": "rimraf public",
     "lint": "npm run lint:eslint && npm run lint:misc --check",
     "lint:eslint": "eslint . --cache --ext js,ts",
-    "lint:fix": "npm run lint:eslint --fix && npm run lint:misc --write",
+    "lint:fix": "npm run lint:eslint -- --fix && npm run lint:misc -- --write",
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path .gitignore",
-    "start": "cross-env GATSBY_TELEMETRY_DISABLED=1 gatsby develop",
+    "start": "vite",
     "test": "echo TODO"
   },
   "browserslist": {
@@ -27,20 +27,21 @@
   },
   "dependencies": {
     "@metamask/providers": "^9.0.0",
-    "@xmtp/proto": "^3.28.0-beta.1",
-    "@xmtp/xmtp-js": "^11.0.0-beta.8",
+    "@xmtp/proto": "^3.34.0",
+    "@xmtp/xmtp-js": "^11.3.0-beta.13",
     "buffer": "^6.0.3",
     "ethers": "^6.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "styled-components": "5.3.3"
+    "styled-components": "5.3.3",
+    "vite-plugin-wasm": "^3.2.2"
   },
   "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": "^12.2.0",
+    "@metamask/eslint-config-jest": "^12.1.0",
+    "@metamask/eslint-config-nodejs": "^12.1.0",
+    "@metamask/eslint-config-typescript": "^12.1.0",
     "@svgr/webpack": "^6.4.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -52,13 +53,14 @@
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.2",
-    "eslint-plugin-jsdoc": "^39.2.9",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsdoc": "^43.0.7",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "gatsby": "^4.25.7",
@@ -68,6 +70,8 @@
     "prettier": "^2.2.1",
     "prettier-plugin-packagejson": "^2.2.18",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "^5.1.0",
+    "vite": "^4.4.12",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/packages/site/src/App.tsx b/packages/site/src/App.tsx
@@ -1,10 +1,12 @@
+// eslint-disable-next-line import/no-unassigned-import
 import './polyfills';
-import { FunctionComponent, ReactNode, useContext } from 'react';
+import type { FunctionComponent, ReactNode } from 'react';
+import { useContext } from 'react';
 import styled from 'styled-components';
-import { Footer, Header } from './components';
 
+import { Footer, Header } from './components';
 import { GlobalStyle } from './config/theme';
-import { ToggleThemeContext } from './Root';
+import { ToggleThemeContext } from './contexts/ToggleThemeContext';
 
 const Wrapper = styled.div`
   display: flex;

diff --git a/packages/site/src/components/Buttons.tsx b/packages/site/src/components/Buttons.tsx
@@ -1,7 +1,7 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import styled from 'styled-components';
-import { MetamaskState } from '../hooks';
-import { ReactComponent as FlaskFox } from '../assets/flask_fox.svg';
+
+import type { MetamaskState } from '../hooks';
 import { shouldDisplayReconnectButton } from '../utils';
 
 const Link = styled.a`
@@ -71,15 +71,13 @@ const ConnectedIndicator = styled.div`
 
 export const InstallFlaskButton = () => (
   <Link href="https://metamask.io/flask/" target="_blank">
-    <FlaskFox />
     <ButtonText>Install MetaMask Flask</ButtonText>
   </Link>
 );
 
 export const ConnectButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button {...props}>
-      <FlaskFox />
       <ButtonText>Connect</ButtonText>
     </Button>
   );
@@ -88,7 +86,6 @@ export const ConnectButton = (props: ComponentProps<typeof Button>) => {
 export const ReconnectButton = (props: ComponentProps<typeof Button>) => {
   return (
     <Button {...props}>
-      <FlaskFox />
       <ButtonText>Reconnect</ButtonText>
     </Button>
   );

diff --git a/packages/site/src/components/Card.tsx b/packages/site/src/components/Card.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import styled from 'styled-components';
 
 type CardProps = {
@@ -45,15 +45,19 @@ const Description = styled.div`
   margin-bottom: 2.4rem;
 `;
 
+const Actions = styled.div`
+  display: flex;
+  gap: 1.6rem;
+  flex-wrap: wrap;
+`;
+
 export const Card = ({ content, disabled = false, fullWidth }: CardProps) => {
   const { title, description, button } = content;
   return (
     <CardWrapper fullWidth={fullWidth} disabled={disabled}>
-      {title && (
-        <Title>{title}</Title>
-      )}
+      {title && <Title>{title}</Title>}
       <Description>{description}</Description>
-      {button}
+      <Actions>{button}</Actions>
     </CardWrapper>
   );
 };
diff --git a/packages/site/src/components/Footer.tsx b/packages/site/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import styled, { useTheme } from 'styled-components';
-import { ReactComponent as MetaMaskFox } from '../assets/metamask_fox.svg';
+
 import { MetaMask } from './MetaMask';
 import { PoweredBy } from './PoweredBy';
 
@@ -36,7 +36,6 @@ export const Footer = () => {
   return (
     <FooterWrapper>
       <PoweredByButton href="https://docs.metamask.io/" target="_blank">
-        <MetaMaskFox />
         <PoweredByContainer>
           <PoweredBy color={theme.colors.text.muted} />
           <MetaMask color={theme.colors.text.default} />

diff --git a/packages/site/src/components/ListConversations.tsx b/packages/site/src/components/ListConversations.tsx
@@ -1,20 +1,23 @@
-import { Client } from '@xmtp/xmtp-js';
-import { Card } from './Card';
-import { Button } from './Buttons';
+import type { Client } from '@xmtp/xmtp-js';
 import { useCallback } from 'react';
 
+import { Button } from './Buttons';
+import { Card } from './Card';
+
 export const ListConversations = ({ client }: { client: Client | null }) => {
   const handleListConversations = useCallback(async () => {
     if (!client) {
       return;
     }
     try {
       const conversations = await client.conversations.list();
-      alert(`Conversations: 
-
-        ${conversations.map((c) => c.peerAddress).join('\n')}`);
-    } catch (e) {
-      console.error(e);
+      const conversationsString = conversations
+        .map((convo) => convo.peerAddress)
+        .join('\n');
+      console.log('CONVERSATIONS =======================');
+      console.log(conversationsString);
+    } catch (error) {
+      console.error(error);
     }
   }, [client]);
 

diff --git a/packages/site/src/components/ListUserPreferences.tsx b/packages/site/src/components/ListUserPreferences.tsx
@@ -0,0 +1,45 @@
+import type { Client } from '@xmtp/xmtp-js';
+import { useCallback } from 'react';
+
+import { Button } from './Buttons';
+import { Card } from './Card';
+
+export const ListUserPreferences = ({ client }: { client: Client | null }) => {
+  const handleList = useCallback(async () => {
+    if (!client) {
+      return;
+    }
+    try {
+      const entries = await client.contacts.refreshConsentList();
+      const entriesString = entries
+        .map((entry) => `${entry.key}:${entry.permissionType}`)
+        .join('\n');
+      console.log('ENTRIES =======================');
+      console.log(entriesString);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [client]);
+
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <Card
+      content={{
+        title: 'List user preferences associated with connected client',
+        description: 'List user preferences',
+        button: (
+          <>
+            <Button onClick={handleList} disabled={!client}>
+              Execute
+            </Button>
+          </>
+        ),
+      }}
+      disabled={!client}
+      fullWidth={false}
+    />
+  );
+};