Hadi/xmtp plugin (#75)

* feat: basic but need to move to js sdk * feat: chat and getting the messages * fix: tabs css * feat: working on chat * feat: finalizing xmtp widget * fix: message textfield fix when replying * fix: xmtp build --------- Co-authored-by: anthony2399 <[email protected]>
JustaName-id · Nov 28, 2024 · aa8cecc · aa8cecc
1 parent c75715f
commit aa8cecc
Show file tree

Hide file tree

Showing 152 changed files with 6,831 additions and 134 deletions.
diff --git a/demo/with-rainbow/src/app/app.tsx b/demo/with-rainbow/src/app/app.tsx
@@ -14,6 +14,7 @@ import { WagmiProvider } from 'wagmi';
 import { mainnet, sepolia } from 'wagmi/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { EFPPlugin } from '@justweb3/efp-plugin';
+import { XMTPPlugin } from '@justweb3/xmtp-plugin';
 import { JustVerifiedPlugin } from '@justverified/plugin';
 
 const queryClient = new QueryClient();
@@ -35,7 +36,11 @@ const JustaNameConfig: JustWeb3ProviderConfig = {
     },
   ],
   openOnWalletConnect: true,
-  plugins: [EFPPlugin, JustVerifiedPlugin(['github', 'email', 'discord'])],
+  plugins: [
+    XMTPPlugin,
+    EFPPlugin,
+    JustVerifiedPlugin(['github', 'email', 'discord']),
+  ],
   dev: import.meta.env.VITE_APP_DEV === 'true',
   allowedEns: 'all',
 };

diff --git a/demo/with-rainbow/src/main.tsx b/demo/with-rainbow/src/main.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './app/app'
+import './polyfills';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app/app';
 import '@rainbow-me/rainbowkit/styles.css';
-import './index.css'
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/demo/with-rainbow/src/polyfills.ts b/demo/with-rainbow/src/polyfills.ts
@@ -0,0 +1,4 @@
+import { Buffer } from 'buffer';
+
+window.Buffer = window.Buffer ?? Buffer;
+window.global = window.global ?? window;
diff --git a/demo/with-rainbow/tsconfig.app.json b/demo/with-rainbow/tsconfig.app.json
@@ -13,6 +13,7 @@
       "@justweb3/ui": ["packages/@justweb3/ui"],
       "@justweb3/widget": ["packages/@justweb3/widget"],
       "@justweb3/efp-plugin": ["packages/@justweb3/efp-plugin"],
+      "@justweb3/xmtp-plugin": ["packages/@justweb3/xmtp-plugin"],
       "@justverified/plugin": ["packages/@justverified/plugin"]
     }
   },

diff --git a/demo/with-rainbow/tsconfig.json b/demo/with-rainbow/tsconfig.json
@@ -13,6 +13,7 @@
       "@justweb3/ui": ["packages/@justweb3/ui"],
       "@justweb3/widget": ["packages/@justweb3/widget"],
       "@justweb3/efp-plugin": ["packages/@justweb3/efp-plugin"],
+      "@justweb3/xmtp-plugin": ["packages/@justweb3/xmtp-plugin"],
       "@justverified/plugin": ["packages/@justverified/plugin"]
     }
   },

