Develop

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',
 };

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>
+);

demo/with-rainbow/src/polyfills.ts

@@ -0,0 +1,4 @@
+import { Buffer } from 'buffer';
+
+window.Buffer = window.Buffer ?? Buffer;
+window.global = window.global ?? window;

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"]
     }
   },

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"]
     }
   },

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() ],

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",

packages/@justaname.id/react/src/lib/helpers/checkEnsValid/index.ts

@@ -0,0 +1,18 @@
+import { SubnameResponse } from '@justaname.id/sdk';
+
+export const checkEnsValid = (ens: SubnameResponse): void => {
+  if (
+    ens.records.resolverAddress === '0x0000000000000000000000000000000000000000'
+  ) {
+    throw new Error('Resolver address not found');
+  }
+
+  let ethAddress = null;
+  if (ens) {
+    ethAddress = ens?.records.coins?.find((coin) => coin.id === 60)?.value;
+
+    if (!ethAddress) {
+      throw new Error('ETH address not found');
+    }
+  }
+};

packages/@justaname.id/react/src/lib/hooks/primaryName/index.ts

@@ -1 +1,2 @@
 export * from './usePrimaryName';
+export * from './usePrimaryNameBatch';

packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts

@@ -59,18 +59,14 @@ export const usePrimaryName = (
 
     let name = '';
 
-    try {
-      const primaryNameGetByAddressResponse =
-        await justaname.subnames.getPrimaryNameByAddress({
-          address: params?.address,
-          chainId: _chainId,
-        });
-
+    const primaryNameGetByAddressResponse =
+      await justaname.subnames.getPrimaryNameByAddress({
+        address: params?.address,
+        chainId: _chainId,
+      });
+    if (primaryNameGetByAddressResponse.name) {
       name = primaryNameGetByAddressResponse.name;
-    } catch (error) {
-      /* empty */
-    }
-    if (!name) {
+    } else {
       const taskFn = () => {
         if (!params?.address) {
           throw new Error('Address is required');
@@ -110,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({

packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryNameBatch.ts

@@ -0,0 +1,169 @@
+import { Address } from 'viem';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChainId } from '@justaname.id/sdk';
+import { useJustaName } from '../../providers';
+import { useEnsPublicClient } from '../client/useEnsPublicClient';
+import { defaultOptions } from '../../query';
+import { batch, getName } from '@ensdomains/ensjs/public';
+import { buildPrimaryName } from './usePrimaryName';
+
+export const buildPrimaryNameBatchByAddressesKey = (
+  addresses: string[],
+  chainId: ChainId | undefined
+) => ['PRIMARY_NAME_BATCH', addresses, chainId];
+
+export const buildPrimaryNameBatchKey = (chainId: ChainId | undefined) => [
+  'ALL_PRIMARY_NAME_BATCH',
+  chainId,
+];
+
+export type PrimaryNameRecord = Record<string | Address, string | null>;
+
+export interface UsePrimaryNameBatchParams {
+  addresses?: Address[];
+  chainId?: ChainId;
+  enabled?: boolean;
+}
+
+export interface UsePrimaryNameBatchResult {
+  primaryNames: PrimaryNameRecord | undefined;
+  allPrimaryNames: PrimaryNameRecord | undefined;
+  isPrimaryNameBatchPending: boolean;
+  isPrimaryNameBatchFetching: boolean;
+  isPrimaryNameBatchLoading: boolean;
+  refetchPrimaryNameBatch: () => void;
+}
+
+export interface getPrimaryNameBatchParams {
+  addresses: Address[] | undefined;
+  chainId?: ChainId;
+}
+
+export const usePrimaryNameBatch = (
+  params?: UsePrimaryNameBatchParams
+): UsePrimaryNameBatchResult => {
+  const { chainId, justaname } = useJustaName();
+  const _enabled = params?.enabled !== undefined ? params.enabled : true;
+  const _chainId = params?.chainId || chainId;
+  const { ensClient } = useEnsPublicClient({
+    chainId: _chainId,
+  });
+  const queryClient = useQueryClient();
+
+  const getPrimaryNameBatch = async (
+    _params: getPrimaryNameBatchParams
+  ): Promise<PrimaryNameRecord> => {
+    if (!ensClient) {
+      throw new Error('Public client not found');
+    }
+
+    if (!params?.addresses || params?.addresses.length === 0) {
+      throw new Error('Address is required');
+    }
+
+    const primaryNameBatch: PrimaryNameRecord = params?.addresses.reduce(
+      (acc, address) => {
+        if (address) {
+          acc[address] = null;
+        }
+        return acc;
+      },
+      {} as PrimaryNameRecord
+    );
+
+    params?.addresses.forEach((address) => {
+      const primaryName = queryClient.getQueryData(
+        buildPrimaryName(address, _chainId)
+      );
+      if (typeof primaryName === 'string') {
+        primaryNameBatch[address] = primaryName;
+      }
+    });
+
+    let checkMissing = Object.keys(primaryNameBatch).filter(
+      (address) => primaryNameBatch[address] === null
+    );
+
+    const batchCalls = checkMissing?.map((address) =>
+      getName.batch({ address: address as Address })
+    );
+
+    const names = await batch(ensClient, ...batchCalls);
+
+    names.forEach((name, index) => {
+      if (name && name.name) {
+        primaryNameBatch[checkMissing[index]] = name?.name;
+      }
+    });
+
+    checkMissing = Object.keys(primaryNameBatch).filter(
+      (address) => primaryNameBatch[address] === null
+    );
+
+    const justanamePrimaryNames = await Promise.all(
+      checkMissing.map((address) =>
+        justaname.subnames.getPrimaryNameByAddress({
+          address: address,
+          chainId: _chainId,
+        })
+      )
+    );
+
+    justanamePrimaryNames.forEach((name, index) => {
+      if (name.name) {
+        primaryNameBatch[checkMissing[index]] = name.name;
+      } else {
+        primaryNameBatch[checkMissing[index]] = '';
+      }
+    });
+
+    Object.keys(primaryNameBatch).forEach((address) => {
+      queryClient.setQueryData(
+        buildPrimaryName(address, _chainId),
+        primaryNameBatch[address]
+      );
+    });
+
+    queryClient.setQueryData(
+      buildPrimaryNameBatchKey(_chainId),
+      (prev: PrimaryNameRecord) => ({
+        ...prev,
+        ...primaryNameBatch,
+      })
+    );
+
+    return primaryNameBatch;
+  };
+
+  const query = useQuery({
+    ...defaultOptions,
+    queryKey: buildPrimaryNameBatchByAddressesKey(
+      params?.addresses || [],
+      _chainId
+    ),
+    queryFn: () =>
+      getPrimaryNameBatch({
+        addresses: params?.addresses,
+      }),
+    enabled:
+      Boolean(params?.addresses) && Boolean(ensClient) && Boolean(_enabled),
+  });
+
+  const allQuery = useQuery({
+    ...defaultOptions,
+    queryKey: buildPrimaryNameBatchKey(_chainId),
+    queryFn: () => {
+      return {} as PrimaryNameRecord;
+    },
+    enabled: false,
+  });
+
+  return {
+    primaryNames: query.data,
+    isPrimaryNameBatchPending: query.isPending,
+    allPrimaryNames: allQuery.data,
+    isPrimaryNameBatchFetching: query.isFetching,
+    isPrimaryNameBatchLoading: query.isLoading,
+    refetchPrimaryNameBatch: query.refetch,
+  };
+};

packages/@justaname.id/react/src/lib/hooks/records/index.ts

@@ -1,2 +1,3 @@
 export * from './useRecords';
-export * from './useAvatar';
+export * from './useAvatar';
+export * from './useStandardRecordsBatch';

packages/@justaname.id/react/src/lib/hooks/records/records-task-queue.ts

@@ -1,3 +1,3 @@
 import TaskQueue from '../../queues';
 
-export const RecordsTaskQueue = new TaskQueue(3);
+export const RecordsTaskQueue = new TaskQueue(4);