diff --git a/demo/with-rainbow/vite.config.ts b/demo/with-rainbow/vite.config.ts
@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 export default defineConfig({
   root: __dirname,
@@ -17,11 +18,8 @@ export default defineConfig({
     host: 'localhost',
   },
 
-  plugins: [react(), nxViteTsPaths()],
+  plugins: [nodePolyfills(), react(), nxViteTsPaths()],
 
-  define: {
-    process: { env: process.env },
-  },
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
@@ -51,6 +52,12 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@walletconnect/react-native-compat": "^2.11.2",
     "@web3modal/wagmi-react-native": "^1.2.0",
+    "@xmtp/content-type-reaction": "^1.1.11",
+    "@xmtp/content-type-read-receipt": "^1.1.12",
+    "@xmtp/content-type-remote-attachment": "^1.1.12",
+    "@xmtp/content-type-reply": "^1.1.12",
+    "@xmtp/react-sdk": "^9.0.0",
+    "@xmtp/xmtp-js": "^13.0.4",
     "axios": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "cors": "^2.8.5",
@@ -81,17 +88,19 @@
     "prism-react-renderer": "^2.4.0",
     "punycode": "^2.3.1",
     "qs": "^6.12.0",
-    "react": "18.3.1",
+    "react": "^18.3.1",
     "react-code-blocks": "^0.1.6",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-media-recorder-2": "^1.6.23",
     "react-native": "0.73.2",
     "react-native-svg": "14.1.0",
     "react-native-svg-transformer": "1.2.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-web": "~0.19.9",
     "react-router-dom": "6.11.2",
     "react-split": "^2.0.14",
+    "react-timer-hook": "^3.0.8",
     "react-tiny-popover": "^8.0.4",
     "siwe": "^2.3.2",
     "styled-components": "^6.1.12",

diff --git a/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts b/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts
@@ -106,6 +106,13 @@ export const usePrimaryName = (
 
   const query = useQuery({
     ...defaultOptions,
+    retry: (_count, error) => {
+      console.log('Error fetching primary name', error, _count);
+      if (error?.message.includes('PrimaryNameNotFound')) {
+        return false;
+      }
+      return _count < 3;
+    },
     queryKey: buildPrimaryName(params?.address || '', _chainId),
     queryFn: () =>
       getPrimaryName({

diff --git a/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts b/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts
@@ -239,7 +239,7 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => {
   return {
     isRecordsPending: query.isPending,
     isRecordsFetching: query.isFetching,
-    isRecordsLoading: query.isLoading,
+    isRecordsLoading: query.isPending || query.isFetching,
     records: query.data,
     getRecords: getRecordsInternal,
     refetchRecords: query.refetch,

diff --git a/packages/@justverified/plugin/src/lib/plugins/index.tsx b/packages/@justverified/plugin/src/lib/plugins/index.tsx
@@ -12,7 +12,6 @@ export const JustVerifiedPlugin = (
   mApp = 'justverified.eth'
 ): JustaPlugin => ({
   name: 'JustVerifiedPlugin',
-  // mApps: [mApp],
   components: {
     Provider: (pluginApi, children) => {
       const chainId = pluginApi.chainId;

diff --git a/packages/@justweb3/efp-plugin/src/lib/plugins/index.tsx b/packages/@justweb3/efp-plugin/src/lib/plugins/index.tsx
@@ -22,23 +22,5 @@ export const EFPPlugin: JustaPlugin = {
 
       return <FollowButton ens={ens} />;
     },
-    // SignInMenu: (pluginApi) => {
-    //   if (pluginApi.chainId !== 1) {
-    //     return null;
-    //   }
-    //   return (
-    //     <ClickableItem
-    //       title={'E.F.P'}
-    //       left={<EFPIcon width={20} />}
-    //       style={{
-    //         width: '100%',
-    //       }}
-    //       onClick={() => {
-    //         pluginApi.setState('efpOpen', true);
-    //       }}
-    //       right={<ArrowIcon width={20} />}
-    //     />
-    //   );
-    // },
   },
 };
diff --git a/packages/@justweb3/ui/.svgrrc.js b/packages/@justweb3/ui/.svgrrc.js
@@ -1,6 +1,10 @@
-module.exports ={
-  "typescript": true,
-  "template": require("./src/template/template.js"),
-  "dimensions": false,
-  "svgo": true
-}
+module.exports = {
+  typescript: true,
+  dimensions: false,
+  svgo: true,
+  replaceAttrValues: {
+    'var(--justweb3-primary-color)':
+      '{props.fill || "var(--justweb3-primary-color)"}',
+  },
+  template: require('./src/template/template.js'),
+};
diff --git a/packages/@justweb3/ui/project.json b/packages/@justweb3/ui/project.json
@@ -40,7 +40,7 @@
             "command": "node update-package-json.js"
           },
           {
-            "command": "rm -rf node_modules || rmdir /s /q node_modules"
+            "command": "npx rimraf node_modules"
           }
         ],
         "cwd": "packages/@justweb3/ui",

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Add.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Add.tsx
@@ -18,11 +18,14 @@ export default function Add(props: SVGProps<SVGSVGElement>) {
           maskType: 'alpha',
         }}
       >
-        <path fill="var(--justweb3-primary-color)" d="M0 .5h24v24H0z" />
+        <path
+          fill={props.fill || 'var(--justweb3-primary-color)'}
+          d="M0 .5h24v24H0z"
+        />
       </mask>
       <g mask="url(#add_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="M11 13.5H5v-2h6v-6h2v6h6v2h-6v6h-2z"
         />
       </g>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddCircle.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddCircle.tsx
@@ -22,14 +22,14 @@ export default function AddCircle(props: SVGProps<SVGSVGElement>) {
       </mask>
       <g mask="url(#add-circle_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="M9.929 10.571H6.5V9.43h3.429V6h1.142v3.429H14.5v1.142h-3.429V14H9.93z"
         />
         <circle
           cx={10.5}
           cy={10}
           r={8.5}
-          stroke="var(--justweb3-primary-color)"
+          stroke={props.fill || 'var(--justweb3-primary-color)'}
         />
       </g>
     </svg>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddFolder.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddFolder.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+export default function AddFolder(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 15 15"
+      {...props}
+    >
+      <mask
+        id="add-folder_svg__a"
+        width={15}
+        height={15}
+        x={0}
+        y={0}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="#D9D9D9" d="M0 0h15v15H0z" />
+      </mask>
+      <g mask="url(#add-folder_svg__a)">
+        <path
+          fill={props.fill || 'var(--justweb3-primary-color)'}
+          d="M8.75 10H10V8.75h1.25V7.5H10V6.25H8.75V7.5H7.5v1.25h1.25zM2.5 12.5q-.516 0-.883-.367a1.2 1.2 0 0 1-.367-.883v-7.5q0-.516.367-.883.368-.367.883-.367h3.75L7.5 3.75h5q.516 0 .883.367.367.368.367.883v6.25q0 .516-.367.883a1.2 1.2 0 0 1-.883.367z"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddImage.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddImage.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+export default function AddImage(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 15 15"
+      {...props}
+    >
+      <mask
+        id="add-image_svg__a"
+        width={15}
+        height={15}
+        x={0}
+        y={0}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="#D9D9D9" d="M0 0h15v15H0z" />
+      </mask>
+      <g mask="url(#add-image_svg__a)">
+        <path
+          fill={props.fill || 'var(--justweb3-primary-color)'}
+          d="M3.125 13.125q-.516 0-.883-.367a1.2 1.2 0 0 1-.367-.883v-8.75q0-.516.367-.883.368-.367.883-.367H8.75V5H10v1.25h3.125v5.625q0 .516-.367.883a1.2 1.2 0 0 1-.883.367zm.625-2.5h7.5L8.906 7.5 7.031 10 5.625 8.125zm6.875-5v-1.25h-1.25v-1.25h1.25v-1.25h1.25v1.25h1.25v1.25h-1.25v1.25z"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddVideo.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddVideo.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from 'react';
+export default function AddVideo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 15 15"
+      {...props}
+    >
+      <mask
+        id="add-video_svg__a"
+        width={15}
+        height={15}
+        x={0}
+        y={0}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="#D9D9D9" d="M0 0h15v15H0z" />
+      </mask>
+      <g mask="url(#add-video_svg__a)">
+        <path
+          fill={props.fill || 'var(--justweb3-primary-color)'}
+          d="M5.625 10h1.25V8.125H8.75v-1.25H6.875V5h-1.25v1.875H3.75v1.25h1.875zM2.5 12.5q-.516 0-.883-.367a1.2 1.2 0 0 1-.367-.883v-7.5q0-.516.367-.883.368-.367.883-.367H10q.516 0 .883.367.367.368.367.883v2.813l2.5-2.5v6.875l-2.5-2.5v2.812q0 .516-.367.883A1.2 1.2 0 0 1 10 12.5z"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Address.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Address.tsx
@@ -22,7 +22,7 @@ export default function Address(props: SVGProps<SVGSVGElement>) {
       </mask>
       <g mask="url(#address_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="M3.833 19.167V17.5h13.334v1.667zm0-16.667V.833h13.334V2.5zm6.667 8.333a2.4 2.4 0 0 0 1.77-.729q.73-.729.73-1.77 0-1.042-.73-1.771a2.4 2.4 0 0 0-1.77-.73 2.4 2.4 0 0 0-1.77.73A2.4 2.4 0 0 0 8 8.333q0 1.042.73 1.771a2.4 2.4 0 0 0 1.77.73m-6.667 5.834q-.687 0-1.177-.49A1.6 1.6 0 0 1 2.166 15V5q0-.687.49-1.177.491-.49 1.177-.49h13.334q.687 0 1.177.49T18.834 5v10q0 .687-.49 1.177t-1.177.49zM5.292 15h10.416a6.76 6.76 0 0 0-2.27-1.833Q12.103 12.5 10.5 12.5q-1.605 0-2.937.667A6.76 6.76 0 0 0 5.292 15"
         />
       </g>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Arrow.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Arrow.tsx
@@ -22,7 +22,7 @@ export default function Arrow(props: SVGProps<SVGSVGElement>) {
       </mask>
       <g mask="url(#arrow_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="m5.516 14.25-1.11-1.11L9.546 8l-5.14-5.14 1.11-1.11L11.766 8z"
         />
       </g>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Attachment.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Attachment.tsx
@@ -22,7 +22,7 @@ export default function Attachment(props: SVGProps<SVGSVGElement>) {
       </mask>
       <g mask="url(#attachment_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="M15.5 13.125q0 2.166-1.52 3.688-1.522 1.52-3.688 1.52t-3.688-1.52q-1.52-1.521-1.52-3.688V5.417q0-1.562 1.093-2.657 1.095-1.093 2.656-1.093 1.563 0 2.656 1.093 1.095 1.094 1.094 2.657v7.291q0 .959-.666 1.625a2.2 2.2 0 0 1-1.625.667q-.96 0-1.625-.667A2.2 2.2 0 0 1 8 12.708V5h1.667v7.708a.607.607 0 0 0 .625.625.607.607 0 0 0 .625-.625V5.417a2.1 2.1 0 0 0-.615-1.48 1.98 1.98 0 0 0-1.469-.604q-.875 0-1.479.604a2.01 2.01 0 0 0-.604 1.48v7.708q-.021 1.48 1.02 2.51 1.042 1.032 2.522 1.032 1.458 0 2.479-1.032 1.02-1.03 1.062-2.51V5H15.5z"
         />
       </g>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Avatar.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Avatar.tsx
@@ -22,7 +22,7 @@ export default function Avatar(props: SVGProps<SVGSVGElement>) {
       </mask>
       <g mask="url(#avatar_svg__a)">
         <path
-          fill="var(--justweb3-primary-color)"
+          fill={props.fill || 'var(--justweb3-primary-color)'}
           d="M2.615 8.897V7.126l3.771-3.771h1.77zm0-4.084V3.355h1.459zm10.98 1.396a7 7 0 0 0-.449-.448 4 4 0 0 0-.49-.385l2.022-2.021h1.77zm-8.896 7.125 1.604-1.604q.146.23.302.417a3 3 0 0 0 .344.354q-.584.146-1.178.364a9 9 0 0 0-1.072.47m10-4.104v-.042q0-.395-.063-.77a4.3 4.3 0 0 0-.187-.73l3.166-3.166v1.791zm-5.5-4.542 1.354-1.333h1.77L10.99 4.688a6 6 0 0 0-.437-.062 5.06 5.06 0 0 0-1.354.063m-6.584 8.355v-1.771l3-3a5 5 0 0 0-.083.916 4.4 4.4 0 0 0 .083.854zm14.771 1.729a3.797 3.797 0 0 0-.854-.896l1.083-1.083v1.77zm-2.417-1.709a5 5 0 0 0-.583-.208l-.364-.125a3 3 0 0 0-.365-.104l3.958-3.98v1.792zm-4.854-.541a3.2 3.2 0 0 1-2.354-.98 3.2 3.2 0 0 1-.98-2.354q0-1.374.98-2.354a3.2 3.2 0 0 1 2.354-.979 3.2 3.2 0 0 1 2.354.98 3.2 3.2 0 0 1 .98 2.353 3.2 3.2 0 0 1-.98 2.355 3.2 3.2 0 0 1-2.354.979M3.45 18.355v-1.48q0-.707.354-1.312a2.3 2.3 0 0 1 .979-.916q1.062-.542 2.406-.917t2.927-.375 2.927.375 2.407.917q.624.313.979.916.354.604.354 1.313v1.479z"
         />
       </g>

diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Banner.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Banner.tsx
@@ -8,7 +8,7 @@ export default function Banner(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <path
-        fill="var(--justweb3-primary-color)"
+        fill={props.fill || 'var(--justweb3-primary-color)'}
         fillRule="evenodd"
         d="M2.115 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm1 2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"
         clipRule="evenodd"