diff --git a/demo/with-rainbow/src/app/app.tsx b/demo/with-rainbow/src/app/app.tsx index 073f4722..af04f9bf 100644 --- 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 index 9526fa36..c1f6bf6d 100644 --- 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( - , -) + +); diff --git a/demo/with-rainbow/src/polyfills.ts b/demo/with-rainbow/src/polyfills.ts new file mode 100644 index 00000000..38b13be9 --- /dev/null +++ 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 index 38eaf770..3814d16b 100644 --- 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 index ecd7c3f7..7b44c3dc 100644 --- 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 index 7220dc2b..e4c5f14c 100644 --- 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 index 80cc42e6..01cf32bb 100644 --- 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,10 +88,11 @@ "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", @@ -92,6 +100,7 @@ "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/helpers/checkEnsValid/index.ts b/packages/@justaname.id/react/src/lib/helpers/checkEnsValid/index.ts new file mode 100644 index 00000000..42d277f5 --- /dev/null +++ b/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'); + } + } +}; diff --git a/packages/@justaname.id/react/src/lib/hooks/primaryName/index.ts b/packages/@justaname.id/react/src/lib/hooks/primaryName/index.ts index 28967fe6..23ada419 100644 --- a/packages/@justaname.id/react/src/lib/hooks/primaryName/index.ts +++ b/packages/@justaname.id/react/src/lib/hooks/primaryName/index.ts @@ -1 +1,2 @@ export * from './usePrimaryName'; +export * from './usePrimaryNameBatch'; diff --git a/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts b/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts index 553603e7..aff748e2 100644 --- a/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryName.ts +++ b/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({ diff --git a/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryNameBatch.ts b/packages/@justaname.id/react/src/lib/hooks/primaryName/usePrimaryNameBatch.ts new file mode 100644 index 00000000..ddd06a45 --- /dev/null +++ b/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; + +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 => { + 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, + }; +}; diff --git a/packages/@justaname.id/react/src/lib/hooks/records/index.ts b/packages/@justaname.id/react/src/lib/hooks/records/index.ts index 173e15c1..7dd0eee0 100644 --- a/packages/@justaname.id/react/src/lib/hooks/records/index.ts +++ b/packages/@justaname.id/react/src/lib/hooks/records/index.ts @@ -1,2 +1,3 @@ export * from './useRecords'; -export * from './useAvatar'; \ No newline at end of file +export * from './useAvatar'; +export * from './useStandardRecordsBatch'; diff --git a/packages/@justaname.id/react/src/lib/hooks/records/records-task-queue.ts b/packages/@justaname.id/react/src/lib/hooks/records/records-task-queue.ts index da776568..6723f744 100644 --- a/packages/@justaname.id/react/src/lib/hooks/records/records-task-queue.ts +++ b/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); diff --git a/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts b/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts index 05318f7e..58557c3b 100644 --- a/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts +++ b/packages/@justaname.id/react/src/lib/hooks/records/useRecords.ts @@ -7,19 +7,27 @@ import { } from '@tanstack/react-query'; import { ChainId, + coinTypeMap, + generalKeys, SanitizedRecords, sanitizeRecords, SubnameRecordsRoute, + SUPPORTED_SOCIALS, } from '@justaname.id/sdk'; import { useMemo } from 'react'; import { Records } from '../../types'; import { defaultOptions } from '../../query'; import { RecordsTaskQueue } from './records-task-queue'; +import { checkEnsValid } from '../../helpers/checkEnsValid'; +import { useEnsPublicClient } from '../client/useEnsPublicClient'; +import { useOffchainResolvers } from '../offchainResolver'; +import { getRecords as getEnsRecords } from '@ensdomains/ensjs/public'; export const buildRecordsBySubnameKey = ( subname: string, - chainId: ChainId | undefined -) => ['RECORDS_BY_SUBNAME', subname, chainId]; + chainId: ChainId | undefined, + standard = false +) => ['RECORDS_BY_SUBNAME', subname, chainId, standard]; export interface GetRecordsResult { rawRecords: SubnameRecordsRoute['response'] | undefined; @@ -31,11 +39,13 @@ export interface UseRecordsParams ens?: string | undefined; enabled?: boolean; skipQueue?: boolean; + // standard?: boolean; } export interface GetRecordsParams extends Omit { ens: string; + // standard?: boolean; skipQueue?: boolean; } @@ -62,6 +72,10 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => { () => params?.chainId || chainId, [params?.chainId, chainId] ); + const { offchainResolvers } = useOffchainResolvers(); + const { ensClient } = useEnsPublicClient({ + chainId: _chainId, + }); const _networks = useMemo( () => networks.find((network) => network.chainId === _chainId), @@ -78,26 +92,57 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => { chainId: _params.chainId, }); - if ( - result.records.resolverAddress === - '0x0000000000000000000000000000000000000000' - ) { - throw new Error('Resolver address not found'); - } + checkEnsValid(result); - let ethAddress = null; - if (result) { - ethAddress = result?.records.coins?.find((coin) => coin.id === 60)?.value; + const sanitized = sanitizeRecords(result); - if (!ethAddress) { - throw new Error('ETH address not found'); - } + return { + ...result, + sanitizedRecords: sanitized, + }; + }; + + const getStandardRecords = async ( + _params: SubnameRecordsRoute['params'] + ): Promise => { + if (!ensClient) { + throw new Error('Public client not found'); } - const sanitized = sanitizeRecords(result); + const result = await getEnsRecords(ensClient, { + name: _params.ens, + coins: Object.keys(coinTypeMap), + texts: [ + ...generalKeys, + ...SUPPORTED_SOCIALS.map((social) => social.identifier), + ], + contentHash: true, + }); + + const __chainId = _params?.chainId || _chainId; + + const offchainResolver = offchainResolvers?.offchainResolvers?.find( + (resolver) => resolver.chainId === __chainId + ); + + const record = { + ens: _params.ens, + isJAN: result.resolverAddress === offchainResolver?.resolverAddress, + records: { + ...result, + contentHash: { + protocolType: result.contentHash?.protocolType || '', + decoded: result.contentHash?.decoded || '', + }, + }, + }; + + checkEnsValid(record); + + const sanitized = sanitizeRecords(record); return { - ...result, + ...record, sanitizedRecords: sanitized, }; }; @@ -106,15 +151,18 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => { _params: GetRecordsParams, forceUpdate = false ): Promise => { + const __chainId = _params?.chainId || _chainId; + // const __standard = _params?.standard || params?.standard; + const __standard = false; if (!forceUpdate) { const cachedRecords = queryClient.getQueryData( - buildRecordsBySubnameKey(_params?.ens, _params?.chainId || _chainId) + buildRecordsBySubnameKey(_params?.ens, __chainId, __standard) ) as Records; if (cachedRecords) { return cachedRecords; } } - const __chainId = _params?.chainId || _chainId; + const __networks = networks.find( (network) => network.chainId === __chainId ); @@ -124,23 +172,43 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => { throw new Error('ChainId not found'); } - const taskFn = () => { - return getRecords({ - ens: _params.ens, - chainId: __chainId, - providerUrl: __providerUrl, - }); + const taskFn = async () => { + let records: Records; + try { + records = await getRecords({ + ens: _params.ens, + chainId: __chainId, + providerUrl: __providerUrl, + }); + } catch (error) { + records = await getStandardRecords({ + ens: _params.ens, + chainId: __chainId, + providerUrl: __providerUrl, + }); + } + + return records; }; let records: Records; + + // if (__standard) { + // records = await getStandardRecords({ + // ens: _params.ens, + // chainId: __chainId, + // providerUrl: __providerUrl, + // }); + // } else { if (__skipQueue) { records = await taskFn(); } else { records = await RecordsTaskQueue.enqueue(taskFn); } + // } queryClient.setQueryData( - buildRecordsBySubnameKey(_params.ens, __chainId), + buildRecordsBySubnameKey(_params.ens, __chainId, __standard), records ); return records; @@ -148,7 +216,11 @@ export const useRecords = (params?: UseRecordsParams): UseRecordsResult => { const query = useQuery({ ...defaultOptions, - queryKey: buildRecordsBySubnameKey(params?.ens || '', _chainId), + queryKey: buildRecordsBySubnameKey( + params?.ens || '', + _chainId + // params?.standard + ), queryFn: () => getRecordsInternal( { @@ -167,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/@justaname.id/react/src/lib/hooks/records/useStandardRecordsBatch.ts b/packages/@justaname.id/react/src/lib/hooks/records/useStandardRecordsBatch.ts new file mode 100644 index 00000000..e1396df4 --- /dev/null +++ b/packages/@justaname.id/react/src/lib/hooks/records/useStandardRecordsBatch.ts @@ -0,0 +1,257 @@ +import { useJustaName } from '../../providers'; +import { + QueryObserverResult, + RefetchOptions, + useQuery, + useQueryClient, +} from '@tanstack/react-query'; +import { + ChainId, + coinTypeMap, + generalKeys, + sanitizeRecords, + SUPPORTED_SOCIALS, +} from '@justaname.id/sdk'; +import { useMemo } from 'react'; +import { Records } from '../../types'; +import { defaultOptions } from '../../query'; +import { buildRecordsBySubnameKey, useRecords } from './useRecords'; +import { useEnsPublicClient } from '../client/useEnsPublicClient'; +import { Address } from 'viem'; +import { + batch, + getRecords as getEnsRecords, + getResolver, +} from '@ensdomains/ensjs/public'; +import { checkEnsValid } from '../../helpers/checkEnsValid'; +import { useOffchainResolvers } from '../offchainResolver'; + +export const buildStandardRecordsBatchByEnsesKey = ( + enses: string[], + chainId: ChainId | undefined +) => ['ALL_RECORDS_BY_ENSES', enses, chainId]; + +export const buildStandardRecordsBatchKey = (chainId: ChainId | undefined) => [ + 'ALL_RECORDS', + chainId, +]; + +export type RecordsRecord = Record; + +export interface UseStandardRecordsBatchParams { + enses?: string[] | undefined; + chainId?: ChainId | undefined; + enabled?: boolean; +} + +export interface getStandardRecordsBatchParams { + enses: string[] | undefined; + chainId?: ChainId; +} + +export interface UseStandardRecordsBatchResult { + isStandardRecordsBatchPending: boolean; + isStandardRecordsBatchFetching: boolean; + isStandardRecordsBatchLoading: boolean; + recordsBatch: RecordsRecord | undefined; + allRecordsBatch: RecordsRecord | undefined; + refetchStandardRecordsBatch: ( + options?: RefetchOptions | undefined + ) => Promise>; +} + +export const useStandardRecordsBatch = ( + params?: UseStandardRecordsBatchParams +): UseStandardRecordsBatchResult => { + const { chainId, networks } = useJustaName(); + const queryClient = useQueryClient(); + const { offchainResolvers } = useOffchainResolvers(); + const { getRecords } = useRecords(); + const _enabled = params?.enabled !== undefined ? params.enabled : true; + const _chainId = useMemo( + () => params?.chainId || chainId, + [params?.chainId, chainId] + ); + const { ensClient } = useEnsPublicClient({ + chainId: _chainId, + }); + const _networks = useMemo( + () => networks.find((network) => network.chainId === _chainId), + [_chainId, networks] + ); + const _providerUrl = useMemo(() => _networks?.providerUrl, [_networks]); + + const getStandardRecordsBatch = async ( + _params: getStandardRecordsBatchParams + ): Promise => { + if (!ensClient) { + throw new Error('Public client not found'); + } + + const enses = + params?.enses?.filter((ens) => ens !== undefined && ens !== '') || []; + if (!params?.enses || enses.length === 0) { + throw new Error('Enses is required'); + } + + const __chainId = _params?.chainId || _chainId; + + const offchainResolver = offchainResolvers?.offchainResolvers?.find( + (resolver) => resolver.chainId === __chainId + ); + + const recordsBatch: RecordsRecord = enses?.reduce((acc, ens) => { + if (ens) { + acc[ens] = undefined; + } + return acc; + }, {} as RecordsRecord); + + enses.forEach((ensName) => { + const ens = queryClient.getQueryData( + buildRecordsBySubnameKey(ensName, _chainId, true) + ); + if (ens) { + recordsBatch[ensName] = ens as Records; + } else { + recordsBatch[ensName] = undefined; + } + }); + + const checkMissing = Object.keys(recordsBatch).filter( + (ensName) => recordsBatch[ensName] === undefined + ); + + const resolverAddressesCalls = checkMissing?.map((ensName) => + getResolver.batch({ name: ensName }) + ); + + const resolverAddresses = await batch(ensClient, ...resolverAddressesCalls); + + const ensIsJAN = resolverAddresses?.map( + (result) => result === offchainResolver?.resolverAddress + ); + + const janEns = checkMissing?.filter((_, index) => ensIsJAN[index]); + + const nonJanEns = checkMissing?.filter((_, index) => !ensIsJAN[index]); + + const batchCalls = nonJanEns?.map((ensName) => + getEnsRecords.batch({ + name: ensName, + coins: Object.keys(coinTypeMap), + texts: [ + ...generalKeys, + ...SUPPORTED_SOCIALS.map((social) => social.identifier), + ], + contentHash: true, + }) + ); + + const batchJanCalls = janEns?.map((ensName) => + getRecords({ + ens: ensName, + chainId: _chainId, + }) + ); + + const ensRecords = await batch(ensClient, ...batchCalls); + + const janRecords = await Promise.all(batchJanCalls); + + ensRecords.forEach((result, index) => { + if (result) { + const record = { + ens: checkMissing[index], + isJAN: result.resolverAddress === offchainResolver?.resolverAddress, + records: { + ...result, + contentHash: { + protocolType: result.contentHash?.protocolType || '', + decoded: result.contentHash?.decoded || '', + }, + }, + }; + + checkEnsValid(record); + + const sanitized = sanitizeRecords(record); + + recordsBatch[checkMissing[index]] = { + ...record, + sanitizedRecords: sanitized, + }; + } else { + recordsBatch[checkMissing[index]] = undefined; + } + }); + + janRecords.forEach((result, index) => { + if (result) { + recordsBatch[janEns[index]] = result; + } else { + recordsBatch[janEns[index]] = undefined; + } + }); + + Object.keys(recordsBatch).forEach((ensName) => { + queryClient.setQueryData( + buildRecordsBySubnameKey(ensName, _chainId, true), + recordsBatch[ensName] + ); + }); + + queryClient.setQueryData( + buildStandardRecordsBatchKey(_chainId), + (old: RecordsRecord) => { + return { + ...old, + ...recordsBatch, + }; + } + ); + + return recordsBatch; + }; + + const query = useQuery({ + ...defaultOptions, + queryKey: buildStandardRecordsBatchByEnsesKey( + params?.enses || [], + _chainId + ), + queryFn: () => + getStandardRecordsBatch({ + enses: params?.enses || [], + chainId: _chainId, + }), + enabled: + Boolean(params?.enses && params?.enses?.length > 0) && + Boolean(_chainId) && + Boolean(_providerUrl) && + Boolean(_enabled), + }); + + const allQuery = useQuery({ + ...defaultOptions, + queryKey: buildStandardRecordsBatchKey(_chainId), + queryFn: () => { + return {} as RecordsRecord; + }, + enabled: false, + }); + + return { + isStandardRecordsBatchPending: query.isPending, + isStandardRecordsBatchFetching: query.isFetching, + isStandardRecordsBatchLoading: query.isLoading, + recordsBatch: query.data, + allRecordsBatch: allQuery.data, + refetchStandardRecordsBatch: query.refetch, + }; +}; + +// +// export const useStandardRecordsBatch = () => { +// throw new Error('Not implemented'); +// }; diff --git a/packages/@justaname.id/sdk/src/lib/utils/sanitizeRecords/index.ts b/packages/@justaname.id/sdk/src/lib/utils/sanitizeRecords/index.ts index fb347232..6b06dda3 100644 --- a/packages/@justaname.id/sdk/src/lib/utils/sanitizeRecords/index.ts +++ b/packages/@justaname.id/sdk/src/lib/utils/sanitizeRecords/index.ts @@ -29,7 +29,7 @@ export interface SanitizedRecords { contentHash: ContentHash | null; } -const generalKeys = [ +export const generalKeys = [ 'avatar', 'banner', 'header', diff --git a/packages/@justverified/plugin/src/lib/hooks/useVerifyRecords/index.ts b/packages/@justverified/plugin/src/lib/hooks/useVerifyRecords/index.ts index 5c7cebea..ee7a9fc7 100644 --- a/packages/@justverified/plugin/src/lib/hooks/useVerifyRecords/index.ts +++ b/packages/@justverified/plugin/src/lib/hooks/useVerifyRecords/index.ts @@ -9,10 +9,11 @@ import { Credentials, } from '../../types'; import { useQuery } from '@tanstack/react-query'; -import { useRecords } from '@justaname.id/react'; +import { useJustaName, useRecords } from '@justaname.id/react'; import { useEffect } from 'react'; import usePreviousState from '../usePreviousState'; import isEqual from 'lodash/isEqual'; +import { VerifyResponse } from '../../types/verify-response'; export const buildVerifyRecordsKey = ( credentials: Credentials[], @@ -34,26 +35,24 @@ export const buildVerifyRecordsKey = ( export const verifyRecords = async ( ens: string, credentials: Credentials[], - chainId: ChainId, + providerUrl: string, matchStandard = false, issuer = 'justverified.eth', backendUrl = 'https://api.justaname.id/verifications/v1' ) => { - const response = await axios.get<{ - records: Partial>; - }>( + const response = await axios.get( `${backendUrl}/verify-records?${qs.stringify({ credentials: credentials.map( (credential) => CredentialMetadataKeyStandard[credential] ), - ens, - chainId, + ens: ens, + providerUrl, matchStandard, issuer, })}` ); - const records = response.data.records as Record< + const records = response.data[0].credentials as Record< CredentialMetadataKey, boolean >; @@ -95,6 +94,8 @@ export const useVerifyRecords = ({ verificationBackendUrl = 'https://api.justaname.id/verifications/v1', mApp = 'justverified.eth', }: UseVerifyRecordsParams) => { + const { networks } = useJustaName(); + const _network = networks.find((network) => network.chainId === chainId); const { records } = useRecords({ ens: ens, chainId: chainId, @@ -114,7 +115,7 @@ export const useVerifyRecords = ({ const credentialVerifications = await verifyRecords( ens, credentials, - chainId, + _network?.providerUrl as string, matchStandard, mApp, verificationBackendUrl diff --git a/packages/@justverified/plugin/src/lib/plugins/index.tsx b/packages/@justverified/plugin/src/lib/plugins/index.tsx index 6ff52931..0c3462ff 100644 --- 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; @@ -71,10 +70,21 @@ export const JustVerifiedPlugin = ( return; } + let providerUrl = pluginApi?.config?.networks?.find( + (network) => network.chainId === chainId + )?.providerUrl; + + if (!providerUrl) { + providerUrl = + chainId === 1 + ? 'https://cloudflare-eth.com' + : 'https://rpc.sepolia.org'; + } + const verifiableRecords = await verifyRecords( ens, credentials, - chainId, + providerUrl, false, mApp, verificationBackendUrl @@ -85,16 +95,6 @@ export const JustVerifiedPlugin = ( } pluginApi.setState('verificationOpen', true); - - // setTimeout(() => { - // if ( - // canEnableMApps && - // !enabledMApps.includes('justverified.eth') && - // !Object.values(verifiableRecords).some((value) => value) - // ) { - // pluginApi.handleOpenAuthorizeMAppDialog(mApp, true); - // } - // }, 1000); }, onEnsSignOut: (pluginApi, ens) => { pluginApi.setState('verificationOpen', false); diff --git a/packages/@justverified/plugin/src/lib/types/verify-response/index.ts b/packages/@justverified/plugin/src/lib/types/verify-response/index.ts new file mode 100644 index 00000000..2099e981 --- /dev/null +++ b/packages/@justverified/plugin/src/lib/types/verify-response/index.ts @@ -0,0 +1,6 @@ +import { CredentialMetadataKey } from '../credentials'; + +export type VerifyResponse = { + credentials: Partial>; + ens: string; +}[]; diff --git a/packages/@justverified/plugin/src/stories/justverified.stories.tsx b/packages/@justverified/plugin/src/stories/justverified.stories.tsx index f7c623c1..e541a041 100644 --- a/packages/@justverified/plugin/src/stories/justverified.stories.tsx +++ b/packages/@justverified/plugin/src/stories/justverified.stories.tsx @@ -31,8 +31,12 @@ const JustWeb3Config: JustWeb3ProviderConfig = { backendUrl: import.meta.env.STORYBOOK_APP_BACKEND_URL, networks: [ { - providerUrl: import.meta.env.STORYBOOK_APP_PROVIDER_URL, - chainId: parseInt(import.meta.env.STORYBOOK_APP_CHAIN_ID) as ChainId, + providerUrl: import.meta.env.STORYBOOK_APP_MAINNET_PROVIDER_URL, + chainId: 1, + }, + { + providerUrl: import.meta.env.STORYBOOK_APP_SEPOLIA_PROVIDER_URL, + chainId: 11155111, }, ], ensDomains: [ @@ -47,7 +51,7 @@ const JustWeb3Config: JustWeb3ProviderConfig = { disableOverlay: true, plugins: [ JustVerifiedPlugin( - ['email', 'twitter', 'github', 'discord', 'telegram'], + ['twitter', 'github', 'discord'], // 'http://localhost:3009/verifications/v1' 'https://api-staging.justaname.id/verifications/v1' ), diff --git a/packages/@justweb3/efp-plugin/src/lib/components/EFPTab/index.tsx b/packages/@justweb3/efp-plugin/src/lib/components/EFPTab/index.tsx index 2bf4f2ba..0d836105 100644 --- a/packages/@justweb3/efp-plugin/src/lib/components/EFPTab/index.tsx +++ b/packages/@justweb3/efp-plugin/src/lib/components/EFPTab/index.tsx @@ -1,133 +1,49 @@ -import { useFollowing } from '../../hooks/useFollowing'; -import { useFollowers, useStats } from '../../hooks'; -import { FC, useEffect, useMemo, useRef, useState } from 'react'; +import { useStats } from '../../hooks'; +import { FC, useEffect, useState } from 'react'; import { Flex, LoadingSpinner, P } from '@justweb3/ui'; -import { JustEnsCard, useInfiniteScroll } from '@justweb3/widget'; +import { FollowingTab } from '../FollowingTab'; +import { FollowersTab } from '../FollowersTab'; export interface EFPTabProps { ens: string; } export const EFPTab: FC = ({ ens }) => { - const [tab, setTab] = useState<'following' | 'followers'>('following'); - const followingContainerRef = useRef(null); - const followersContainerRef = useRef(null); - - const { - following, - fetchMoreFollowing, - isFollowingLoading, - isFollowingFetching, - hasMoreFollowing, - } = useFollowing({ - addressOrEns: ens, - }); - - const followingFlat = useMemo(() => { - return following?.pages.flatMap((follow) => follow.following); - }, [following]); - - const { - followers, - fetchMoreFollowers, - isFollowersLoading, - isFollowersFetching, - hasMoreFollowers, - } = useFollowers({ - addressOrEns: ens, - }); - - const followersFlat = useMemo(() => { - return followers?.pages.flatMap((follow) => follow.followers); - }, [followers]); - - useInfiniteScroll( - followersContainerRef, - fetchMoreFollowers, - tab === 'followers' && !isFollowersLoading && hasMoreFollowers, - 50 - ); - - useInfiniteScroll( - followingContainerRef, - fetchMoreFollowing, - tab === 'following' && !isFollowingLoading && hasMoreFollowing, - 50 - ); + const [tab, setTab] = useState< + 'following' | 'followers' | 'none' | 'loading' + >('loading'); const { stats, isStatsLoading } = useStats({ addressOrEns: ens, }); - const [nbOfCardsPerFollowingRow, setNbOfCardsPerFollowingRow] = useState(0); useEffect(() => { - const element = followingContainerRef.current; - - if (!element) return; - - const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - if (entry.contentRect) { - const width = entry.contentRect.width; - let nbOfCardsPerRowTemp = Math.floor(width / 335); - if (nbOfCardsPerRowTemp < 1) { - nbOfCardsPerRowTemp = 1; - } - setNbOfCardsPerFollowingRow(nbOfCardsPerRowTemp); - } - } - }); - - resizeObserver.observe(element); - - return () => { - resizeObserver.unobserve(element); // Cleanup observer on unmount - }; - }, [followingContainerRef, isStatsLoading, tab]); - - const [nbOfCardsPerFollowersRow, setNbOfCardsPerFollowersRow] = useState(0); - useEffect(() => { - const element = followersContainerRef.current; - - if (!element) return; - - const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - if (entry.contentRect) { - const width = entry.contentRect.width; - - let nbOfCardsPerRowTemp = Math.floor(width / 335); - - if (nbOfCardsPerRowTemp < 1) { - nbOfCardsPerRowTemp = 1; - } - setNbOfCardsPerFollowersRow(nbOfCardsPerRowTemp); - } - } - }); - - resizeObserver.observe(element); - - return () => { - resizeObserver.unobserve(element); - }; - }, [followersContainerRef, isStatsLoading, tab]); - - if (isStatsLoading) { - return ( - - - - ); - } + if (isStatsLoading) return; + + if (stats && parseInt(stats?.following_count) > 0) { + setTab('following'); + } else if (stats && parseInt(stats?.followers_count) > 0) { + setTab('followers'); + } else { + setTab('none'); + } + }, [stats, isStatsLoading]); + + // if (isStatsLoading) { + // return ( + // + // + // + // ); + // } return ( = ({ ens }) => { padding: '5px 7px', display: 'flex', gap: '10px', - cursor: 'pointer', + cursor: + stats && parseInt(stats?.following_count) > 0 + ? 'pointer' + : 'not-allowed', border: 'none', + opacity: stats && parseInt(stats?.following_count) > 0 ? 1 : 0.5, }} onClick={() => setTab('following')} > @@ -189,8 +109,12 @@ export const EFPTab: FC = ({ ens }) => { padding: '5px 7px', display: 'flex', gap: '10px', - cursor: 'pointer', + cursor: + stats && parseInt(stats?.followers_count) > 0 + ? 'pointer' + : 'not-allowed', border: 'none', + opacity: stats && parseInt(stats?.followers_count) > 0 ? 1 : 0.5, }} onClick={() => setTab('followers')} > @@ -226,142 +150,46 @@ export const EFPTab: FC = ({ ens }) => { - {tab === 'following' && ( + {tab === 'following' && } + + {tab === 'followers' && } + + {tab === 'none' && ( - {followingFlat?.map((follow) => ( -
- -
- ))} +

+ No Followers or Following found +

- {followingFlat && - followingFlat?.length > 0 && - Array.from( - { - length: - nbOfCardsPerFollowingRow - - (followingFlat?.length % nbOfCardsPerFollowingRow) === - nbOfCardsPerFollowingRow - ? 0 - : nbOfCardsPerFollowingRow - - (followingFlat?.length % nbOfCardsPerFollowingRow), - }, - (_, i) => ( -
-
-
- ) - )} - {isFollowingFetching && hasMoreFollowing && ( - - - - )} )} - {tab === 'followers' && ( + {tab === 'loading' && ( - {followersFlat?.map((follow) => ( -
- -
- ))} - - {followersFlat && - followersFlat?.length > 0 && - Array.from( - { - length: - nbOfCardsPerFollowersRow - - (followersFlat?.length % nbOfCardsPerFollowersRow) === - nbOfCardsPerFollowersRow - ? 0 - : nbOfCardsPerFollowersRow - - (followersFlat?.length % nbOfCardsPerFollowersRow), - }, - (_, i) => ( -
-
-
- ) - )} - {isFollowersFetching && hasMoreFollowers && ( - - - - )} + )} diff --git a/packages/@justweb3/efp-plugin/src/lib/components/FollowersTab/index.tsx b/packages/@justweb3/efp-plugin/src/lib/components/FollowersTab/index.tsx new file mode 100644 index 00000000..9bb6f4fd --- /dev/null +++ b/packages/@justweb3/efp-plugin/src/lib/components/FollowersTab/index.tsx @@ -0,0 +1,169 @@ +import { JustEnsCard, useInfiniteScroll } from '@justweb3/widget'; +import { Flex, LoadingSpinner } from '@justweb3/ui'; +import { useEffect, useMemo, useRef, useState } from 'react'; +import { useFollowers } from '../../hooks'; +import { + usePrimaryNameBatch, + useStandardRecordsBatch, +} from '@justaname.id/react'; + +export interface FollowersTabProps { + ens: string; +} +export const FollowersTab: React.FC = ({ ens }) => { + const [nbOfCardsPerFollowersRow, setNbOfCardsPerFollowersRow] = useState(0); + const followingContainerRef = useRef(null); + const { + followers, + fetchMoreFollowers, + isFollowersLoading, + isFollowersFetching, + hasMoreFollowers, + } = useFollowers({ + addressOrEns: ens, + }); + + const followingFlat = useMemo(() => { + return followers?.pages.flatMap((follow) => follow.followers); + }, [followers]); + + const followingFlatLastPage = useMemo(() => { + return followers?.pages[followers?.pages.length - 1].followers; + }, [followers]); + + const { + allPrimaryNames: allFollowersPrimaryNames, + primaryNames: followingPrimaryNames, + } = usePrimaryNameBatch({ + addresses: followingFlatLastPage?.map( + (following) => following.address + ) as `0x${string}`[], + chainId: 1, + }); + + const { allRecordsBatch: followingRecordsBatch } = useStandardRecordsBatch({ + enses: followingPrimaryNames + ? (Object.values(followingPrimaryNames).filter( + (name) => name !== null + ) as string[]) + : [], + chainId: 1, + }); + + useInfiniteScroll( + followingContainerRef, + fetchMoreFollowers, + !isFollowersLoading && hasMoreFollowers, + 50 + ); + + useEffect(() => { + const element = followingContainerRef.current; + + if (!element) return; + + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + if (entry.contentRect) { + const width = entry.contentRect.width; + let nbOfCardsPerRowTemp = Math.floor(width / 335); + if (nbOfCardsPerRowTemp < 1) { + nbOfCardsPerRowTemp = 1; + } + setNbOfCardsPerFollowersRow(nbOfCardsPerRowTemp); + } + } + }); + + resizeObserver.observe(element); + + return () => { + resizeObserver.unobserve(element); // Cleanup observer on unmount + }; + }, [followingContainerRef]); + + return ( + + {followingFlat?.map((follow) => ( +
+ +
+ ))} + + {followingFlat && + followingFlat?.length > 0 && + Array.from( + { + length: + nbOfCardsPerFollowersRow - + (followingFlat?.length % nbOfCardsPerFollowersRow) === + nbOfCardsPerFollowersRow + ? 0 + : nbOfCardsPerFollowersRow - + (followingFlat?.length % nbOfCardsPerFollowersRow), + }, + (_, i) => ( +
+
+
+ ) + )} + {!followers || + (isFollowersFetching && hasMoreFollowers && ( + + + + ))} + + ); +}; diff --git a/packages/@justweb3/efp-plugin/src/lib/components/FollowingTab/index.tsx b/packages/@justweb3/efp-plugin/src/lib/components/FollowingTab/index.tsx new file mode 100644 index 00000000..6562bf06 --- /dev/null +++ b/packages/@justweb3/efp-plugin/src/lib/components/FollowingTab/index.tsx @@ -0,0 +1,168 @@ +import { JustEnsCard, useInfiniteScroll } from '@justweb3/widget'; +import { Flex, LoadingSpinner } from '@justweb3/ui'; +import { useEffect, useMemo, useRef, useState } from 'react'; +import { useFollowing } from '../../hooks'; +import { + usePrimaryNameBatch, + useStandardRecordsBatch, +} from '@justaname.id/react'; + +export interface FollowingTabProps { + ens: string; +} +export const FollowingTab: React.FC = ({ ens }) => { + const [nbOfCardsPerFollowingRow, setNbOfCardsPerFollowingRow] = useState(0); + const followingContainerRef = useRef(null); + const { + following, + fetchMoreFollowing, + isFollowingLoading, + isFollowingFetching, + hasMoreFollowing, + } = useFollowing({ + addressOrEns: ens, + }); + + const followingFlat = useMemo(() => { + return following?.pages.flatMap((follow) => follow.following); + }, [following]); + + const followingFlatLastPage = useMemo(() => { + return following?.pages[following?.pages.length - 1].following; + }, [following]); + + const { + allPrimaryNames: allFollowingPrimaryNames, + primaryNames: followingPrimaryNames, + } = usePrimaryNameBatch({ + addresses: followingFlatLastPage?.map( + (following) => following.data + ) as `0x${string}`[], + chainId: 1, + }); + + const { allRecordsBatch: followingRecordsBatch } = useStandardRecordsBatch({ + enses: followingPrimaryNames + ? (Object.values(followingPrimaryNames).filter( + (name) => name !== null + ) as string[]) + : [], + chainId: 1, + }); + + useInfiniteScroll( + followingContainerRef, + fetchMoreFollowing, + !isFollowingLoading && hasMoreFollowing, + 50 + ); + + useEffect(() => { + const element = followingContainerRef.current; + + if (!element) return; + + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + if (entry.contentRect) { + const width = entry.contentRect.width; + let nbOfCardsPerRowTemp = Math.floor(width / 335); + if (nbOfCardsPerRowTemp < 1) { + nbOfCardsPerRowTemp = 1; + } + setNbOfCardsPerFollowingRow(nbOfCardsPerRowTemp); + } + } + }); + + resizeObserver.observe(element); + + return () => { + resizeObserver.unobserve(element); // Cleanup observer on unmount + }; + }, [followingContainerRef]); + + return ( + + {followingFlat?.map((follow) => ( +
+ +
+ ))} + + {followingFlat && + followingFlat?.length > 0 && + Array.from( + { + length: + nbOfCardsPerFollowingRow - + (followingFlat?.length % nbOfCardsPerFollowingRow) === + nbOfCardsPerFollowingRow + ? 0 + : nbOfCardsPerFollowingRow - + (followingFlat?.length % nbOfCardsPerFollowingRow), + }, + (_, i) => ( +
+
+
+ ) + )} + {isFollowingFetching && hasMoreFollowing && ( + + + + )} + + ); +}; diff --git a/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowers/index.ts b/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowers/index.ts index 97d85a9d..73eb3c9a 100644 --- a/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowers/index.ts +++ b/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowers/index.ts @@ -61,7 +61,7 @@ export const useFollowers = ({ queryFn: async ({ pageParam: { offset, limit } }) => { return getFollowers(addressOrEns, limit, offset); }, - initialPageParam: { offset: 0, limit: 100 }, + initialPageParam: { offset: 0, limit: 30 }, getNextPageParam: (lastPage, allPages) => { if (lastPage.followers.length < 20) { return undefined; diff --git a/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowing/index.ts b/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowing/index.ts index 0be5bba3..d9906753 100644 --- a/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowing/index.ts +++ b/packages/@justweb3/efp-plugin/src/lib/hooks/useFollowing/index.ts @@ -58,7 +58,7 @@ export const useFollowing = ({ queryFn: async ({ pageParam: { offset, limit } }) => { return getFollowing(addressOrEns, limit, offset); }, - initialPageParam: { offset: 0, limit: 100 }, + initialPageParam: { offset: 0, limit: 30 }, getNextPageParam: (lastPage, allPages) => { if (lastPage.following.length < 20) { return undefined; diff --git a/packages/@justweb3/efp-plugin/src/lib/plugins/index.tsx b/packages/@justweb3/efp-plugin/src/lib/plugins/index.tsx index 90594f3a..3a5473a1 100644 --- 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 ; }, - // SignInMenu: (pluginApi) => { - // if (pluginApi.chainId !== 1) { - // return null; - // } - // return ( - // } - // style={{ - // width: '100%', - // }} - // onClick={() => { - // pluginApi.setState('efpOpen', true); - // }} - // right={} - // /> - // ); - // }, }, }; diff --git a/packages/@justweb3/efp-plugin/src/stories/efp.stories.tsx b/packages/@justweb3/efp-plugin/src/stories/efp.stories.tsx index 7353679b..d7436c43 100644 --- a/packages/@justweb3/efp-plugin/src/stories/efp.stories.tsx +++ b/packages/@justweb3/efp-plugin/src/stories/efp.stories.tsx @@ -18,6 +18,8 @@ import { } from '@justweb3/widget'; import '@justweb3/widget/styles.css'; import { EFPPlugin } from '../lib'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { useStandardRecordsBatch } from '@justaname.id/react'; const queryClient = new QueryClient(); @@ -41,12 +43,18 @@ const JustWeb3Config: JustWeb3ProviderConfig = { openOnWalletConnect: false, allowedEns: 'all', // dev: import.meta.env.STORYBOOK_APP_DEV === 'true', + dev: true, plugins: [EFPPlugin], }; const UpdateButton = () => { const { updateRecords } = useJustWeb3(); + const { recordsBatch } = useStandardRecordsBatch({ + enses: ['hadikhai.jaw.eth'], + chainId: 11155111, + }); + return (
@@ -133,6 +141,7 @@ export const Example = () => {
+ ); diff --git a/packages/@justweb3/poap-plugin/src/lib/components/POAPTab/index.tsx b/packages/@justweb3/poap-plugin/src/lib/components/POAPTab/index.tsx index 6b922155..8cb75a59 100644 --- a/packages/@justweb3/poap-plugin/src/lib/components/POAPTab/index.tsx +++ b/packages/@justweb3/poap-plugin/src/lib/components/POAPTab/index.tsx @@ -1,5 +1,5 @@ import { Flex, LoadingSpinner, P } from '@justweb3/ui'; -import { FC, Fragment, useEffect, useState } from 'react'; +import { FC, Fragment, useMemo } from 'react'; import { usePoaps } from '../../hooks'; import { POAP } from '../../types'; import POAPCard from '../PoapCard'; @@ -31,29 +31,27 @@ export interface POAPTabProps { } export const POAPTab: FC = ({ address, apiKey, backendUrl }) => { - const [groupedPoaps, setGroupedPoaps] = useState({}); - const [displayedMonths, setDisplayedMonths] = useState([]); - const { poaps, isPoapsLoading } = usePoaps({ address, apiKey, backendUrl, }); - useEffect(() => { + const [groupedPoaps, displayedMonths] = useMemo(() => { if (poaps) { const sortedPoaps = [...poaps].sort( (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime() ); const grouped = groupPoapsByMonth(sortedPoaps); - setGroupedPoaps(grouped); const allMonths = Object.keys(grouped).sort( (a, b) => new Date(b).getTime() - new Date(a).getTime() ); - setDisplayedMonths(allMonths); + + return [grouped, allMonths]; } + return [{}, []]; }, [poaps]); if (isPoapsLoading) { @@ -78,6 +76,7 @@ export const POAPTab: FC = ({ address, apiKey, backendUrl }) => { direction={'column'} style={{ maxHeight: '100%', + minHeight: '100%', height: '100%', }} > @@ -87,47 +86,71 @@ export const POAPTab: FC = ({ address, apiKey, backendUrl }) => { style={{ overflow: 'auto', maxHeight: '100%', + minHeight: '100%', paddingRight: '5px', }} > - {displayedMonths.map((monthYear) => ( + {poaps && poaps?.length > 0 ? ( + displayedMonths.map((monthYear) => ( + +

+ {monthYear} +

+
+ {groupedPoaps[monthYear]?.map((poap) => ( + + + + ))} +
+ + )) + ) : (

- {monthYear} + No POAPs found

-
- {groupedPoaps[monthYear]?.map((poap) => ( - - - - ))} -
- ))} - {isPoapsLoading && ( + )} + {(!poaps || isPoapsLoading) && ( = ({ poap }) => { return ( ) { maskType: 'alpha', }} > - + diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddCircle.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddCircle.tsx index 62eb2d7f..c7faf525 100644 --- 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) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddFolder.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddFolder.tsx new file mode 100644 index 00000000..65a9c283 --- /dev/null +++ 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) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddImage.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddImage.tsx new file mode 100644 index 00000000..ade75bb6 --- /dev/null +++ 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) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/AddVideo.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/AddVideo.tsx new file mode 100644 index 00000000..b42bf101 --- /dev/null +++ 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) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Address.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Address.tsx index 659a982b..55bb06ed 100644 --- 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) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Arrow.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Arrow.tsx index f18c8261..38c8dda0 100644 --- 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) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Attachment.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Attachment.tsx index c1074914..25ff8005 100644 --- 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) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Avatar.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Avatar.tsx index a9757970..1b9bdf62 100644 --- 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) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Banner.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Banner.tsx index cec9a989..78f724b1 100644 --- 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) { {...props} > ) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/CalendarClock.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/CalendarClock.tsx index 7fcf37ba..76f23453 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/CalendarClock.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/CalendarClock.tsx @@ -18,11 +18,14 @@ export default function CalendarClock(props: SVGProps) { maskType: 'alpha', }} > - + diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/CalendarMonth.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/CalendarMonth.tsx index 2b9263ef..2518d2da 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/CalendarMonth.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/CalendarMonth.tsx @@ -18,11 +18,14 @@ export default function CalendarMonth(props: SVGProps) { maskType: 'alpha', }} > - + diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Clip.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Clip.tsx index 52d2e0f6..7660ab5b 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Clip.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Clip.tsx @@ -22,7 +22,7 @@ export default function Clip(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Close.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Close.tsx index ea8e2fc3..96ee530f 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Close.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Close.tsx @@ -22,7 +22,7 @@ export default function Close(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Comic.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Comic.tsx index 2a08ea6a..c70cb595 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Comic.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Comic.tsx @@ -22,7 +22,7 @@ export default function Comic(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Contacts.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Contacts.tsx index 23524180..6ecdaf8a 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Contacts.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Contacts.tsx @@ -22,7 +22,7 @@ export default function Contacts(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Copied.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Copied.tsx index 3cc0719b..344b6eaf 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Copied.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Copied.tsx @@ -3,7 +3,7 @@ export default function Copied(props: SVGProps) { return ( diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Copy.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Copy.tsx index 47edc5a3..9727f365 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Copy.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Copy.tsx @@ -22,7 +22,7 @@ export default function Copy(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Document.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Document.tsx new file mode 100644 index 00000000..9f24bc61 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Document.tsx @@ -0,0 +1,31 @@ +import type { SVGProps } from 'react'; +export default function Document(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Download.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Download.tsx new file mode 100644 index 00000000..c825c9b4 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Download.tsx @@ -0,0 +1,38 @@ +import type { SVGProps } from 'react'; +export default function Download(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Edit.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Edit.tsx index 4eae2d41..b2bb95e0 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Edit.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Edit.tsx @@ -22,7 +22,7 @@ export default function Edit(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/General.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/General.tsx index e09c8192..39558bd4 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/General.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/General.tsx @@ -22,7 +22,7 @@ export default function General(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Location.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Location.tsx index 99f813d5..41dbbd3c 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Location.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Location.tsx @@ -8,7 +8,7 @@ export default function Location(props: SVGProps) { {...props} > diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/LocationOn.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/LocationOn.tsx index 4efd89d9..9508decc 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/LocationOn.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/LocationOn.tsx @@ -18,11 +18,14 @@ export default function LocationOn(props: SVGProps) { maskType: 'alpha', }} > - + diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Logout.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Logout.tsx index c018acf3..c5189f12 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Logout.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Logout.tsx @@ -22,7 +22,7 @@ export default function Logout(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Mapp.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Mapp.tsx index 2f9a1d15..9797920a 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Mapp.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Mapp.tsx @@ -22,7 +22,7 @@ export default function Mapp(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Maximize.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Maximize.tsx index 51153190..f1c57ca0 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Maximize.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Maximize.tsx @@ -22,7 +22,7 @@ export default function Maximize(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Mic.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Mic.tsx new file mode 100644 index 00000000..abbd33f9 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Mic.tsx @@ -0,0 +1,31 @@ +import type { SVGProps } from 'react'; +export default function Mic(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Minimize.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Minimize.tsx index 026395c6..370e58bc 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Minimize.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Minimize.tsx @@ -22,7 +22,7 @@ export default function Minimize(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Minus.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Minus.tsx index 5611eda9..63a744d0 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Minus.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Minus.tsx @@ -3,7 +3,7 @@ export default function Minus(props: SVGProps) { return ( diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Nickname.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Nickname.tsx index 5dc52442..c74f560f 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Nickname.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Nickname.tsx @@ -22,7 +22,7 @@ export default function Nickname(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Notification.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Notification.tsx index 3e42a0ed..b36c1c84 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Notification.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Notification.tsx @@ -22,7 +22,7 @@ export default function Notification(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Pause.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Pause.tsx new file mode 100644 index 00000000..895a8538 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Pause.tsx @@ -0,0 +1,41 @@ +import type { SVGProps } from 'react'; +export default function Pause(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Pen.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Pen.tsx index 6b80a65c..4414f16d 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Pen.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Pen.tsx @@ -22,7 +22,7 @@ export default function Pen(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/PersonEdit.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/PersonEdit.tsx index da07a76d..eca5c4ed 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/PersonEdit.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/PersonEdit.tsx @@ -22,7 +22,7 @@ export default function PersonEdit(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Play.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Play.tsx new file mode 100644 index 00000000..d9b432f0 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Play.tsx @@ -0,0 +1,31 @@ +import type { SVGProps } from 'react'; +export default function Play(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Profile.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Profile.tsx index 6ca101a3..d1996dd7 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Profile.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Profile.tsx @@ -18,11 +18,14 @@ export default function Profile(props: SVGProps) { maskType: 'alpha', }} > - + diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/ProfileEdit.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/ProfileEdit.tsx index f74fd798..0ba0eb43 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/ProfileEdit.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/ProfileEdit.tsx @@ -22,7 +22,7 @@ export default function ProfileEdit(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Reaction.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Reaction.tsx new file mode 100644 index 00000000..a2fd735f --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Reaction.tsx @@ -0,0 +1,34 @@ +import type { SVGProps } from 'react'; +export default function Reaction(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Reply.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Reply.tsx new file mode 100644 index 00000000..df7af654 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Reply.tsx @@ -0,0 +1,34 @@ +import type { SVGProps } from 'react'; +export default function Reply(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Send.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Send.tsx new file mode 100644 index 00000000..25e91911 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Send.tsx @@ -0,0 +1,31 @@ +import type { SVGProps } from 'react'; +export default function Send(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Social.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Social.tsx index f9e09e0d..07147867 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Social.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Social.tsx @@ -22,7 +22,7 @@ export default function Social(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Stop.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Stop.tsx new file mode 100644 index 00000000..8df3b34e --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Stop.tsx @@ -0,0 +1,38 @@ +import type { SVGProps } from 'react'; +export default function Stop(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Tune.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Tune.tsx new file mode 100644 index 00000000..99bd357c --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Tune.tsx @@ -0,0 +1,31 @@ +import type { SVGProps } from 'react'; +export default function Tune(props: SVGProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Verifications.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Verifications.tsx index e13f2775..b4651923 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Verifications.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Verifications.tsx @@ -22,7 +22,7 @@ export default function Verifications(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/Wallet.tsx b/packages/@justweb3/ui/src/lib/icons/components/general/Wallet.tsx index 26247360..a0555b56 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/Wallet.tsx +++ b/packages/@justweb3/ui/src/lib/icons/components/general/Wallet.tsx @@ -22,7 +22,7 @@ export default function Wallet(props: SVGProps) { diff --git a/packages/@justweb3/ui/src/lib/icons/components/general/index.ts b/packages/@justweb3/ui/src/lib/icons/components/general/index.ts index e1e4e964..52eb7a0d 100644 --- a/packages/@justweb3/ui/src/lib/icons/components/general/index.ts +++ b/packages/@justweb3/ui/src/lib/icons/components/general/index.ts @@ -1,4 +1,7 @@ import AddCircleIcon from './AddCircle'; +import AddFolderIcon from './AddFolder'; +import AddImageIcon from './AddImage'; +import AddVideoIcon from './AddVideo'; import AddIcon from './Add'; import AddressIcon from './Address'; import ArrowWhiteIcon from './ArrowWhite'; @@ -6,6 +9,7 @@ import ArrowIcon from './Arrow'; import AttachmentIcon from './Attachment'; import AvatarIcon from './Avatar'; import BannerIcon from './Banner'; +import BlockedAccountIcon from './BlockedAccount'; import CalendarClockIcon from './CalendarClock'; import CalendarMonthIcon from './CalendarMonth'; import ClipIcon from './Clip'; @@ -15,7 +19,9 @@ import ContactsIcon from './Contacts'; import CopiedIcon from './Copied'; import CopyIcon from './Copy'; import DeleteIcon from './Delete'; +import DocumentIcon from './Document'; import DoneIcon from './Done'; +import DownloadIcon from './Download'; import EditIcon from './Edit'; import GeneralIcon from './General'; import LocationOnIcon from './LocationOn'; @@ -23,21 +29,32 @@ import LocationIcon from './Location'; import LogoutIcon from './Logout'; import MappIcon from './Mapp'; import MaximizeIcon from './Maximize'; +import MicIcon from './Mic'; import MinimizeIcon from './Minimize'; import MinusIcon from './Minus'; import NicknameIcon from './Nickname'; import NotificationIcon from './Notification'; +import PauseIcon from './Pause'; import PenIcon from './Pen'; import PersonEditIcon from './PersonEdit'; +import PlayIcon from './Play'; import ProfileEditIcon from './ProfileEdit'; import ProfileIcon from './Profile'; +import ReactionIcon from './Reaction'; +import ReplyIcon from './Reply'; +import SendIcon from './Send'; import SocialIcon from './Social'; +import StopIcon from './Stop'; import TrashWhiteIcon from './TrashWhite'; import TrashIcon from './Trash'; +import TuneIcon from './Tune'; import VerificationsIcon from './Verifications'; import WalletIcon from './Wallet'; const general = { 'add-circle': AddCircleIcon, + 'add-folder': AddFolderIcon, + 'add-image': AddImageIcon, + 'add-video': AddVideoIcon, add: AddIcon, address: AddressIcon, 'arrow-white': ArrowWhiteIcon, @@ -45,6 +62,7 @@ const general = { attachment: AttachmentIcon, avatar: AvatarIcon, banner: BannerIcon, + 'blocked-account': BlockedAccountIcon, 'calendar-clock': CalendarClockIcon, 'calendar-month': CalendarMonthIcon, clip: ClipIcon, @@ -54,7 +72,9 @@ const general = { copied: CopiedIcon, copy: CopyIcon, delete: DeleteIcon, + document: DocumentIcon, done: DoneIcon, + download: DownloadIcon, edit: EditIcon, general: GeneralIcon, 'location-on': LocationOnIcon, @@ -62,17 +82,25 @@ const general = { logout: LogoutIcon, mapp: MappIcon, maximize: MaximizeIcon, + mic: MicIcon, minimize: MinimizeIcon, minus: MinusIcon, nickname: NicknameIcon, notification: NotificationIcon, + pause: PauseIcon, pen: PenIcon, 'person-edit': PersonEditIcon, + play: PlayIcon, 'profile-edit': ProfileEditIcon, profile: ProfileIcon, + reaction: ReactionIcon, + reply: ReplyIcon, + send: SendIcon, social: SocialIcon, + stop: StopIcon, 'trash-white': TrashWhiteIcon, trash: TrashIcon, + tune: TuneIcon, verifications: VerificationsIcon, wallet: WalletIcon, }; @@ -80,6 +108,9 @@ const general = { export { general, AddCircleIcon, + AddFolderIcon, + AddImageIcon, + AddVideoIcon, AddIcon, AddressIcon, ArrowWhiteIcon, @@ -87,6 +118,7 @@ export { AttachmentIcon, AvatarIcon, BannerIcon, + BlockedAccountIcon, CalendarClockIcon, CalendarMonthIcon, ClipIcon, @@ -96,7 +128,9 @@ export { CopiedIcon, CopyIcon, DeleteIcon, + DocumentIcon, DoneIcon, + DownloadIcon, EditIcon, GeneralIcon, LocationOnIcon, @@ -104,17 +138,25 @@ export { LogoutIcon, MappIcon, MaximizeIcon, + MicIcon, MinimizeIcon, MinusIcon, NicknameIcon, NotificationIcon, + PauseIcon, PenIcon, PersonEditIcon, + PlayIcon, ProfileEditIcon, ProfileIcon, + ReactionIcon, + ReplyIcon, + SendIcon, SocialIcon, + StopIcon, TrashWhiteIcon, TrashIcon, + TuneIcon, VerificationsIcon, WalletIcon, }; diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/add-folder.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-folder.svg new file mode 100644 index 00000000..08959924 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-folder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/add-image.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-image.svg new file mode 100644 index 00000000..4498288e --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-image.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/add-video.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-video.svg new file mode 100644 index 00000000..45a14792 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/add-video.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/blocked-account.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/blocked-account.svg new file mode 100644 index 00000000..988ca9e5 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/blocked-account.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/document.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/document.svg new file mode 100644 index 00000000..24d822b3 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/document.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/download.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/download.svg new file mode 100644 index 00000000..f7b96a85 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/download.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/mic.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/mic.svg new file mode 100644 index 00000000..525e12fa --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/mic.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/pause.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/pause.svg new file mode 100644 index 00000000..67e47376 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/pause.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/play.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/play.svg new file mode 100644 index 00000000..46882629 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/play.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/profile.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/profile.svg index 8cdc7923..c09222df 100644 --- a/packages/@justweb3/ui/src/lib/icons/svgs/general/profile.svg +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/profile.svg @@ -1,8 +1,8 @@ - + - + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/reaction.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/reaction.svg new file mode 100644 index 00000000..e5fe7b0d --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/reaction.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/reply.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/reply.svg new file mode 100644 index 00000000..4bacd732 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/reply.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/send.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/send.svg new file mode 100644 index 00000000..98209eab --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/send.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/stop.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/stop.svg new file mode 100644 index 00000000..cf365a23 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/stop.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/icons/svgs/general/tune.svg b/packages/@justweb3/ui/src/lib/icons/svgs/general/tune.svg new file mode 100644 index 00000000..e1d5a083 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/icons/svgs/general/tune.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/@justweb3/ui/src/lib/ui/Avatar/index.tsx b/packages/@justweb3/ui/src/lib/ui/Avatar/index.tsx index 5aee3b0c..8aad423e 100644 --- a/packages/@justweb3/ui/src/lib/ui/Avatar/index.tsx +++ b/packages/@justweb3/ui/src/lib/ui/Avatar/index.tsx @@ -4,7 +4,7 @@ import styles from './Avatar.module.css'; import clsx from 'clsx'; interface AvatarProps { - src?: string; + src?: string | React.ReactNode; alt?: string; initial?: string; size?: number; @@ -41,12 +41,16 @@ export const Avatar: React.FC = ({ }} > {src && !isImageError ? ( - {alt setIsImageError(true)} // Set error state when image fails to load - /> + typeof src === 'string' ? ( + {alt setIsImageError(true)} // Set error state when image fails to load + /> + ) : ( + src + ) ) : ( )} diff --git a/packages/@justweb3/ui/src/lib/ui/Checkbox/Checkbox.module.css b/packages/@justweb3/ui/src/lib/ui/Checkbox/Checkbox.module.css new file mode 100644 index 00000000..99de7a80 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Checkbox/Checkbox.module.css @@ -0,0 +1,35 @@ +.checkbox { + height: 1rem; + width: 1rem; + padding: 1px; + border-radius: 0.25rem; + border: 1px solid var(--justweb3-foreground-color-4); + background-color: var(--justweb3-background-color); + transition-property: background-color, border-color, color, fill, stroke; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.checkbox[data-state='checked'] { + background-color: var(--justweb3-primary-color); + border-color: var(--justweb3-primary-color); +} + +.checkbox:disabled { + opacity: 0.5; + pointer-events: none; +} + +.indicator { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.icon { + width: 0.75rem; + height: 0.75rem; + color: var(--justweb3-primary-color-foreground); +} diff --git a/packages/@justweb3/ui/src/lib/ui/Checkbox/index.tsx b/packages/@justweb3/ui/src/lib/ui/Checkbox/index.tsx new file mode 100644 index 00000000..a4004fe1 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Checkbox/index.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { Check } from 'lucide-react'; +import styles from './Checkbox.module.css'; + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export { Checkbox }; diff --git a/packages/@justweb3/ui/src/lib/ui/Label/Label.module.css b/packages/@justweb3/ui/src/lib/ui/Label/Label.module.css new file mode 100644 index 00000000..7d8e9420 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Label/Label.module.css @@ -0,0 +1,18 @@ +.label { + font-size: 0.875rem; + font-weight: 500; + line-height: 1; + font-family: var(--justweb3-font-family); + color: var(--justweb3-foreground-color-2); +} + +.required::after { + content: "*"; + margin-left: 0.25rem; + color: var(--justweb3-destructive-color); +} + +[data-disabled] + .label { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/packages/@justweb3/ui/src/lib/ui/Label/index.tsx b/packages/@justweb3/ui/src/lib/ui/Label/index.tsx new file mode 100644 index 00000000..66d6dacc --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Label/index.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import styles from './Label.module.css'; + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + required?: boolean; + } +>(({ className, required, ...props }, ref) => ( + +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; diff --git a/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/LoadingSpinner.module.css b/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/LoadingSpinner.module.css index ff039d4f..3031ffcd 100644 --- a/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/LoadingSpinner.module.css +++ b/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/LoadingSpinner.module.css @@ -18,7 +18,7 @@ } .styledSvg { - width: 20px; - height: 20px; + /*width: 20px;*/ + /*height: 20px;*/ animation: rotate 1s linear infinite; } diff --git a/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/index.tsx b/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/index.tsx index bcd11f13..08320670 100644 --- a/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/index.tsx +++ b/packages/@justweb3/ui/src/lib/ui/LoadingSpinner/index.tsx @@ -3,12 +3,21 @@ import styles from './LoadingSpinner.module.css'; // Import the CSS module export interface LoadingSpinnerProps { color?: string; + size?: number; } -export const LoadingSpinner: React.FC = ({ color }) => { +export const LoadingSpinner: React.FC = ({ + color, + size = 20, +}) => { return (
- + { + overlay?: boolean; +} + +const SheetOverlay = React.forwardRef< + React.ElementRef, + SheetOverlayProps +>(({ className, overlay = true, ...props }, ref) => ( + +)); +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; + +const sheetVariants = cva(styles.sheetContent, { + variants: { + side: { + top: styles.top, + right: styles.right, + bottom: styles.bottom, + left: styles.left, + }, + }, + defaultVariants: { + side: 'right', + }, +}); + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps { + overlay?: boolean; +} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = 'right', overlay = true, className, children, ...props }, ref) => ( + + + + {children} + + + + + +)); +SheetContent.displayName = SheetPrimitive.Content.displayName; + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +SheetHeader.displayName = 'SheetHeader'; + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +SheetFooter.displayName = 'SheetFooter'; + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetTitle.displayName = SheetPrimitive.Title.displayName; + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetDescription.displayName = SheetPrimitive.Description.displayName; + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}; diff --git a/packages/@justweb3/ui/src/lib/ui/Skeleton/Skeleton.module.css b/packages/@justweb3/ui/src/lib/ui/Skeleton/Skeleton.module.css new file mode 100644 index 00000000..f027fdd2 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Skeleton/Skeleton.module.css @@ -0,0 +1,15 @@ +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.skeleton { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + border-radius: 0.375rem; + background-color: rgba(var(--jusstweb3-primary-color), 0.1); +} diff --git a/packages/@justweb3/ui/src/lib/ui/Skeleton/index.tsx b/packages/@justweb3/ui/src/lib/ui/Skeleton/index.tsx new file mode 100644 index 00000000..a5b8f068 --- /dev/null +++ b/packages/@justweb3/ui/src/lib/ui/Skeleton/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import styles from './Skeleton.module.css'; + +const Skeleton = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className = '', ...props }, ref) => ( +
+)); + +Skeleton.displayName = 'Skeleton'; + +export { Skeleton }; diff --git a/packages/@justweb3/ui/src/lib/ui/Tabs/Tabs.module.css b/packages/@justweb3/ui/src/lib/ui/Tabs/Tabs.module.css index ec4d632b..dac10440 100644 --- a/packages/@justweb3/ui/src/lib/ui/Tabs/Tabs.module.css +++ b/packages/@justweb3/ui/src/lib/ui/Tabs/Tabs.module.css @@ -1,14 +1,16 @@ .tabsList { - align-items: center; - justify-content: center; + /*align-items: center;*/ + /*justify-content: center;*/ border-radius: 0.375rem; margin-bottom: 10px; + gap: 10px; + display: flex; } /* Underlined variant */ .underlinedTabs .tabsTrigger { - margin-right: 10px; + /*margin-right: 10px;*/ transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out; background-color: transparent; border: unset; @@ -18,6 +20,8 @@ font-weight: 900; line-height: 18px; font-family: var(--justweb3-font-family); + border-bottom: 2px solid transparent; + } .underlinedTabs .tabsTrigger[data-state='active'] { diff --git a/packages/@justweb3/ui/src/lib/ui/index.ts b/packages/@justweb3/ui/src/lib/ui/index.ts index 5be7fdc5..3cd6c64c 100644 --- a/packages/@justweb3/ui/src/lib/ui/index.ts +++ b/packages/@justweb3/ui/src/lib/ui/index.ts @@ -14,3 +14,7 @@ export * from './Separator'; export * from './Tabs'; export * from './Text'; export * from './ToolTip'; +export * from './Sheet'; +export * from './Label'; +export * from './Checkbox'; +export * from './Skeleton'; diff --git a/packages/@justweb3/ui/src/stories/ui/checkbox.stories.tsx b/packages/@justweb3/ui/src/stories/ui/checkbox.stories.tsx new file mode 100644 index 00000000..e2d53caf --- /dev/null +++ b/packages/@justweb3/ui/src/stories/ui/checkbox.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Checkbox } from '../../lib/ui'; + +const meta: Meta = { + component: Checkbox, + title: 'Design System/UI/Checkbox', + tags: ['autodocs'], +}; +export default meta; +type Story = StoryObj; + +export const Normal: Story = { + args: {}, +}; + +export const Disabled: Story = { + args: { + disabled: true, + }, +}; diff --git a/packages/@justweb3/ui/src/stories/ui/label.stories.tsx b/packages/@justweb3/ui/src/stories/ui/label.stories.tsx new file mode 100644 index 00000000..a831e758 --- /dev/null +++ b/packages/@justweb3/ui/src/stories/ui/label.stories.tsx @@ -0,0 +1,32 @@ +import { StoryObj } from '@storybook/react'; +import { Checkbox, Label } from '../../lib/ui'; + +export const Example = () => { + return ( +
+
+ + +
+
+ ); +}; + +const meta = { + component: Example, + title: 'Design System/UI/Label', +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; diff --git a/packages/@justweb3/ui/src/stories/ui/sheet.stories.tsx b/packages/@justweb3/ui/src/stories/ui/sheet.stories.tsx new file mode 100644 index 00000000..4cbe9df5 --- /dev/null +++ b/packages/@justweb3/ui/src/stories/ui/sheet.stories.tsx @@ -0,0 +1,72 @@ +import { StoryObj } from '@storybook/react'; +import { + Button, + Input, + Label, + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, + SheetTrigger, +} from '../../lib/ui'; + +export const Example = () => { + return ( + + + + + + + Edit profile + + Make changes to your profile here. Click save when you're done. + + +
+
+ + +
+
+ + +
+
+ + + + + + + + ); +}; + +const meta = { + component: Example, + title: 'Design System/UI/Sheet', +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; diff --git a/packages/@justweb3/widget/src/lib/components/JustEnsCard/index.tsx b/packages/@justweb3/widget/src/lib/components/JustEnsCard/index.tsx index cd07b171..64e94c4e 100644 --- a/packages/@justweb3/widget/src/lib/components/JustEnsCard/index.tsx +++ b/packages/@justweb3/widget/src/lib/components/JustEnsCard/index.tsx @@ -2,7 +2,12 @@ import React, { FC } from 'react'; import { ChainId } from '@justaname.id/sdk'; import { useJustWeb3 } from '../../providers'; -import { useEnsAvatar, usePrimaryName, useRecords } from '@justaname.id/react'; +import { + Records, + useEnsAvatar, + usePrimaryName, + useRecords, +} from '@justaname.id/react'; import { Avatar, ClickableItem, @@ -10,11 +15,13 @@ import { CopyIcon, Flex, formatText, + LoadingSpinner, P, } from '@justweb3/ui'; import { getTextRecordIcon } from '../../icons/records-icons'; import styles from './JustEnsCard.module.css'; -import useInView from '../../hooks/useInView'; // Import CSS module +import useInView from '../../hooks/useInView'; +import { Address } from 'viem'; // Import CSS module export interface JustEnsCardProps { addressOrEns: string; @@ -23,7 +30,10 @@ export interface JustEnsCardProps { style?: React.CSSProperties; containerRef?: React.RefObject; // skipQueue?: boolean; + prefetchedRecords?: Records; skipInViewFetch?: boolean; + skipFetch?: boolean; + loading?: boolean; } export const JustEnsCard: FC = ({ @@ -33,27 +43,49 @@ export const JustEnsCard: FC = ({ style, containerRef, // skipQueue, + prefetchedRecords, + skipFetch, skipInViewFetch = false, + loading, }) => { const ref = React.useRef(null); const inView = useInView(ref, containerRef); const { openEnsProfile } = useJustWeb3(); const [isCopied, setIsCopied] = React.useState(false); const isEns = addressOrEns?.includes('.'); - const { primaryName } = usePrimaryName({ - address: isEns ? undefined : (addressOrEns as `0x${string}`), + const { primaryName, isPrimaryNameFetching } = usePrimaryName({ + address: isEns ? undefined : (addressOrEns as Address), chainId, - enabled: !skipInViewFetch ? inView : true, + enabled: skipFetch ? false : skipInViewFetch ? false : inView, }); const ens = (isEns ? addressOrEns : primaryName) || formatText(addressOrEns, 4); - const { records } = useRecords({ + + const { records: ensRecords, isRecordsFetching } = useRecords({ ens: isEns ? addressOrEns : primaryName, chainId, - enabled: !skipInViewFetch ? inView : true, - skipQueue: skipInViewFetch, + // standard: true, + enabled: skipFetch + ? false + : prefetchedRecords + ? false + : skipInViewFetch + ? false + : inView, }); + + const records = prefetchedRecords || ensRecords; + + // const { records: allRecords } = useRecords({ + // ens: isEns ? addressOrEns : primaryName, + // chainId, + // enabled: skipInViewFetch || inView, + // skipQueue: skipInViewFetch, + // }); + + // const records = standardRecords || allRecords; + const { sanitizeEnsImage } = useEnsAvatar(); const handleEnsClick = () => { @@ -100,11 +132,20 @@ export const JustEnsCard: FC = ({ + ) : ( + sanitizeEnsImage({ + name: ens, + chainId, + image: records?.sanitizedRecords?.avatar, + }) + ) + } size={75} borderSize="4px" /> @@ -177,13 +218,25 @@ export const JustEnsCard: FC = ({ } className={styles.clickableItem} left={ - + loading || isPrimaryNameFetching || isRecordsFetching ? ( +
+ +
+ ) : ( + + ) } disabled={!isEns && !primaryName} onClick={() => handleEnsClick()} diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx index 62081f55..c16067a0 100644 --- a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx +++ b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx @@ -1,11 +1,9 @@ -import { FC, Fragment, ReactNode, useContext, useMemo, useState } from 'react'; +import { FC, ReactNode, useContext, useMemo, useState } from 'react'; import { JustWeb3Context, useJustWeb3 } from '../../providers'; import { ArrowIcon, - ArrowWhiteIcon, Avatar, Badge, - Button, ClickableItem, Flex, formatText, @@ -15,6 +13,7 @@ import { P, Popover, PopoverTrigger, + ProfileIcon, SPAN, } from '@justweb3/ui'; import { @@ -181,19 +180,6 @@ export const JustWeb3Button: FC = ({ setMobileDialogOpen(true); } }} - // right={ - // - // {address && formatText(address, 4)} - // - // - // } /> ); }; @@ -201,37 +187,37 @@ export const JustWeb3Button: FC = ({ const connectedEnsProfileContent = ( - -

- Profile Overview -

- - + {/**/} + {/* */} + {/* Profile Overview*/} + {/*

*/} + {/* */} + {/* }*/} + {/* onClick={() => {*/} + {/* openEnsProfile(connectedEns?.ens, connectedEns?.chainId);*/} + {/* }}*/} + {/* >*/} + {/* View Full Profile*/} + {/* */} + {/**/} {/* Profile */} @@ -296,6 +282,24 @@ export const JustWeb3Button: FC = ({ + + } + title={'Profile'} + style={{ + width: '100%', + }} + onClick={() => + openEnsProfile(connectedEns?.ens, connectedEns?.chainId) + } + right={ + + } + /> {plugins.map((plugin) => { const component = plugin.components?.SignInMenu; if (!component) { @@ -303,9 +307,14 @@ export const JustWeb3Button: FC = ({ } return ( - +
{ + setMobileDialogOpen(false); + }} + > {component(createPluginApi(plugin.name))} - +
); })} @@ -314,6 +323,7 @@ export const JustWeb3Button: FC = ({ title={'mApps'} style={{ width: '100%', + display: 'none', }} onClick={() => setOpenMApps(true)} right={ diff --git a/packages/@justweb3/widget/src/lib/components/Profile/MembersSection/index.tsx b/packages/@justweb3/widget/src/lib/components/Profile/MembersSection/index.tsx index 28f93d5f..74efde9f 100644 --- a/packages/@justweb3/widget/src/lib/components/Profile/MembersSection/index.tsx +++ b/packages/@justweb3/widget/src/lib/components/Profile/MembersSection/index.tsx @@ -33,6 +33,10 @@ const MembersSection: React.FC = ({ .flatMap((sub) => sub.ens); }, [data]); + const subnameRecords = useMemo(() => { + return data?.pages.flatMap((subnameData) => subnameData.data); + }, [data]); + useEffect(() => { const element = scrollContainerRef.current; @@ -65,6 +69,11 @@ const MembersSection: React.FC = ({ 50 ); + // useStandardRecordsBatch({ + // enses: subnames, + // chainId: chainId as ChainId, + // }); + return (
{subnames?.map((subname) => ( @@ -77,7 +86,10 @@ const MembersSection: React.FC = ({ addressOrEns={subname} style={{ width: '100%' }} chainId={chainId} - skipInViewFetch={true} + prefetchedRecords={subnameRecords?.find( + (record) => record.ens === subname + )} + // skipFetch />
))} diff --git a/packages/@justweb3/widget/src/lib/index.ts b/packages/@justweb3/widget/src/lib/index.ts index e51caa2c..e6831d0f 100644 --- a/packages/@justweb3/widget/src/lib/index.ts +++ b/packages/@justweb3/widget/src/lib/index.ts @@ -6,11 +6,13 @@ import { ProfileSection } from './components/Profile/ProfileSection'; import { JustWeb3Button } from './components/JustWeb3Button'; import { MetadataCard } from './components/MetadataCard'; import { JustEnsCard } from './components/JustEnsCard'; +import { BasePopoverContent } from './components/DefaultPopover'; +export * from './types'; export * from './plugins'; export * from './providers'; export * from './hooks'; -export * from './icons' +export * from './icons'; export { JustaNameFooter, JustWeb3Button, @@ -19,4 +21,5 @@ export { DefaultDialog as JustaNameDialog, LoadingDialog as JustaNameLoadingDialog, ProfileSection, + BasePopoverContent as JustaNamePopoverContent, }; diff --git a/packages/@justweb3/widget/src/lib/plugins/index.ts b/packages/@justweb3/widget/src/lib/plugins/index.ts index 4ca296d0..6337ffd3 100644 --- a/packages/@justweb3/widget/src/lib/plugins/index.ts +++ b/packages/@justweb3/widget/src/lib/plugins/index.ts @@ -2,6 +2,7 @@ import { UseEnsAuthReturn, UseRecordsResult } from '@justaname.id/react'; import { EventEmitter } from './eventEmitter'; import { ReactNode } from 'react'; import { ChainId } from '@justaname.id/sdk'; +import { JustWeb3ProviderConfig } from '../types/config'; export interface PluginApi { connectedEns: UseEnsAuthReturn['connectedEns']; @@ -12,6 +13,7 @@ export interface PluginApi { mApps: string[]; setState: (key: string, value: T) => void; getState: (key: string) => T | undefined; + config: JustWeb3ProviderConfig; eventEmitter: EventEmitter; diff --git a/packages/@justweb3/widget/src/lib/providers/JustWeb3Provider/index.tsx b/packages/@justweb3/widget/src/lib/providers/JustWeb3Provider/index.tsx index 4529a9c5..f91ca993 100644 --- a/packages/@justweb3/widget/src/lib/providers/JustWeb3Provider/index.tsx +++ b/packages/@justweb3/widget/src/lib/providers/JustWeb3Provider/index.tsx @@ -22,10 +22,7 @@ import { useRecords, UseSubnameUpdateFunctionParams, } from '@justaname.id/react'; -import { - JustWeb3ThemeProvider, - JustWeb3ThemeProviderConfig, -} from '@justweb3/ui'; +import { JustWeb3ThemeProvider } from '@justweb3/ui'; import { SignInDialog } from '../../dialogs/SignInDialog'; import { MAppsProvider } from '../MAppProvider'; import { JustaPlugin } from '../../plugins'; @@ -33,19 +30,7 @@ import usePreviousState from '../../hooks/usePreviousState'; import { ProfileDialog, UpdateRecordDialog } from '../../dialogs'; import { isEqual } from 'lodash'; import { ChainId } from '@justaname.id/sdk'; - -// import '@justweb3/ui/styles.css'; - -export interface JustWeb3ProviderConfig - extends JustaNameProviderConfig, - JustWeb3ThemeProviderConfig { - openOnWalletConnect?: boolean; - allowedEns?: 'all' | 'claimable' | string[]; - logo?: string; - disableOverlay?: boolean; - mApps?: (string | { name: string; openOnConnect: boolean })[]; - plugins?: JustaPlugin[]; -} +import { JustWeb3ProviderConfig } from '../../types/config'; export interface JustWeb3ProviderProps { children: ReactNode; @@ -216,6 +201,7 @@ export const JustWeb3Provider: FC = ({ logo={config.logo} mApps={allMApps} plugins={plugins} + config={config} handleOpenSignInDialog={handleOpenSignInDialog} > ({ mAppsToEnable: undefined, mAppsAlreadyEnabled: undefined, canEnableMApps: undefined, - handleOpenAuthorizeMAppDialog: () => { }, - handleOpenRevokeMAppDialog: () => { }, - handleOpenSignInDialog: () => { }, + handleOpenAuthorizeMAppDialog: () => {}, + handleOpenRevokeMAppDialog: () => {}, + handleOpenSignInDialog: () => {}, }); interface MAppsProviderProps { @@ -52,6 +54,7 @@ interface MAppsProviderProps { }[]; plugins: JustaPlugin[]; disableOverlay?: boolean; + config: JustWeb3ProviderConfig; } export const MAppsProvider: FC = ({ @@ -60,74 +63,89 @@ export const MAppsProvider: FC = ({ children, disableOverlay, mApps: initialMApps = [], - plugins + plugins, + config, }) => { const { isEnsAuthPending, isLoggedIn, connectedEns } = useEnsAuth(); - const [mAppsToEnableOpen, setMAppsToEnableOpen] = useState<{ name: string; isOpen: boolean }[] | undefined>(undefined); - const [mAppsAlreadyEnabledOpen, setMAppsAlreadyEnabledOpen] = useState<{ name: string; isOpen: boolean }[] | undefined>(undefined); + const [mAppsToEnableOpen, setMAppsToEnableOpen] = useState< + { name: string; isOpen: boolean }[] | undefined + >(undefined); + const [mAppsAlreadyEnabledOpen, setMAppsAlreadyEnabledOpen] = useState< + { name: string; isOpen: boolean }[] | undefined + >(undefined); const { canEnableMApps } = useCanEnableMApps({ ens: connectedEns?.ens || '', - }) + }); const { enabledMApps } = useEnabledMApps({ - ens: connectedEns?.ens || '' + ens: connectedEns?.ens || '', }); const mAppsToEnable = useMemo(() => { if (!initialMApps || !enabledMApps) { return undefined; } - return initialMApps.filter((mApp) => !enabledMApps.includes(mApp.name)) + return initialMApps.filter((mApp) => !enabledMApps.includes(mApp.name)); }, [initialMApps, enabledMApps]); const mAppsAlreadyEnabled = useMemo(() => { if (!initialMApps || !enabledMApps) { return undefined; } - return initialMApps.filter((mApp) => enabledMApps.includes(mApp.name)) + return initialMApps.filter((mApp) => enabledMApps.includes(mApp.name)); }, [initialMApps, enabledMApps]); useEffect(() => { if (!mAppsToEnable) { return; } - setMAppsToEnableOpen(mAppsToEnable.map((mApp) => ({ name: mApp.name, isOpen: mApp.openOnConnect }))); + setMAppsToEnableOpen( + mAppsToEnable.map((mApp) => ({ + name: mApp.name, + isOpen: mApp.openOnConnect, + })) + ); }, [mAppsToEnable]); useEffect(() => { if (!mAppsAlreadyEnabled) { return; } - setMAppsAlreadyEnabledOpen(mAppsAlreadyEnabled.map((mApp) => ({ name: mApp.name, isOpen: false }))); + setMAppsAlreadyEnabledOpen( + mAppsAlreadyEnabled.map((mApp) => ({ name: mApp.name, isOpen: false })) + ); }, [mAppsAlreadyEnabled]); - const handleOpenAuthorizeMAppDialog = useCallback( (mAppName: string, open = true) => { - setMAppsToEnableOpen((prev) => prev?.map((mApp) => { - if (mApp.name === mAppName) { - return { - ...mApp, - isOpen: open, - }; - } - return mApp; - })); + setMAppsToEnableOpen((prev) => + prev?.map((mApp) => { + if (mApp.name === mAppName) { + return { + ...mApp, + isOpen: open, + }; + } + return mApp; + }) + ); }, [] ); const handleOpenRevokeMAppDialog = useCallback( (mAppName: string, open = true) => { - setMAppsAlreadyEnabledOpen((prev) => prev?.map((mApp) => { - if (mApp.name === mAppName) { - return { - ...mApp, - isOpen: open, - }; - } - return mApp; - })); + setMAppsAlreadyEnabledOpen((prev) => + prev?.map((mApp) => { + if (mApp.name === mAppName) { + return { + ...mApp, + isOpen: open, + }; + } + return mApp; + }) + ); }, [] ); @@ -140,7 +158,7 @@ export const MAppsProvider: FC = ({ handleOpenAuthorizeMAppDialog, handleOpenRevokeMAppDialog, canEnableMApps, - handleOpenSignInDialog + handleOpenSignInDialog, }} > = ({ handleOpenSignInDialog={handleOpenSignInDialog} handleOpenAuthorizeMAppDialog={handleOpenAuthorizeMAppDialog} handleOpenRevokeMAppDialog={handleOpenRevokeMAppDialog} + config={config} > - {mAppsToEnableOpen && mAppsToEnableOpen.map((mApp) => ( - - handleOpenAuthorizeMAppDialog(mApp.name, open)} - mApp={mApp} - logo={logo} - handleOpenSignInDialog={handleOpenSignInDialog} - connectedEns={connectedEns?.ens} - isEnsAuthPending={isEnsAuthPending} - isLoggedIn={isLoggedIn} - disableOverlay={disableOverlay} - /> - - ))} - {mAppsAlreadyEnabledOpen && mAppsAlreadyEnabledOpen.map((mApp) => ( - - handleOpenRevokeMAppDialog(mApp.name, open)} - mApp={mApp} - logo={logo} - handleOpenSignInDialog={handleOpenSignInDialog} - connectedEns={connectedEns?.ens} - isEnsAuthPending={isEnsAuthPending} - isLoggedIn={isLoggedIn} - disableOverlay={disableOverlay} - /> - - )) - } + {mAppsToEnableOpen && + mAppsToEnableOpen.map((mApp) => ( + + + handleOpenAuthorizeMAppDialog(mApp.name, open) + } + mApp={mApp} + logo={logo} + handleOpenSignInDialog={handleOpenSignInDialog} + connectedEns={connectedEns?.ens} + isEnsAuthPending={isEnsAuthPending} + isLoggedIn={isLoggedIn} + disableOverlay={disableOverlay} + /> + + ))} + {mAppsAlreadyEnabledOpen && + mAppsAlreadyEnabledOpen.map((mApp) => ( + + + handleOpenRevokeMAppDialog(mApp.name, open) + } + mApp={mApp} + logo={logo} + handleOpenSignInDialog={handleOpenSignInDialog} + connectedEns={connectedEns?.ens} + isEnsAuthPending={isEnsAuthPending} + isLoggedIn={isLoggedIn} + disableOverlay={disableOverlay} + /> + + ))} {children} @@ -197,16 +221,14 @@ interface UseMAppResult { isPending: boolean; } -export const useMApp = ({ - mApp, -}: UseMAppParams): UseMAppResult => { +export const useMApp = ({ mApp }: UseMAppParams): UseMAppResult => { const { handleOpenAuthorizeMAppDialog: contextOpenAuthorizeMAppDialog, handleOpenRevokeMAppDialog: contextOpenRevokeMAppDialog, handleOpenSignInDialog, } = useContext(MAppContext); - const { connectedEns } = useEnsAuth() + const { connectedEns } = useEnsAuth(); const { isMAppEnabled, isMAppEnabledPending } = useIsMAppEnabled({ ens: connectedEns?.ens || '', mApp, @@ -284,11 +306,10 @@ export const useMApp = ({ }; }; - export const useMApps = (): MAppContextProps => { const context = useContext(MAppContext); if (context === undefined) { throw new Error('useMApps must be used within a MAppsProvider'); } return context; -} \ No newline at end of file +}; diff --git a/packages/@justweb3/widget/src/lib/providers/PluginProvider/index.tsx b/packages/@justweb3/widget/src/lib/providers/PluginProvider/index.tsx index d63b22a3..b6a4e822 100644 --- a/packages/@justweb3/widget/src/lib/providers/PluginProvider/index.tsx +++ b/packages/@justweb3/widget/src/lib/providers/PluginProvider/index.tsx @@ -18,6 +18,7 @@ import { EventEmitter } from '../../plugins/eventEmitter'; import { JustaPlugin, PluginApi } from '../../plugins'; import usePreviousState from '../../hooks/usePreviousState'; import { isEqual } from 'lodash'; +import { JustWeb3ProviderConfig } from '../../types/config'; export interface PluginContextProps { createPluginApi: (pluginName: string) => PluginApi; @@ -36,6 +37,7 @@ interface PluginProviderProps { handleOpenAuthorizeMAppDialog: (mAppName: string, open: boolean) => void; handleOpenRevokeMAppDialog: (mAppName: string, open: boolean) => void; mApps?: string[]; + config: JustWeb3ProviderConfig; } export const PluginProvider: FC = ({ @@ -45,6 +47,7 @@ export const PluginProvider: FC = ({ handleOpenAuthorizeMAppDialog, handleOpenRevokeMAppDialog, mApps, + config, }) => { const { connectedEns, isEnsAuthPending, isLoggedIn } = useEnsAuth(); const { records } = useRecords({ @@ -85,6 +88,7 @@ export const PluginProvider: FC = ({ handleOpenAuthorizeMAppDialog, handleOpenRevokeMAppDialog, records, + config, eventEmitter: new EventEmitter(), setState: function (key: string, value: T): void { setPluginStates((prev) => ({ diff --git a/packages/@justweb3/widget/src/lib/types/config/index.ts b/packages/@justweb3/widget/src/lib/types/config/index.ts new file mode 100644 index 00000000..89ce259c --- /dev/null +++ b/packages/@justweb3/widget/src/lib/types/config/index.ts @@ -0,0 +1,14 @@ +import { JustaNameProviderConfig } from '@justaname.id/react'; +import { JustWeb3ThemeProviderConfig } from '@justweb3/ui'; +import { JustaPlugin } from '../../plugins'; + +export interface JustWeb3ProviderConfig + extends JustaNameProviderConfig, + JustWeb3ThemeProviderConfig { + openOnWalletConnect?: boolean; + allowedEns?: 'all' | 'claimable' | string[]; + logo?: string; + disableOverlay?: boolean; + mApps?: (string | { name: string; openOnConnect: boolean })[]; + plugins?: JustaPlugin[]; +} diff --git a/packages/@justweb3/widget/src/lib/types/index.ts b/packages/@justweb3/widget/src/lib/types/index.ts new file mode 100644 index 00000000..f03c2281 --- /dev/null +++ b/packages/@justweb3/widget/src/lib/types/index.ts @@ -0,0 +1 @@ +export * from './config'; diff --git a/packages/@justweb3/xmtp-plugin/.babelrc b/packages/@justweb3/xmtp-plugin/.babelrc new file mode 100644 index 00000000..1ea870ea --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/packages/@justweb3/xmtp-plugin/.env.example b/packages/@justweb3/xmtp-plugin/.env.example new file mode 100644 index 00000000..b65ab5ba --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.env.example @@ -0,0 +1,6 @@ +STORYBOOK_APP_BACKEND_URL=http://localhost:3333 +STORYBOOK_APP_ORIGIN=http://localhost:3000 +STORYBOOK_APP_DOMAIN=localhost +STORYBOOK_APP_MAINNET_PROVIDER_URL= +STORYBOOK_APP_SEPOLIA_PROVIDER_URL= +STORYBOOK_APP_PRIVY_APP_ID= \ No newline at end of file diff --git a/packages/@justweb3/xmtp-plugin/.eslintrc.json b/packages/@justweb3/xmtp-plugin/.eslintrc.json new file mode 100644 index 00000000..324c11cb --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.eslintrc.json @@ -0,0 +1,40 @@ +{ + "extends": ["plugin:@nx/react", "../../../.eslintrc.base.json"], + "ignorePatterns": ["!**/*", "dist", "src/test"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": { + "@typescript-eslint/ban-types": ["warn"], + "@typescript-eslint/no-empty-function": ["warn"], + "@typescript-eslint/no-empty-interface": ["warn"] + } + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/dependency-checks": [ + "error", + { + "ignoredFiles": ["{projectRoot}/rollup.config.{js,ts,mjs,mts,cjs}", "{projectRoot}/src/stories/**/*", "{projectRoot}/.storybook/**/*"], + "ignoredDependencies": [ + "@justaname.id/siwens", + "@justaname.id/sdk", + "@justaname.id/react", + "@justweb3/ui" + ] + } + ] + } + } + ] +} diff --git a/packages/@justweb3/xmtp-plugin/.gitignore b/packages/@justweb3/xmtp-plugin/.gitignore new file mode 100644 index 00000000..4c49bd78 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.gitignore @@ -0,0 +1 @@ +.env diff --git a/packages/@justweb3/xmtp-plugin/.storybook/main.ts b/packages/@justweb3/xmtp-plugin/.storybook/main.ts new file mode 100644 index 00000000..3e575653 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.storybook/main.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig } from '@storybook/react-vite'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; +import { mergeConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +const config: StorybookConfig = { + stories: ['../src/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], + addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + + viteFinal: async (config) => + mergeConfig(config, { + plugins: [react(), nxViteTsPaths()], + define: { + 'process.env': process.env, + }, + optimizeDeps: { + exclude: ['@xmtp/user-preferences-bindings-wasm'], + }, + }), + typescript: { + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + include: ['src/**/*.{ts,tsx}'], + }, + }, +}; + +export default config; + +// To customize your Vite configuration you can use the viteFinal field. +// Check https://storybook.js.org/docs/react/builders/vite#configuration +// and https://nx.dev/recipes/storybook/custom-builder-configs diff --git a/packages/@justweb3/xmtp-plugin/.storybook/polyfills.ts b/packages/@justweb3/xmtp-plugin/.storybook/polyfills.ts new file mode 100644 index 00000000..38b13be9 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.storybook/polyfills.ts @@ -0,0 +1,4 @@ +import { Buffer } from 'buffer'; + +window.Buffer = window.Buffer ?? Buffer; +window.global = window.global ?? window; diff --git a/packages/@justweb3/xmtp-plugin/.storybook/preview.tsx b/packages/@justweb3/xmtp-plugin/.storybook/preview.tsx new file mode 100644 index 00000000..940554e4 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.storybook/preview.tsx @@ -0,0 +1,3 @@ +import './polyfills'; + +export const decorators = [(Story) => ]; diff --git a/packages/@justweb3/xmtp-plugin/.svgrrc.js b/packages/@justweb3/xmtp-plugin/.svgrrc.js new file mode 100644 index 00000000..1bf9583a --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/.svgrrc.js @@ -0,0 +1,6 @@ +module.exports ={ + "typescript": true, + "template": require("./src/template/template.js"), + "dimensions": false, + "svgo": true +} diff --git a/packages/@justweb3/xmtp-plugin/CHANGELOG.md b/packages/@justweb3/xmtp-plugin/CHANGELOG.md new file mode 100644 index 00000000..95d762ea --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/CHANGELOG.md @@ -0,0 +1,675 @@ +## 0.1.32 (2024-11-04) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.136 +- Updated @justweb3/ui to 0.0.72 +- Updated @justweb3/widget to 0.0.72 + +## 0.1.31 (2024-11-04) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.135 +- Updated @justweb3/ui to 0.0.71 +- Updated @justweb3/widget to 0.0.71 + +## 0.1.30 (2024-11-04) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.134 +- Updated @justweb3/ui to 0.0.70 +- Updated @justweb3/widget to 0.0.70 + +## 0.1.29 (2024-11-04) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.133 +- Updated @justweb3/ui to 0.0.69 +- Updated @justweb3/widget to 0.0.69 + +## 0.1.28 (2024-11-04) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.132 +- Updated @justweb3/ui to 0.0.68 +- Updated @justweb3/widget to 0.0.68 + +## 0.1.27 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.131 +- Updated @justweb3/ui to 0.0.67 +- Updated @justweb3/widget to 0.0.67 + +## 0.1.26 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.130 +- Updated @justweb3/ui to 0.0.66 +- Updated @justweb3/widget to 0.0.66 + +## 0.1.25 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.129 +- Updated @justweb3/ui to 0.0.65 +- Updated @justweb3/widget to 0.0.65 + +## 0.1.24 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.128 +- Updated @justweb3/ui to 0.0.64 +- Updated @justweb3/widget to 0.0.64 + +## 0.1.23 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.127 +- Updated @justweb3/ui to 0.0.63 +- Updated @justweb3/widget to 0.0.63 + +## 0.1.22 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.126 +- Updated @justweb3/ui to 0.0.62 +- Updated @justweb3/widget to 0.0.62 + +## 0.1.21 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.125 +- Updated @justweb3/ui to 0.0.61 +- Updated @justweb3/widget to 0.0.61 + +## 0.1.20 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.124 +- Updated @justweb3/ui to 0.0.60 +- Updated @justweb3/widget to 0.0.60 + +## 0.1.19 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.123 +- Updated @justweb3/ui to 0.0.59 +- Updated @justweb3/widget to 0.0.59 + +## 0.1.18 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.122 +- Updated @justweb3/ui to 0.0.58 +- Updated @justweb3/widget to 0.0.58 + +## 0.1.17 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.121 +- Updated @justweb3/ui to 0.0.57 +- Updated @justweb3/widget to 0.0.57 + +## 0.1.16 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.120 +- Updated @justweb3/ui to 0.0.56 +- Updated @justweb3/widget to 0.0.56 + +## 0.1.15 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.119 +- Updated @justweb3/ui to 0.0.55 +- Updated @justweb3/widget to 0.0.55 + +## 0.1.14 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.118 +- Updated @justweb3/ui to 0.0.54 +- Updated @justweb3/widget to 0.0.54 + +## 0.1.13 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.117 +- Updated @justweb3/ui to 0.0.53 +- Updated @justweb3/widget to 0.0.53 + +## 0.1.12 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.116 +- Updated @justweb3/ui to 0.0.52 +- Updated @justweb3/widget to 0.0.52 + +## 0.1.11 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.115 +- Updated @justweb3/ui to 0.0.51 +- Updated @justweb3/widget to 0.0.51 + +## 0.1.10 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.114 +- Updated @justweb3/ui to 0.0.50 +- Updated @justweb3/widget to 0.0.50 + +## 0.1.9 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.113 +- Updated @justweb3/ui to 0.0.49 +- Updated @justweb3/widget to 0.0.49 + +## 0.1.8 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.112 +- Updated @justweb3/ui to 0.0.48 +- Updated @justweb3/widget to 0.0.48 + +## 0.1.7 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.111 +- Updated @justweb3/ui to 0.0.47 +- Updated @justweb3/widget to 0.0.47 + +## 0.1.6 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.110 +- Updated @justweb3/ui to 0.0.46 +- Updated @justweb3/widget to 0.0.46 + +## 0.1.5 (2024-10-31) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/react to 0.3.109 +- Updated @justweb3/ui to 0.0.45 +- Updated @justweb3/widget to 0.0.45 + +## 0.1.4 (2024-10-30) + +This was a version bump only for @justweb3/efp-plugin to align it with other projects, there were no code changes. + +## 0.1.3 (2024-10-30) + +This was a version bump only for @justweb3/efp-plugin to align it with other projects, there were no code changes. + +## 0.1.2 (2024-10-30) + +This was a version bump only for @justweb3/efp-plugin to align it with other projects, there were no code changes. + +## 0.1.1 (2024-10-30) + +This was a version bump only for @justweb3/efp-plugin to align it with other projects, there were no code changes. + +## 0.1.0 (2024-10-30) + + +### ๐Ÿš€ Features + +- remove mapps from justverified ([2898c52](https://github.com/JustaName-id/JustaName-sdk/commit/2898c52)) + +- efp ([36fcc15](https://github.com/JustaName-id/JustaName-sdk/commit/36fcc15)) + +- efp and storybook for react sdk ([f0c5c7a](https://github.com/JustaName-id/JustaName-sdk/commit/f0c5c7a)) + + +### โค๏ธ Thank You + +- HadiKhai + +## 0.0.38 (2024-10-21) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.100 +- Updated @justaname.id/react to 0.3.103 +- Updated @justweb3/ui to 0.0.39 +- Updated @justweb3/widget to 0.0.39 + +## 0.0.37 (2024-10-21) + + +### ๐Ÿš€ Features + +- justverified fixes and double vc signature due to rerending fixed ([57965f5](https://github.com/JustaName-id/JustaName-sdk/commit/57965f5)) + +- update functionality ([69c4761](https://github.com/JustaName-id/JustaName-sdk/commit/69c4761)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.99 +- Updated @justaname.id/react to 0.3.102 +- Updated @justweb3/ui to 0.0.38 +- Updated @justweb3/widget to 0.0.38 + + +### โค๏ธ Thank You + +- HadiKhai + +## 0.0.36 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.37 +- Updated @justweb3/widget to 0.0.37 + +## 0.0.35 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.36 +- Updated @justweb3/widget to 0.0.36 + +## 0.0.34 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.35 +- Updated @justweb3/widget to 0.0.35 + +## 0.0.33 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.34 +- Updated @justweb3/widget to 0.0.34 + +## 0.0.32 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.33 +- Updated @justweb3/widget to 0.0.33 + +## 0.0.31 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.32 +- Updated @justweb3/widget to 0.0.32 + +## 0.0.30 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.31 +- Updated @justweb3/widget to 0.0.31 + +## 0.0.29 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justweb3/ui to 0.0.30 +- Updated @justweb3/widget to 0.0.30 + +## 0.0.28 (2024-10-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.98 +- Updated @justaname.id/react to 0.3.101 +- Updated @justweb3/ui to 0.0.29 +- Updated @justweb3/widget to 0.0.29 + +## 0.0.27 (2024-09-22) + + +### ๐Ÿš€ Features + +- isCanOpenMAppDialogPending ([#32](https://github.com/JustaName-id/JustaName-sdk/pull/32)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.91 +- Updated @justaname.id/react to 0.3.94 + + +### โค๏ธ Thank You + +- JustHadi @HadiKhai + +## 0.0.26 (2024-09-22) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.90 +- Updated @justaname.id/react to 0.3.93 + +## 0.0.25 (2024-09-22) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.89 +- Updated @justaname.id/react to 0.3.92 + +## 0.0.24 (2024-09-21) + + +### ๐Ÿš€ Features + +- expose usemapp in the package ([#29](https://github.com/JustaName-id/JustaName-sdk/pull/29)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.88 +- Updated @justaname.id/react to 0.3.91 + + +### โค๏ธ Thank You + +- JustHadi @HadiKhai + +## 0.0.23 (2024-09-21) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.87 +- Updated @justaname.id/react to 0.3.90 + +## 0.0.22 (2024-09-21) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.86 +- Updated @justaname.id/react to 0.3.89 + +## 0.0.21 (2024-09-20) + + +### ๐Ÿš€ Features + +- mApp in sdk react and react-signin ([#26](https://github.com/JustaName-id/JustaName-sdk/pull/26)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.85 +- Updated @justaname.id/react to 0.3.88 + + +### โค๏ธ Thank You + +- JustHadi @HadiKhai + +## 0.0.20 (2024-09-20) + + +### ๐Ÿฉน Fixes + +- **react-signin:** design subnames ([b384537](https://github.com/JustaName-id/JustaName-sdk/commit/b384537)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.84 +- Updated @justaname.id/react to 0.3.87 + + +### โค๏ธ Thank You + +- anthony2399 @anthony23991 + +## 0.0.19 (2024-09-19) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.83 +- Updated @justaname.id/react to 0.3.86 + +## 0.0.18 (2024-09-19) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.82 +- Updated @justaname.id/react to 0.3.85 + +## 0.0.17 (2024-09-19) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.81 +- Updated @justaname.id/react to 0.3.84 + +## 0.0.16 (2024-09-18) + + +### ๐Ÿš€ Features + +- siwens and ebdc ([87677f3](https://github.com/JustaName-id/JustaName-sdk/commit/87677f3)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.80 +- Updated @justaname.id/react to 0.3.83 + + +### โค๏ธ Thank You + +- HadiKhai + +## 0.0.15 (2024-09-18) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.79 +- Updated @justaname.id/react to 0.3.82 + +## 0.0.14 (2024-09-16) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.78 +- Updated @justaname.id/react to 0.3.81 + +## 0.0.13 (2024-09-16) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.77 +- Updated @justaname.id/react to 0.3.80 + +## 0.0.12 (2024-09-15) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.76 +- Updated @justaname.id/react to 0.3.79 + +## 0.0.11 (2024-09-15) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.75 +- Updated @justaname.id/react to 0.3.78 + +## 0.0.10 (2024-09-15) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.74 +- Updated @justaname.id/react to 0.3.77 + +## 0.0.9 (2024-09-15) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.73 +- Updated @justaname.id/react to 0.3.76 + +## 0.0.8 (2024-09-15) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.72 +- Updated @justaname.id/react to 0.3.75 + +## 0.0.7 (2024-09-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.71 +- Updated @justaname.id/react to 0.3.74 + +## 0.0.6 (2024-09-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.70 +- Updated @justaname.id/react to 0.3.73 + +## 0.0.5 (2024-09-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.69 +- Updated @justaname.id/react to 0.3.72 + +## 0.0.4 (2024-09-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.68 +- Updated @justaname.id/react to 0.3.71 + +## 0.0.3 (2024-09-14) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.67 +- Updated @justaname.id/react to 0.3.70 + +## 0.0.2 (2024-09-14) + + +### ๐Ÿš€ Features + +- published react-signin and react-ui ([1d90025](https://github.com/JustaName-id/JustaName-sdk/commit/1d90025)) + +- added git repository for new packages ([e40c722](https://github.com/JustaName-id/JustaName-sdk/commit/e40c722)) + + +### ๐Ÿงฑ Updated Dependencies + +- Updated @justaname.id/sdk to 0.2.66 +- Updated @justaname.id/react to 0.3.69 + + +### โค๏ธ Thank You + +- anthony2399 @anthony23991 + +## 0.0.1 (2024-09-13) + + +### ๐Ÿš€ Features + +- signin widget and privy example ([3f9bc14](https://github.com/JustaName-id/JustaName-sdk/commit/3f9bc14)) + +- update loading flags in hooks naming convention ([70f70a4](https://github.com/JustaName-id/JustaName-sdk/commit/70f70a4)) + +- update subname ([12755c4](https://github.com/JustaName-id/JustaName-sdk/commit/12755c4)) + + +### โค๏ธ Thank You + +- HadiKhai \ No newline at end of file diff --git a/packages/@justweb3/xmtp-plugin/README.md b/packages/@justweb3/xmtp-plugin/README.md new file mode 100644 index 00000000..261859ff --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/README.md @@ -0,0 +1,58 @@ +# @justweb3/xmtp-plugin + +The **@justweb3/xmtp-plugin** extends the **JustWeb3 Widget** with **Builder Score (Talent Protocol)** functionalities, allowing users to **view Talent Protocol Credentials and Builder Score** directly within your dApp. + +--- + +## Installation + +Install the **Talent Protocol Plugin** using your preferred package manager: + +```bash +bash +npm install @justweb3/xmtp-plugin + +# or + +yarn add @justweb3/xmtp-plugin +``` + +--- + +## Usage Example + +Hereโ€™s how to enable the **Talent Protocol Plugin** in your **JustWeb3 Widget** configuration: + +```tsx +import { TalentProtocolPlugin } from '@justweb3/xmtp-plugin'; + +const justweb3Config = { + config: { + origin: 'http://localhost:3000/', + domain: 'localhost', + signInTtl: 86400000, + }, + plugins: [ + TalentProtocolPlugin({ + apiKey: "", // # Optional: Calls the Talent Protocol API from the client side + backendUrl: "", // # Optional: Calls the Talent Protocol API from the backend, best for production + }) + ], + ensDomains: [ + { + ensDomain: 'yourdomain.eth', + apiKey: 'YOUR_API_KEY', + chainId: 1, + }, + ], + color: { + primary: '#FEA801', + background: 'hsl(0, 0%, 100%)', + destructive: 'hsl(0, 100%, 50%)', + }, +}; +``` + +### Contributing + +Contributions are welcome! If you have suggestions or find issues, please open an issue or submit a pull request on the GitHub repository. diff --git a/packages/@justweb3/xmtp-plugin/env.d.ts b/packages/@justweb3/xmtp-plugin/env.d.ts new file mode 100644 index 00000000..6ae21f5d --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/env.d.ts @@ -0,0 +1,15 @@ +/// + +interface ImportMetaEnv { + STORYBOOK_APP_CHAIN_ID: string; + STORYBOOK_APP_ORIGIN: string; + STORYBOOK_APP_DOMAIN: string; + STORYBOOK_APP_BACKEND_URL: string; + STORYBOOK_APP_PROVIDER_URL: string; + STORYBOOK_APP_ENS_DOMAIN: string; + STORYBOOK_APP_ENV: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/packages/@justweb3/xmtp-plugin/jest.config.ts b/packages/@justweb3/xmtp-plugin/jest.config.ts new file mode 100644 index 00000000..7c44f4d5 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/jest.config.ts @@ -0,0 +1,12 @@ +/* eslint-disable */ +export default { + displayName: '@justweb3/xmtp-plugin', + preset: '../../../jest.preset.js', + transform: { + '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest', + '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }], + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../../coverage/packages/@justweb3/xmtp-plugin', + passWithNoTests: true, +}; diff --git a/packages/@justweb3/xmtp-plugin/package.json b/packages/@justweb3/xmtp-plugin/package.json new file mode 100644 index 00000000..35af25b3 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/package.json @@ -0,0 +1,26 @@ +{ + "name": "@justweb3/xmtp-plugin", + "version": "0.0.1", + "dependencies": { + "@xmtp/react-sdk": "^9.0.0" + }, + "peerDependencies": { + "@justweb3/widget": ">=0.0.0", + "react": ">=17", + "wagmi": "2.x" + }, + "exports": { + "./package.json": "./dist/package.json", + ".": "./dist/index.esm.js" + }, + "publishConfig": { + "access": "public" + }, + "module": "./dist/index.esm.js", + "main": "./dist/index.esm.js", + "types": "./dist/index.esm.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/JustaName-id/JustaName-sdk" + } +} diff --git a/packages/@justweb3/xmtp-plugin/project.json b/packages/@justweb3/xmtp-plugin/project.json new file mode 100644 index 00000000..9fceb79c --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/project.json @@ -0,0 +1,131 @@ +{ + "name": "@justweb3/xmtp-plugin", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/@justweb3/xmtp-plugin/src", + "projectType": "library", + "tags": [], + "targets": { + "storybook": { + "executor": "@nx/storybook:storybook", + "options": { + "port": 4407, + "configDir": "packages/@justweb3/xmtp-plugin/.storybook" + }, + "configurations": { + "ci": { + "quiet": true + } + } + }, + "typedoc": { + "executor": "nx:run-commands", + "options": { + "commands": [ + { + "command": "typedoc" + } + ], + "cwd": "packages/@justweb3/xmtp-plugin", + "parallel": false + } + }, + "build": { + "executor": "nx:run-commands", + "options": { + "commands": [ + { + "command": "nx buildProject @justweb3/xmtp-plugin" + }, + { + "command": "node update-package-json.js" + }, + { + "command": "npx rimraf node_modules" + } + ], + "cwd": "packages/@justweb3/xmtp-plugin", + "parallel": false + } + }, + "buildProject": { + "executor": "@nx/rollup:rollup", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "outputPath": "packages/@justweb3/xmtp-plugin/dist", + "tsConfig": "packages/@justweb3/xmtp-plugin/tsconfig.lib.json", + "project": "packages/@justweb3/xmtp-plugin/package.json", + "entryFile": "packages/@justweb3/xmtp-plugin/src/index.ts", + "external": [ + "react", + "react-dom", + "react/jsx-runtime", + "@justaname.id/react", + "@justweb3/ui", + "@justaname.id/sdk", + "@justweb3/widget" + ], + "rollupConfig": "packages/@justweb3/xmtp-plugin/rollup.config.cjs", + "generateExportsField": true, + "compiler": "swc", + "format": ["esm"], + "assets": [ + { + "glob": "packages/@justweb3/xmtp-plugin/README.md", + "input": ".", + "output": "." + } + ] + }, + "configurations": { + "production": { + "optimization": true, + "sourceMap": false, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false + } + } + }, + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "fix": true, + "lintFilePatterns": [ + "packages/@justweb3/xmtp-plugin/**/*.{ts,tsx,js,jsx}", + "packages/@justweb3/xmtp-plugin/package.json" + ] + } + }, + "publish": { + "command": "node tools/scripts/publish.mjs @justweb3/xmtp-plugin {args.ver} {args.tag}", + "dependsOn": ["build"] + }, + "nx-release-publish": { + "options": { + "packageRoot": "packages/@justweb3/xmtp-plugin/dist" + }, + "dependsOn": ["^build", "build", "^@justaname.id/react:build"] + }, + "release:package": { + "executor": "nx:run-commands", + "options": { + "command": "npx semantic-release --debug --extends=./packages/@justweb3/xmtp-plugin/release.config.js" + } + }, + "update-deps": { + "executor": "nx:run-commands", + "options": { + "command": "npx rjp ./packages/@justweb3/xmtp-plugin/dist/package.json $PACKAGE_NAME $VERSION" + } + }, + "transform:linux": { + "executor": "nx:run-commands", + "options": { + "cwd": "packages/@justweb3/xmtp-plugin", + "command": "rm -rf src/lib/icons/components && mkdir src/lib/icons/components && npx @svgr/cli --out-dir src/lib/icons/components --config-file .svgrrc.js --index-template=src/template/linux/index-template.js -- src/lib/icons/svgs " + } + } + } +} diff --git a/packages/@justweb3/xmtp-plugin/release.config.js b/packages/@justweb3/xmtp-plugin/release.config.js new file mode 100644 index 00000000..cfcf0470 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/release.config.js @@ -0,0 +1,46 @@ +const libName = 'react-signin'; +const artifactName = 'justaname-react-signin'; +const libPath = `packages/@justaname.id/${libName}`; +const importPath = `@justaname.id/${libName}`; + +module.exports = { + name: libName, + pkgRoot: `${libPath}/dist`, + branches: [ + '+([0-9])?(.{+([0-9]),x}).x', + ' main', + 'next', + 'next-major', + { name: 'beta', prerelease: true }, + { name: 'alpha', prerelease: true }, + ], + tagFormat: artifactName + '-v${version}', + commitPaths: [`${libPath}/*`], + assets: [`${libPath}/README.md`, `${libPath}/CHANGELOG.md`], + plugins: [ + '@semantic-release/commit-analyzer', + '@semantic-release/release-notes-generator', + [ + '@semantic-release/changelog', + { + changelogFile: `${libPath}/CHANGELOG.md`, + }, + ], + '@semantic-release/npm', + [ + '@semantic-release/exec', + { + prepareCmd: ` PACKAGE_NAME=${importPath} VERSION=\${nextRelease.version} npm run update-deps && VERSION=\${nextRelease.version} npm run bump-version:${libName}`, + }, + ], + [ + '@semantic-release/git', + { + assets: [`${libPath}/CHANGELOG.md`], + message: + `chore(release): ${libName}` + + '-v${nextRelease.version} [skip ci]\n\n${nextRelease.notes}', + }, + ], + ], +}; diff --git a/packages/@justweb3/xmtp-plugin/rollup.config.cjs b/packages/@justweb3/xmtp-plugin/rollup.config.cjs new file mode 100644 index 00000000..f32d0249 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/rollup.config.cjs @@ -0,0 +1,22 @@ +const nrwlConfig = require('@nrwl/react/plugins/bundle-rollup'); +const svgr = require('@svgr/rollup').default; +const preserveDirectives = require('rollup-preserve-directives').default; +const nodeResolve = require('@rollup/plugin-node-resolve').default; +const commonjs = require('@rollup/plugin-commonjs'); +const path = require('path'); + +module.exports = (config) => { + const nxConfig = nrwlConfig(config); + return { + ...nxConfig, + plugins: [ + ...nxConfig.plugins, + nodeResolve({ + preferBuiltins: false, + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }), + commonjs(), + preserveDirectives(), + ], + }; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/index.ts b/packages/@justweb3/xmtp-plugin/src/index.ts new file mode 100644 index 00000000..f41a696f --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/index.ts @@ -0,0 +1 @@ +export * from './lib'; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx new file mode 100644 index 00000000..dffcbedf --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx @@ -0,0 +1,539 @@ +import { + useEnsAvatar, + useMountedAccount, + usePrimaryName, + useRecords, +} from '@justaname.id/react'; +import { + ArrowIcon, + Avatar, + BlockedAccountIcon, + Button, + Flex, + LoadingSpinner, + P, + Popover, + PopoverContent, + PopoverTrigger, + TuneIcon, +} from '@justweb3/ui'; +import { + CachedConversation, + ContentTypeMetadata, + useCanMessage, + useClient, + useConsent, + useMessages, + useStreamMessages, +} from '@xmtp/react-sdk'; +import React, { useEffect, useMemo } from 'react'; +import { useSendReactionMessage } from '../../hooks'; +import { + filterReactionsMessages, + MessageWithReaction, +} from '../../utils/filterReactionsMessages'; +import { formatAddress } from '../../utils/formatAddress'; +import { groupMessagesByDate } from '../../utils/groupMessageByDate'; +import MessageCard from '../MessageCard'; +import EmojiSelector from '../EmojiSelector'; +import MessageTextField from '../MessageTextField'; +import { MessageSkeletonCard } from '../MessageSkeletonCard'; + +export interface ChatProps { + conversation: CachedConversation; + onBack: () => void; +} + +export const Chat: React.FC = ({ conversation, onBack }) => { + const [replyMessage, setReplyMessage] = + React.useState(null); + const [reactionMessage, setReactionMessage] = + React.useState(null); + const [emojiSelectorTop, setEmojiSelectorTop] = React.useState(0); + const [isRequest, setIsRequest] = React.useState(false); + const [isRequestChangeLoading, setIsRequestChangeLoading] = + React.useState(false); + const { entries, allow, refreshConsentList, deny } = useConsent(); + const { mutateAsync: sendReaction } = useSendReactionMessage(conversation); + + const { primaryName } = usePrimaryName({ + address: conversation.peerAddress as `0x${string}`, + }); + const { records } = useRecords({ + ens: primaryName, + }); + const { sanitizeEnsImage } = useEnsAvatar(); + + const { address } = useMountedAccount(); + const { client } = useClient(); + + const [canMessage, setCanMessage] = React.useState(true); + + const { messages, isLoading } = useMessages(conversation); + + // Queries + + const blockAddress = async (peerAddress: string) => { + setIsRequestChangeLoading(true); + await refreshConsentList(); + await deny([peerAddress]); + await refreshConsentList(); + setIsRequestChangeLoading(false); + onBack(); + }; + + const { canMessage: canMessageFn, isLoading: isCanMessageLoading } = + useCanMessage(); + + useEffect(() => { + if (isCanMessageLoading) return; + canMessageFn(conversation.peerAddress).then((result) => { + setCanMessage(result); + }); + }, [isCanMessageLoading, conversation, canMessageFn]); + + useStreamMessages(conversation); + + // Memo + const filteredMessages = useMemo(() => { + const messagesWithoutRead = messages.filter( + (message) => !(message.contentType === 'xmtp.org/readReceipt:1.0') + ); + const res = filterReactionsMessages(messagesWithoutRead); + return res; + }, [messages]); + + const groupedMessages = useMemo(() => { + return groupMessagesByDate(filteredMessages ?? []); + }, [filteredMessages]); + + useEffect(() => { + const convoConsentState = entries[conversation.peerAddress]?.permissionType; + if (convoConsentState === 'unknown' || convoConsentState === undefined) { + setIsRequest(true); + } else { + setIsRequest(false); + } + }, [entries, conversation.peerAddress]); + + const isMessagesSenderOnly = useMemo(() => { + return filteredMessages.every( + (message) => message.senderAddress === address + ); + }, [filteredMessages, address]); + + const handleAllowAddress = async () => { + setIsRequestChangeLoading(true); + await refreshConsentList(); + await allow([conversation.peerAddress]); + void refreshConsentList(); + // TODO: check if this is needed + // onRequestAllowed(); + setIsRequestChangeLoading(false); + }; + + const handleEmojiSelect = (emoji: string) => { + if (!reactionMessage) return; + sendReaction({ + action: 'added', + content: emoji, + referenceId: reactionMessage.id, + }); + }; + + useEffect(() => { + if (messages.length == 0) return; + setTimeout(() => { + const lastMessageId = messages[messages.length - 1]?.id; + const element = document.getElementById(lastMessageId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + }, 500); + + // await checkMessageIfRead(); + }, [messages, conversation]); + + return ( + +
{ + setReactionMessage(null); + const replica = document.getElementById( + `${reactionMessage?.id}-replica` + ); + replica?.remove(); + }} + >
+ + + + + + + + +

+ {primaryName + ? primaryName + : formatAddress(conversation.peerAddress)} +

+ {/* {(!!primaryName) && ( +

{formatAddress(conversation.peerAddress)}

+ )} */} + + + + + + + + + + + blockAddress(conversation.peerAddress)} + > +

+ Block +

+ + + + + + + + + {isCanMessageLoading || isLoading ? ( + + {[...Array(5)].map((_, index) => ( + + ))} + + ) : ( + + {canMessage ? ( + + {groupedMessages && + Object.keys(groupedMessages).map((date, index) => ( + +

+ {date} +

+ {groupedMessages[date].map((message) => ( + setReplyMessage(msg)} + message={message} + peerAddress={conversation.peerAddress} + key={`message-${message.id}`} + onReaction={(message) => { + setReactionMessage(message); + + const element = document.getElementById( + message.id.toString() + ); + if (!element) return; + const replica = element?.cloneNode( + true + ) as HTMLElement; + replica.id = `${message.id}-replica`; + replica.style.position = 'absolute'; + replica.style.top = element?.offsetTop + 'px'; + replica.style.top = '100px'; + replica.style.zIndex = '90'; + element?.parentElement?.appendChild(replica); + replica.classList.add('replica-animate'); + setEmojiSelectorTop( + 100 + element.getBoundingClientRect().height + ); + }} + /> + ))} + + ))} + {reactionMessage && ( +
+ { + handleEmojiSelect(emoji); + setReactionMessage(null); + const replica = document.getElementById( + `${reactionMessage?.id}-replica` + ); + replica?.remove(); + }} + /> +
+ )} + + ) : ( +
+

Cannot message {conversation.peerAddress}

+
+ )} + + )} + + {isRequest ? ( + isRequestChangeLoading ? ( + + + + ) : ( + + + + + ) + ) : ( + + {isMessagesSenderOnly && ( + +

+ Message in userโ€™s Requests +

+

This user has not accepted your message request yet

+ + )} + setReplyMessage(null)} + conversation={conversation} + replyMessage={replyMessage} + /> + + )} + + + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/ChatButton/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatButton/index.tsx new file mode 100644 index 00000000..df728b2d --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatButton/index.tsx @@ -0,0 +1,54 @@ +import { ArrowIcon, ClickableItem } from '@justweb3/ui'; +import { useClient } from '@xmtp/react-sdk'; +import { useWalletClient } from 'wagmi'; + +export interface ChatButtonProps { + handleOpen: (open: boolean) => void; +} +export const ChatButton: React.FC = ({ handleOpen }) => { + const { initialize } = useClient(); + const { client } = useClient(); + const { data: walletClient } = useWalletClient(); + + const handleChat = async () => { + if (!client) { + initialize({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + signer: walletClient, + options: { + env: 'dev', + }, + }).then(() => { + handleOpen(true); + }); + } else { + handleOpen(true); + } + }; + + return ( + + + + } + style={{ + width: '100%', + }} + onClick={handleChat} + right={} + /> + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/ChatList/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatList/index.tsx new file mode 100644 index 00000000..676a6753 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatList/index.tsx @@ -0,0 +1,28 @@ +import { CachedConversation, ContentTypeMetadata } from '@xmtp/react-sdk'; +import { Flex } from '@justweb3/ui'; +import React from 'react'; +import { MessageItem } from '../MessageItem'; + +export interface ChatListProps { + conversations: CachedConversation[]; + handleOpenChat: ( + conversation: CachedConversation | null + ) => void; +} + +export const ChatList: React.FC = ({ + conversations, + handleOpenChat, +}) => { + return ( + + {conversations.map((conversation) => ( + handleOpenChat(conversation)} + key={conversation.topic} + /> + ))} + + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx new file mode 100644 index 00000000..5a794bda --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx @@ -0,0 +1,137 @@ +import { + Sheet, + SheetContent, + SheetTitle, + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from '@justweb3/ui'; +import React, { useEffect, useMemo } from 'react'; +import { + CachedConversation, + ContentTypeMetadata, + useConsent, + useConversations, + useStreamAllMessages, + useStreamConversations, +} from '@xmtp/react-sdk'; +import { ChatList } from '../ChatList'; + +export interface ChatSheetProps { + open?: boolean; + handleOpen?: (open: boolean) => void; + handleOpenChat: ( + conversation: CachedConversation | null + ) => void; +} + +export const ChatSheet: React.FC = ({ + open, + handleOpen, + handleOpenChat, +}) => { + const [tab, setTab] = React.useState('Chats'); + const { conversations, isLoading } = useConversations(); + const [isConsentListLoading, setIsConsentListLoading] = React.useState(true); + const { loadConsentList, entries } = useConsent(); + + const allowedConversations = useMemo(() => { + return conversations.filter( + (convo) => + entries && + entries[convo.peerAddress] && + entries[convo.peerAddress]?.permissionType === 'allowed' + ); + }, [conversations, entries]); + + const blockedConversations = useMemo(() => { + return conversations.filter( + (convo) => + entries && + entries[convo.peerAddress] && + entries[convo.peerAddress]?.permissionType === 'denied' + ); + }, [conversations, entries]); + + const requestConversations = useMemo(() => { + return conversations.filter((convo) => { + if (!entries[convo.peerAddress]) return true; + return entries[convo.peerAddress]?.permissionType === 'unknown'; + }); + }, [conversations, entries]); + + useEffect(() => { + loadConsentList().then(() => { + setIsConsentListLoading(false); + }); + }, [loadConsentList]); + + useStreamConversations(); + useStreamAllMessages(); + + return ( + + + Chats + setTab(value)} + style={{ + display: 'flex', + flexDirection: 'column', + marginBottom: '0px', + overflow: 'hidden', + flex: '1', + }} + > + + + Chats + + + Requests + + + Blocked + + + {isLoading || isConsentListLoading ? ( +
Loading...
+ ) : ( + <> + + + + + + + + + + + )} + + + + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/CustomPlayer/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/CustomPlayer/index.tsx new file mode 100644 index 00000000..32af76c1 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/CustomPlayer/index.tsx @@ -0,0 +1,95 @@ +import { Flex, PauseIcon, PlayIcon } from '@justweb3/ui'; +import React, { useEffect, useRef, useState } from 'react'; + + +export interface CustomPlayerProps { + style?: React.CSSProperties; + url?: string; + disabled?: boolean; +} + +export const CustomPlayer: React.FC = ({ + style, + url = '', + disabled +}) => { + const [playing, setPlaying] = React.useState(false); + const videoRef = useRef(null); + const [hovered, setHovered] = useState(false) + + const togglePlay = () => { + if (disabled) return; + if (videoRef.current) { + if (playing) { + videoRef.current.pause(); + } else { + videoRef.current.play(); + } + setPlaying(!playing); + } + }; + + useEffect(() => { + const handleVisibilityChange = () => { + if (document.hidden && playing && videoRef.current) { + videoRef.current.pause(); + } + }; + document.addEventListener('visibilitychange', handleVisibilityChange); + return () => { + document.removeEventListener('visibilitychange', handleVisibilityChange); + if (videoRef.current && playing) { + videoRef.current.pause(); + setPlaying(false); + } + }; + }, [playing]); + + return ( + { setHovered(true) }} + onMouseLeave={() => { setHovered(false) }} + onClick={togglePlay} + style={{ + aspectRatio: '16/9', + position: 'relative', + // TODO: check background color + background: 'var(--justweb3-background-color)', + cursor: 'pointer', + borderRadius: '10px', + border: '1px solid var(--justweb3-primary-color)', + ...style + }}> + + ); +} diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx new file mode 100644 index 00000000..49e12de3 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx @@ -0,0 +1,89 @@ +import { Flex, P, PauseIcon, PlayIcon, CloseIcon } from '@justweb3/ui'; +import { formatTime } from '../../utils/formatVoiceTime'; +import React, { useEffect, useRef, useState } from 'react'; +import useGetAudioDuration from '../../hooks/useGetAudioDuration'; + + +interface CustomVoicePreviewProps { + audioUrl: string; + onCancel: () => void; +} + +const CustomVoicePreview: React.FC = ({ + audioUrl, + onCancel +}) => { + const [playing, setPlaying] = useState(false); + const [currentTime, setCurrentTime] = useState(0); + const audioRef = useRef(new Audio()); + + const audioDuration = useGetAudioDuration(audioUrl); + + useEffect(() => { + const audio = new Audio(); + audioRef.current = audio; + + const onTimeUpdate = () => { + setCurrentTime(audio.currentTime); + }; + + const onEnded = () => { + setPlaying(false); + setCurrentTime(0); + }; + + audio.src = audioUrl; + audio.addEventListener('timeupdate', onTimeUpdate); + audio.addEventListener('ended', onEnded); + + return () => { + audio.removeEventListener('timeupdate', onTimeUpdate); + audio.removeEventListener('ended', onEnded); + }; + }, [audioUrl]); + + const handlePlayPause = () => { + const audio = audioRef.current; + if (!audio) return; + + if (playing) { + audio.pause(); + } else { + audio.play(); + } + setPlaying(!playing); + }; + + return ( + + {playing ? + + : + + } +

{playing || currentTime > 0 ? formatTime(currentTime) : formatTime(audioDuration ?? 0)}

+ + + ); +}; + +export default CustomVoicePreview; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/EmojiSelector/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/EmojiSelector/index.tsx new file mode 100644 index 00000000..f39022f8 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/EmojiSelector/index.tsx @@ -0,0 +1,80 @@ +import { Flex, Input } from '@justweb3/ui'; +import React, { useMemo } from 'react'; +import { EmojiObject, emojis } from '../../utils/emojis'; +import { useDebounced } from '../../hooks'; + + +interface EmojiSelectorProps { + onEmojiSelect: (emoji: string) => void; +} + +const EmojiSelector: React.FC = ({ + onEmojiSelect, +}) => { + const [searchValue, setSearchValue] = React.useState(""); + + const { + value: debouncedSearch, + } = useDebounced(searchValue, 50); + + const onEmojiClickHandler = (emoji: EmojiObject) => { + onEmojiSelect(emoji.name); + + } + + const filteredEmojis = useMemo(() => { + if (debouncedSearch.length === 0) return emojis; + const filteredEmojis = emojis.filter(emoji => + emoji.name.toLowerCase().includes(debouncedSearch.toLowerCase()) + ); + return filteredEmojis; + }, [debouncedSearch]); + + + return ( + + setSearchValue(e.target.value)} + /> +
+ {filteredEmojis.map((emoji, index) => ( + + ))} +
+ + + ); +}; + +export default EmojiSelector; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/MessageCard/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageCard/index.tsx new file mode 100644 index 00000000..f63cce4d --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageCard/index.tsx @@ -0,0 +1,448 @@ +import { useEffect, useMemo, useRef } from "react"; +import { CachedConversation, DecodedMessage } from "@xmtp/react-sdk"; +import { MessageWithReaction } from "../../utils/filterReactionsMessages"; +import { useState } from "react"; +import { useMountedAccount } from "@justaname.id/react"; +import React from "react"; +import { useSendReactionMessage } from "../../hooks"; +import { typeLookup } from "../../utils/attachments"; +import { findEmojiByName } from "../../utils/emojis"; +import { formatMessageSentTime } from "../../utils/messageTimeFormat"; +import { DocumentIcon, Flex, P, ReplyIcon, ReactionIcon, DownloadIcon } from "@justweb3/ui"; +import { formatAddress } from "../../utils/formatAddress"; +import { calculateFileSize } from "../../utils/calculateFileSize"; +import VoiceMessageCard from "../VoiceMessageCard"; +import { CustomPlayer } from "../CustomPlayer"; + + +interface MessageCardProps { + message: MessageWithReaction; + conversation: CachedConversation; + peerAddress: string; + // onReply: (message: DecodedMessage) => void; + // onReaction: (message: DecodedMessage) => void; + onReply: (message: MessageWithReaction) => void; + onReaction: (message: MessageWithReaction) => void; +} + +const MeasureAndHyphenateText: React.FC<{ text: string; maxWidth: number, isReceiver: boolean }> = ({ text, maxWidth, isReceiver }) => { + const [processedText, setProcessedText] = useState(''); + + useEffect(() => { + // Function to measure text width + const measureText = (text = '', font = '10px Inter') => { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (!context) return 0; + context.font = font; + return context.measureText(text).width; + }; + + // Function to insert hyphens + const insertHyphens = (text: string) => { + const words = text.split(' '); + let currentLine = ''; + let finalText = ''; + + words.forEach((word) => { + const testLine = currentLine + word + ' '; + const testLineWidth = measureText(testLine); + + if (testLineWidth > maxWidth && currentLine !== '') { + // Check if it's necessary to hyphenate the current word + let hyphenated = false; + for (let i = word.length; i > 0; i--) { + const part = word.substring(0, i); + const testPartWidth = measureText(currentLine + part + '-'); + + if (testPartWidth <= maxWidth) { + finalText += currentLine + part + '-\n'; + currentLine = word.substring(i) + ' '; + hyphenated = true; + break; + } + } + + if (!hyphenated) { + finalText += currentLine + '\n'; + currentLine = word + ' '; + } + } else { + currentLine = testLine; + } + }); + + finalText += currentLine; + return finalText; + }; + + // Process the text + const processed = insertHyphens(text); + setProcessedText(processed); + }, [text, maxWidth]); + + return ( + 
+            {processedText}
+
+ ); +}; + +const MessageCard: React.FC = ({ + message, + peerAddress, + onReply, + conversation, + onReaction +}) => { + const { address } = useMountedAccount(); + const [hovered, setHovered] = useState(false) + const [repliedMessage, setRepliedMessage] = React.useState(null); + const divRef = useRef(null); + const { mutateAsync: sendReaction } = useSendReactionMessage(conversation); + + const isText = useMemo(() => { + return typeof message.content === "string" + }, [message.content]) + + + useEffect(() => { + function handleMouseEnter() { + setHovered(true) + } + function handleMouseLeave() { + setHovered(false) + } + const divElement = divRef.current; + if (divElement) { + divElement.addEventListener('mouseenter', handleMouseEnter); + divElement.addEventListener('mouseleave', handleMouseLeave); + } + return () => { + if (divElement) { + divElement.removeEventListener('mouseenter', handleMouseEnter); + divElement.removeEventListener('mouseleave', handleMouseLeave); + } + }; + }, []); + + + const attachmentExtention = useMemo(() => { + if (!isText && message.content.mimeType) + return message.content.mimeType.split("/")?.[1] || ""; + }, [isText, message.content.mimeType]); + + + const isImage = message.content && message.content.data; + const isReply = message.content && message.contentType === "xmtp.org/reply:1.0" + const isReceiver = message.senderAddress === peerAddress; + const isVoice = message.content.mimeType === "audio/wav"; + + + const getMessageDataById = (messageId: string) => { + const messageElement = document.getElementById(messageId); + if (!messageElement) { + return null; + } + + const messageDataString = messageElement.getAttribute('data-message'); + if (!messageDataString) { + return null; + } + try { + const messageData = JSON.parse(messageDataString); + return messageData; + } catch (e) { + console.error('Failed to parse message data:', e); + return null; + } + } + + const handleEmojiSelect = (emoji: string, action: "added" | "removed") => { + sendReaction({ + action: action, + content: emoji, + referenceId: message.id, + }); + } + + const navigateToRepliedMessage = () => { + if (!repliedMessage) return; + const element = document.getElementById(repliedMessage.id); + if (element) { + element.scrollIntoView({ behavior: "smooth", block: "center" }); + } + } + + + const isReplyVoice = useMemo(() => { + if (!repliedMessage) return false; + return repliedMessage.content.mimeType === "audio/wav"; + }, [repliedMessage]); + + const isReplyText = useMemo(() => { + if (!repliedMessage) return false; + return typeof repliedMessage.content === "string" + }, [repliedMessage]) + + const isReplyReply = useMemo(() => { + if (!repliedMessage) return false; + return !!repliedMessage.content.reference + }, [repliedMessage]) + + const replyAttachmentExtention = useMemo(() => { + if (!isReplyText && !!repliedMessage && !isReplyReply) + return repliedMessage.content.mimeType.split("/")?.[1] || ""; + }, [isReplyText, repliedMessage]); + + useEffect(() => { + if (!isReply || !!repliedMessage) return; + const repliedMsg = getMessageDataById(message.content.reference) + setRepliedMessage(repliedMsg); + }, [isReply, message.content.reference, repliedMessage]) + + return ( + + + + <> + { + repliedMessage && isReply ? + + + + +

{repliedMessage?.senderAddress === address ? "YOU" : formatAddress(repliedMessage?.senderAddress ?? "")}

+ + {(isReplyText || isReplyReply) ? ( +

{isReplyReply ? repliedMessage.content.content : repliedMessage.content}

+ ) : ( + isReplyVoice ? + + : + typeLookup[replyAttachmentExtention] === "image" ? + {repliedMessage.content.filename} + : + typeLookup[replyAttachmentExtention] === "video" ? + + : + + +

{repliedMessage.content.filename}

+ + )} + + +
+

{message.content.content}

+
+ + + : + isText ? + + + + : + + {isVoice ? + + : + + {typeLookup[attachmentExtention] === "image" ? + {message.content.filename} + : + typeLookup[attachmentExtention] === "video" ? + + : + + + +

{message.content.filename}

+

{calculateFileSize(message.content.data?.byteLength ?? 0)}

+ + } + + + } + + } + {message.reactionMessage && ( +

{ + if (!message.reactionMessage) return; + if (message.reactionMessage.senderAddress !== address) return; + handleEmojiSelect("", "removed") + }} + style={{ + position: 'absolute', + cursor: 'pointer', + bottom: '-0.5rem', + fontSize: '20px', + right: isReceiver ? '-12px' : 'auto', + left: isReceiver ? 'auto' : '-12px', + }} + >{findEmojiByName(message.reactionMessage.content.content)}

+ )} + + {!isVoice && ( +

{formatMessageSentTime(message.sentAt)}

)} + + + + onReply(message)} /> + + {message.senderAddress !== address && + { + onReaction(message) + } + } /> + } + + + + + + ); +}; + +export default MessageCard; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/MessageItem/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageItem/index.tsx new file mode 100644 index 00000000..80ee2e9b --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageItem/index.tsx @@ -0,0 +1,135 @@ +import { + attachmentContentTypeConfig, + CachedConversation, + ContentTypeMetadata, + reactionContentTypeConfig, + replyContentTypeConfig, + useLastMessage, + useStreamMessages, +} from '@xmtp/react-sdk'; +import { useEnsAvatar, usePrimaryName, useRecords } from '@justaname.id/react'; +import { Avatar, Flex, formatText, P, SPAN } from '@justweb3/ui'; +import React, { useMemo } from 'react'; +import { formatChatDate } from '../../utils/formatChatDate'; + +export interface MessageItemProps { + conversation: CachedConversation; + onClick?: () => void; +} + +export const MessageItem: React.FC = ({ + conversation, + onClick, +}) => { + const lastMessage = useLastMessage(conversation.topic); + useStreamMessages(conversation); + const { primaryName } = usePrimaryName({ + address: conversation.peerAddress as `0x${string}`, + }); + const { records } = useRecords({ + ens: primaryName, + }); + const { sanitizeEnsImage } = useEnsAvatar(); + + const lastContent = useMemo(() => { + if (!lastMessage) return ''; + + if (typeof lastMessage.content === 'string') { + return lastMessage.content; + } + + if ( + attachmentContentTypeConfig.contentTypes.includes( + lastMessage?.contentType + ) + ) { + return lastMessage.content.filename; + } + + if ( + reactionContentTypeConfig.contentTypes.includes(lastMessage?.contentType) + ) { + return lastMessage.contentFallback; + } + + if ( + replyContentTypeConfig.contentTypes.includes(lastMessage?.contentType) + ) { + return lastMessage.contentFallback; + } + + return lastMessage.contentFallback; + }, [lastMessage]); + + return ( + + + + +

+ {primaryName || formatText(conversation.peerAddress, 4)} +

+ + {lastMessage + ? lastMessage.senderAddress !== conversation.peerAddress + ? 'You: ' + : '' + : ''} + {lastMessage + ? lastContent + ? lastContent + : 'No preview available' + : ''} + + + + + + {lastMessage?.sentAt ? formatChatDate(lastMessage.sentAt) : ''} + + + + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSheet/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSheet/index.tsx new file mode 100644 index 00000000..f39ebfbf --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSheet/index.tsx @@ -0,0 +1,29 @@ +import { CachedConversation, ContentTypeMetadata } from '@xmtp/react-sdk'; +import { Sheet, SheetContent, SheetTitle } from '@justweb3/ui'; +import { Chat } from '../Chat'; + +export interface MessageSheetProps { + conversation: CachedConversation | null; + openChat: boolean; + handleOpenChat: ( + conversation: CachedConversation | null + ) => void; +} + +export const MessageSheet: React.FC = ({ + conversation, + handleOpenChat, + openChat, +}) => { + return ( + !open && handleOpenChat(null)} + > + + Messages + {conversation && handleOpenChat(null)} />} + + + ); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSkeletonCard/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSkeletonCard/index.tsx new file mode 100644 index 00000000..0b18023f --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageSkeletonCard/index.tsx @@ -0,0 +1,37 @@ +import { Skeleton, Flex } from '@justweb3/ui'; + +interface MessageSkeletonCardProps { + isReceiver: boolean; +} + +export const MessageSkeletonCard: React.FC = ({ isReceiver }) => { + return ( + + + + + ) +} \ No newline at end of file diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/MessageTextField/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageTextField/index.tsx new file mode 100644 index 00000000..4026a6af --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/MessageTextField/index.tsx @@ -0,0 +1,461 @@ + +import type { Attachment } from '@xmtp/content-type-remote-attachment'; +import { CachedConversation, useClient } from '@xmtp/react-sdk'; +import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'; +import { MessageWithReaction } from '../../utils/filterReactionsMessages'; +import { useMountedAccount } from '@justaname.id/react'; +import { useAttachmentChange, useRecordingTimer, useRecordVoice, useSendAttachment, useSendMessages, useSendReplyMessage } from '../../hooks'; +import { AttachmentType, typeLookup } from '../../utils/attachments'; +import { Button, CloseIcon, Flex, Input, LoadingSpinner, P, AddImageIcon, AddVideoIcon, AddFolderIcon, DocumentIcon, SendIcon, StopIcon, MicIcon } from '@justweb3/ui'; +import { formatAddress } from '../../utils/formatAddress'; +import VoiceMessageCard from '../VoiceMessageCard'; +import { CustomPlayer } from '../CustomPlayer'; +import CustomVoicePreview from '../CustomVoicePreview'; + + +interface MessageTextFieldProps { + newConvo?: boolean; + disabled?: boolean; + conversation?: CachedConversation; + replyMessage?: MessageWithReaction | null; + onCancelReply?: () => void; + onNewConvo?: (message: string) => void; +} + +const MessageTextField: React.FC = ({ + newConvo, + disabled, + replyMessage, + onCancelReply, + conversation, + onNewConvo +}) => { + const [messageValue, setMessageValue] = React.useState(""); + const [attachment, setAttachment] = React.useState(); + const [attachmentPreview, setAttachmentPreview] = React.useState(); + const [isNewMessageLoading, setIsNewMessageLoading] = React.useState(false); + // const [selectingAttachment, setSelectingAttachment] = React.useState(false); + const { client } = useClient(); + const { address } = useMountedAccount(); + const { mutateAsync: sendMessage } = useSendMessages(conversation); + const { mutateAsync: sendReply } = useSendReplyMessage(conversation); + const { mutateAsync: sendAttachment } = useSendAttachment(conversation); + + const attachmentExtention = useMemo(() => { + return attachment?.mimeType.split("/")?.[1] || ""; + }, [attachment]); + + + // Attachments + const [acceptedTypes, setAcceptedTypes]: [ + string | string[] | undefined, + Dispatch>, + ] = useState(); + const inputFile = useRef(null); + const { onAttachmentChange } = useAttachmentChange({ + setAttachment, + setAttachmentPreview, + onError: (error) => { + // showToast("error", error); + } + }); + + // Recording + const { recording, startRecording, stopRecording } = useRecordVoice({ + setAttachment, + setAttachmentPreview, + }) + const { start, pause, reset, recordingValue } = useRecordingTimer({ + stopRecording, + status: recording ? "recording" : "idle", + }); + + // Sending text message + const handleSendMessage = async () => { + if (messageValue.length === 0) return; + if (!client) return; + if (disabled) return; + if (newConvo) { + setIsNewMessageLoading(true); + onNewConvo && onNewConvo(messageValue); + setIsNewMessageLoading(false); + } else { + if (replyMessage) { + sendReply({ + message: messageValue, + referenceId: replyMessage.id, + }) + onCancelReply && onCancelReply(); + } else { + sendMessage(messageValue); + } + } + setMessageValue(''); + } + + // Sending attachment + const handleSendAttachment = async () => { + if (!client) return; + if (!attachment) return; + if (disabled) return; + if (newConvo) { + onNewConvo && onNewConvo(messageValue); + } else { + sendAttachment(attachment); + } + setMessageValue(''); + setAttachment(undefined); + setAttachmentPreview(undefined); + // setSelectingAttachment(false); + } + + const handleCancelAttachment = () => { + setAttachment(undefined); + setAttachmentPreview(undefined); + } + + const onButtonClick = (contentType: AttachmentType) => { + if (contentType === "application") { + setAcceptedTypes("all"); + } else { + const acceptedFileTypeList = Object.keys(typeLookup).reduce( + (acc: string[], key: string) => { + if (typeLookup[key] === contentType) acc.push(`.${key}`); + return acc; + }, + [], + ); + setAcceptedTypes([...acceptedFileTypeList]); + } + }; + + // Reply message + const isSender = useMemo(() => { return address === replyMessage?.senderAddress }, [replyMessage, address]); + const isReplyVoice = useMemo(() => { + return replyMessage?.content.mimeType === "audio/wav"; + }, [replyMessage]); + + const isReplyText = useMemo(() => { + if (!replyMessage) return false; + return typeof replyMessage.content === "string" + }, [replyMessage]) + + const isReplyReply = useMemo(() => { + if (!replyMessage) return false; + return !!replyMessage.content.reference; + }, [replyMessage]); + + const replyAttachmentExtention = useMemo(() => { + if (!isReplyText && !!replyMessage && !isReplyReply) + return replyMessage.content.mimeType.split("/")?.[1] || ""; + }, [isReplyText, replyMessage, isReplyReply]); + + const navigateToRepliedMessage = () => { + if (!replyMessage) return; + const element = document.getElementById(replyMessage.id.toString()); + if (element) { + element.scrollIntoView({ + block: "end", + behavior: "smooth" + }); + } + } + + useEffect(() => { + if (acceptedTypes) { + inputFile?.current?.click(); + } + }, [acceptedTypes]); + + const isReplyVideoOrImage = useMemo(() => { + return typeLookup[replyAttachmentExtention] === "image" || typeLookup[replyAttachmentExtention] === "video"; + }, [replyAttachmentExtention]); + + return ( + + {!replyMessage} + {!newConvo && ( + + onButtonClick("image")} style={{ + cursor: 'pointer' + }} /> + onButtonClick("video")} style={{ + cursor: 'pointer' + }} /> + onButtonClick("application")} style={{ + cursor: 'pointer' + }} /> + + + )} +
+ {replyMessage && ( + + +

{isSender ? "YOU" : formatAddress(replyMessage.senderAddress)}

+ {(isReplyText || isReplyReply) ? ( +

{isReplyReply ? replyMessage.content.content : replyMessage.content}

+ ) : ( + isReplyVoice ? + + : + typeLookup[replyAttachmentExtention] === "image" ? + {replyMessage.content.filename} + : + typeLookup[replyAttachmentExtention] === "video" ? + + : + + +

{replyMessage.content.filename}

+ + )} + + + + ) + } + { + attachmentPreview ? ( + + {attachment?.mimeType === "audio/wav" ? + + : + + {typeLookup[attachmentExtention] === "image" ? + {attachment?.filename} + : typeLookup[attachmentExtention] === "video" ? + + : + + +

{attachment?.filename ?? "Cannot preview"}

+ + } + + + + + + } + { + if (disabled) return; + handleSendAttachment() + }} + /> + + ) : ( + recording ? ( + +

+ {recordingValue} +

+

RECORDING...

+ { + stopRecording(); + pause(); + reset(); + }} /> + + ) : ( + isNewMessageLoading ? + + + + : + { + if (disabled) return; + startRecording(); + start(); + }} /> + )} + right={ + { + if (disabled) return; + handleSendMessage() + }} + /> + } + disabled={disabled} + onKeyDown={(e) => { + if (e.key === "Enter") { + handleSendMessage(); + } + }} + onChange={(e) => setMessageValue(e.target.value)} + /> + ) + ) + } +
+ + ); +}; + +export default MessageTextField; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/components/VoiceMessageCard/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/components/VoiceMessageCard/index.tsx new file mode 100644 index 00000000..7fe843ae --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/components/VoiceMessageCard/index.tsx @@ -0,0 +1,217 @@ +import * as Slider from '@radix-ui/react-slider'; +import { DecodedMessage } from '@xmtp/xmtp-js'; +import { Flex, PauseIcon, PlayIcon } from '@justweb3/ui'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { MessageWithReaction } from '../../utils/filterReactionsMessages'; +import useGetAudioDuration from '../../hooks/useGetAudioDuration'; + +interface VoiceMessageCardProps { + message: MessageWithReaction | DecodedMessage; + style?: React.CSSProperties; + disabled?: boolean; + isReceiver: boolean; + isReply?: boolean; +} + +const VoiceMessageCard: React.FC = ({ + message, + style, + disabled, + isReceiver, + isReply, +}) => { + const [playing, setPlaying] = useState(false); + const [currentTime, setCurrentTime] = useState(0); + const audioRef = useRef(new Audio()); + + const audioUrl = useMemo(() => { + const blob = new Blob([message.content.data], { + type: message.content.mimeType, + }); + return URL.createObjectURL(blob); + }, [message.content]); + + const duration = useGetAudioDuration(audioUrl); + + useEffect(() => { + const audio = audioRef.current; + + const onTimeUpdate = () => { + setCurrentTime(audio.currentTime); + }; + + const onEnded = () => { + setPlaying(false); + setCurrentTime(0); + }; + + audio.src = audioUrl; + audio.preload = 'metadata'; + audio.addEventListener('timeupdate', onTimeUpdate); + audio.addEventListener('ended', onEnded); + + return () => { + audio.removeEventListener('timeupdate', onTimeUpdate); + audio.removeEventListener('ended', onEnded); + }; + }, [message.content, audioUrl]); + + const handlePlayPause = () => { + if (disabled) return; + const audio = audioRef.current; + if (playing) { + audio.pause(); + } else { + audio.play(); + } + setPlaying(!playing); + }; + + const handleSliderChange = (value: number[]) => { + const audio = audioRef.current; + if (playing) { + audio.pause(); + setPlaying(false); + audio.currentTime = value[0]; + setCurrentTime(value[0]); + audio.play(); + setPlaying(true); + } else { + audio.currentTime = value[0]; + setCurrentTime(value[0]); + } + }; + + return ( + + {playing ? ( + + ) : ( + + )} + + 0 ? audioRef.current.currentTime : 0, + ]} + max={duration ?? 0} + step={0.01} + > + + + + + + {/**/} + {/*

{playing || currentTime > 0 ? formatTime(currentTime) : formatTime(duration ?? 0)}

*/} + {/* {!isReply && (*/} + {/*

{formatMessageSentTime(message.sentAt)}

*/} + {/* )}*/} + {/**/} + + + ); +}; + +export default VoiceMessageCard; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/index.ts new file mode 100644 index 00000000..f61e9449 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/index.ts @@ -0,0 +1,8 @@ +export * from './sendAttachment'; +export * from './sendMessage'; +export * from './sendReactionMessage'; +export * from './sendReplyMessage'; +export * from './useAttachmentChange'; +export * from './useDebounced'; +export * from './useRecordingTimer'; +export * from './useVoiceRecording'; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendAttachment/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendAttachment/index.ts new file mode 100644 index 00000000..df0f8a14 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendAttachment/index.ts @@ -0,0 +1,38 @@ +import { useMutation } from '@tanstack/react-query'; +import { ContentTypeId } from '@xmtp/content-type-primitives'; +import type { Attachment } from '@xmtp/content-type-remote-attachment'; +import { ContentTypeAttachment } from '@xmtp/content-type-remote-attachment'; +import { + CachedConversation, + DecodedMessage, + SendOptions, + useSendMessage, +} from '@xmtp/react-sdk'; + +export const sendAttachment = async ( + conversation: CachedConversation, + attachment: Attachment, + sendMessage: ( + conversation: CachedConversation, + content: T, + contentType?: ContentTypeId, + sendOptions?: Omit + ) => Promise | undefined> +) => { + try { + await sendMessage(conversation, attachment, ContentTypeAttachment); + } catch (e) { + // const error = e as Error; + } +}; + +export const useSendAttachment = (conversation?: CachedConversation) => { + const { sendMessage } = useSendMessage(); + + return useMutation({ + mutationFn: (attachment: Attachment) => { + if (!conversation) throw new Error('Conversation not found'); + return sendAttachment(conversation, attachment, sendMessage); + }, + }); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendMessage/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendMessage/index.ts new file mode 100644 index 00000000..4a89f1d9 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendMessage/index.ts @@ -0,0 +1,33 @@ +import { useMutation } from '@tanstack/react-query' +import { ContentTypeId } from '@xmtp/content-type-primitives' +import { + CachedConversation, + useSendMessage, + DecodedMessage, + SendOptions, +} from '@xmtp/react-sdk' + +export const sendMessages = async ( + conversation: CachedConversation, + message: string, + sendMessage: ( + conversation: CachedConversation, + content: T, + contentType?: ContentTypeId, + sendOptions?: Omit, + ) => Promise | undefined>, + contentType?: SendOptions, +) => { + await sendMessage(conversation, message, undefined, contentType) +} + +export const useSendMessages = (conversation?: CachedConversation) => { + const { sendMessage } = useSendMessage() + + return useMutation({ + mutationFn: (message: string, contentType?: SendOptions) => { + if (!conversation) throw new Error('Conversation not found') + return sendMessages(conversation, message, sendMessage, contentType) + }, + }) +} diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReactionMessage/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReactionMessage/index.ts new file mode 100644 index 00000000..005c32b0 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReactionMessage/index.ts @@ -0,0 +1,57 @@ +import { useMutation } from '@tanstack/react-query'; +import { ContentTypeId } from '@xmtp/content-type-primitives'; +import { ContentTypeReaction, Reaction } from '@xmtp/content-type-reaction'; +import { + CachedConversation, + DecodedMessage, + SendOptions, + useSendMessage, +} from '@xmtp/react-sdk'; + +export const sendReactionMessage = async ( + conversation: CachedConversation, + action: 'added' | 'removed', + content: string, + referenceId: string, + sendMessage: ( + conversation: CachedConversation, + content: T, + contentType?: ContentTypeId, + sendOptions?: Omit + ) => Promise | undefined> +) => { + const reaction: Reaction = { + reference: referenceId, + action: action, + content: content, + schema: 'custom', + }; + return await sendMessage(conversation, reaction, ContentTypeReaction); +}; + +type SendReactionMessageParams = { + action: 'added' | 'removed'; + content: string; + referenceId: string; +}; + +export const useSendReactionMessage = (conversation?: CachedConversation) => { + const { sendMessage } = useSendMessage(); + + return useMutation({ + mutationFn: ({ + action, + referenceId, + content, + }: SendReactionMessageParams) => { + if (!conversation) throw new Error('Conversation not found'); + return sendReactionMessage( + conversation, + action, + content, + referenceId, + sendMessage + ); + }, + }); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReplyMessage/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReplyMessage/index.ts new file mode 100644 index 00000000..a979f3f1 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/sendReplyMessage/index.ts @@ -0,0 +1,50 @@ +import { useMutation } from '@tanstack/react-query' +import { ContentTypeId } from '@xmtp/content-type-primitives' +import { ContentTypeReply, Reply } from '@xmtp/content-type-reply' +import { ContentTypeText } from '@xmtp/content-type-text' +import { + CachedConversation, + useSendMessage, + DecodedMessage, + SendOptions, +} from '@xmtp/react-sdk' + +export const sendReplyMessage = async ( + conversation: CachedConversation, + message: string, + referenceId: string, + sendMessage: ( + conversation: CachedConversation, + content: T, + contentType?: ContentTypeId, + sendOptions?: Omit, + ) => Promise | undefined>, +) => { + const reply: Reply = { + reference: referenceId, + contentType: ContentTypeText, + content: message, + } + return await sendMessage(conversation, reply, ContentTypeReply) +} + +type SendReplyMessageParams = { + message: string + referenceId: string +} + +export const useSendReplyMessage = (conversation?: CachedConversation) => { + const { sendMessage } = useSendMessage() + + return useMutation({ + mutationFn: ({ message, referenceId }: SendReplyMessageParams) => { + if (!conversation) throw new Error('Conversation not found') + return sendReplyMessage( + conversation, + message, + referenceId, + sendMessage, + ) + }, + }) +} diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/useAttachmentChange/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useAttachmentChange/index.tsx new file mode 100644 index 00000000..5c21a8d7 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useAttachmentChange/index.tsx @@ -0,0 +1,79 @@ +import type { Attachment } from "@xmtp/content-type-remote-attachment"; +import type { ChangeEvent } from "react"; +import { useCallback } from "react"; + +interface useAttachmentChangeProps { + setAttachment: (attachment: Attachment | undefined) => void; + setAttachmentPreview: (url: string | undefined) => void; + // setIsDragActive: (status: boolean) => void; + onError?: (error: string) => void; +} + +export const MAX_FILE_SIZE = 1 * 1024 * 1024; + +export const useAttachmentChange = ({ + setAttachment, + setAttachmentPreview, + // setIsDragActive, + onError, +}: useAttachmentChangeProps) => { + const onAttachmentChange = useCallback( + (e: ChangeEvent | React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + + const target = (e as ChangeEvent)?.target.files + ? (e as ChangeEvent)?.target + // TODO: if drag feature is needed, uncomment this line + // : (e as React.DragEvent)?.dataTransfer.files + // ? (e as React.DragEvent).dataTransfer + : undefined; + + if (target?.files?.length && setAttachment) { + const file = target.files[0]; + + if (file.size > MAX_FILE_SIZE) { + onError && onError("File too large!"); + // setIsDragActive(false); + } else { + const fileReader = new FileReader(); + fileReader.addEventListener("load", () => { + const data = fileReader.result; + + if (!(data instanceof ArrayBuffer)) { + return; + } + + const attachment: Attachment = { + filename: file.name, + mimeType: file.type, + data: new Uint8Array(data), + }; + + setAttachmentPreview( + URL.createObjectURL( + new Blob([Buffer.from(data)], { + type: attachment.mimeType, + }), + ), + ); + + setAttachment(attachment); + }); + + fileReader.readAsArrayBuffer(file); + (e as ChangeEvent).target.value = ""; + } + } else { + setAttachment(undefined); + setAttachmentPreview(undefined); + } + // setIsDragActive(false); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [setAttachment, setAttachmentPreview, onError], + ); + return { + onAttachmentChange, + }; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/useDebounced/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useDebounced/index.ts new file mode 100644 index 00000000..d19ba15b --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useDebounced/index.ts @@ -0,0 +1,36 @@ +import { useEffect, useRef, useState } from 'react'; + +export const useDebounced = ( + value: T, + delay: number +): { value: T; isDebouncing: boolean } => { + const [debouncedValue, setDebouncedValue] = useState(value); + const [isDebouncing, setIsDebouncing] = useState(false); + const firstUpdate = useRef(true); + const prevValue = useRef(value); + + useEffect(() => { + if (firstUpdate.current || prevValue.current === value) { + firstUpdate.current = false; + prevValue.current = value; + return; + } + + setIsDebouncing(true); + const handler = setTimeout(() => { + setDebouncedValue(value); + setIsDebouncing(false); + }, delay); + + prevValue.current = value; + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return { + value: debouncedValue, + isDebouncing, + }; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/useGetAudioDuration/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useGetAudioDuration/index.tsx new file mode 100644 index 00000000..ce7dc3c6 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useGetAudioDuration/index.tsx @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react'; + +const useGetAudioDuration = (url: string) => { + const [duration, setDuration] = useState(null); + + useEffect(() => { + if (!url) { + setDuration(null); + return; + } + + const getDuration = (url: string, next: (duration: number) => void) => { + const _player = new Audio(url); + const durationChangeHandler = function (this: HTMLAudioElement, e: Event) { + if (this.duration !== Infinity) { + const duration = this.duration; + _player.remove(); // Cleanup + next(duration); + } + }; + + _player.addEventListener('durationchange', durationChangeHandler, false); + _player.load(); + _player.currentTime = 24 * 60 * 60; + _player.volume = 0; + }; + + getDuration(url, (duration: number) => { + setDuration(duration); + }); + + return () => { + const _player = new Audio(url); + _player.remove(); + }; + }, [url]); + + return duration; +}; + +export default useGetAudioDuration; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/useRecordingTimer/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useRecordingTimer/index.tsx new file mode 100644 index 00000000..bb41996e --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useRecordingTimer/index.tsx @@ -0,0 +1,46 @@ +import { useEffect } from "react"; +import type { StatusMessages } from "react-media-recorder-2"; +import { useStopwatch } from "react-timer-hook"; +import { getRecordingValue } from "../../utils/recordingValue"; + +interface useRecordingTimerProps { + stopRecording: () => void; + status: StatusMessages; +} + +export const useRecordingTimer = ({ + stopRecording, + status, +}: useRecordingTimerProps) => { + + const { start, pause, minutes, seconds, reset } = useStopwatch({ + autoStart: false, + }); + + useEffect(() => { + if (minutes === 10) { + stopRecording(); + pause(); + } + }, [stopRecording, pause, minutes]); + + useEffect(() => { + if (status === "idle") { + reset(); + pause(); + } + }, [status, pause, reset]) + + const recordingValue = getRecordingValue( + status, + minutes, + seconds, + ); + + return { + start, + pause, + reset, + recordingValue, + }; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/hooks/useVoiceRecording/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useVoiceRecording/index.tsx new file mode 100644 index 00000000..474b3782 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/hooks/useVoiceRecording/index.tsx @@ -0,0 +1,96 @@ +import type { Attachment } from "@xmtp/content-type-remote-attachment"; +import { useRef, useState } from "react"; + +interface useVoiceRecordingProps { + setAttachment: (attachment: Attachment | undefined) => void; + setAttachmentPreview: (url: string | undefined) => void; + onError?: (error: string) => void; +} + +export const useRecordVoice = ({ setAttachment, setAttachmentPreview, onError }: useVoiceRecordingProps) => { + const [mediaRecorder, setMediaRecorder] = useState(null); + const [mediaStream, setMediaStream] = useState(null); + const [recording, setRecording] = useState(false); + const chunks = useRef([]); + + const stopMediaStream = () => { + if (mediaStream) { + mediaStream.getTracks().forEach(track => track.stop()); + setMediaStream(null); + } + }; + + const startRecording = async () => { + if (!mediaStream) { + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + setMediaStream(stream); + const newMediaRecorder = new MediaRecorder(stream); + + newMediaRecorder.onstart = () => { + chunks.current = []; + }; + + newMediaRecorder.ondataavailable = (ev) => { + chunks.current.push(ev.data); + }; + + newMediaRecorder.onstop = async () => { + const audioBlob = new Blob(chunks.current, { type: "audio/wav" }); + const blobUrl = URL.createObjectURL(audioBlob); + setAttachmentPreview(blobUrl); + + const arrayBuffer = await audioBlob.arrayBuffer(); + const uint8Array = new Uint8Array(arrayBuffer); + + const newAttachment = { + filename: "VoiceRecording.wav", + mimeType: "audio/wav", + data: uint8Array, + }; + setAttachment(newAttachment); + }; + + setMediaRecorder(newMediaRecorder); + setTimeout(() => { + try { + newMediaRecorder.start(); + setRecording(true); + } catch (error) { + console.error("Error starting the MediaRecorder.", error); + onError?.("Error starting the MediaRecorder."); + } + }, 10); + } catch (error) { + console.error("Error accessing media devices.", error); + onError?.("Error accessing media devices."); + } + } else if (mediaRecorder) { + try { + mediaRecorder.start(); + setRecording(true); + } catch (error) { + console.error("Error starting the MediaRecorder.", error); + onError?.("Error starting the MediaRecorder."); + } + } + }; + + const stopRecording = () => { + if (mediaRecorder) { + mediaRecorder.stop(); + setRecording(false); + stopMediaStream(); + } + }; + + // useEffect(() => { + // return () => { + // stopMediaStream(); + // }; + // }, [mediaStream, stopMediaStream]); + + return { + recording, startRecording, stopRecording + }; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/index.ts new file mode 100644 index 00000000..460ab6b5 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/index.ts @@ -0,0 +1 @@ +export * from './plugins'; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/plugins/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/plugins/index.tsx new file mode 100644 index 00000000..5f0d27c9 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/plugins/index.tsx @@ -0,0 +1,26 @@ +import { JustaPlugin } from '@justweb3/widget'; +import { JustWeb3XMTPProvider } from '../providers/JustWeb3XMTPProvider'; +import { ChatButton } from '../components/ChatButton'; + +export const XMTPPlugin: JustaPlugin = { + name: 'XMTPPlugin', + components: { + Provider: (pluginApi, children) => { + return ( + pluginApi.setState('xmtpOpen', open)} + > + {children} + + ); + }, + SignInMenu: (pluginApi) => { + return ( + pluginApi.setState('xmtpOpen', open)} + /> + ); + }, + }, +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/providers/JustWeb3XMTPProvider/index.tsx b/packages/@justweb3/xmtp-plugin/src/lib/providers/JustWeb3XMTPProvider/index.tsx new file mode 100644 index 00000000..c5e135b3 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/providers/JustWeb3XMTPProvider/index.tsx @@ -0,0 +1,93 @@ +import React, { useEffect } from 'react'; +import { + attachmentContentTypeConfig, + CachedConversation, + ContentTypeMetadata, + reactionContentTypeConfig, + replyContentTypeConfig, + useClient, + XMTPProvider, +} from '@xmtp/react-sdk'; +import { useJustWeb3 } from '@justweb3/widget'; +import { ChatSheet } from '../../components/ChatSheet'; +import { MessageSheet } from '../../components/MessageSheet'; + +const contentTypeConfigs = [ + attachmentContentTypeConfig, + reactionContentTypeConfig, + replyContentTypeConfig, +]; + +interface JustWeb3XMTPContextProps { } + +const JustWeb3XMTPContext = React.createContext< + JustWeb3XMTPContextProps | undefined +>(undefined); + +export interface JustWeb3XMTPProviderProps { + children: React.ReactNode; + open?: boolean; + handleOpen?: (open: boolean) => void; +} + +export const JustWeb3XMTPProvider: React.FC = ({ + children, + open, + handleOpen, +}) => { + const [isXmtpEnabled, setIsXmtpEnabled] = React.useState(false); + const [conversation, setConversation] = + React.useState | null>(null); + const handleXmtpEnabled = (enabled: boolean) => { + setIsXmtpEnabled(enabled); + }; + + const handleOpenChat = ( + conversation: CachedConversation | null + ) => { + setConversation(conversation); + }; + + return ( + + + + + {isXmtpEnabled && ( + + )} + {children} + + + ); +}; + +interface ChecksProps { + open?: boolean; + handleXmtpEnabled: (enabled: boolean) => void; +} + +export const Checks: React.FC = ({ open, handleXmtpEnabled }) => { + const { connectedEns } = useJustWeb3(); + const { disconnect, client } = useClient(); + + useEffect(() => { + handleXmtpEnabled(!!client); + }, [client, handleXmtpEnabled]); + + useEffect(() => { + if (!connectedEns?.ens) { + disconnect(); + } + }, [connectedEns?.ens, disconnect]); + + return null; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/attachments/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/attachments/index.ts new file mode 100644 index 00000000..421ce496 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/attachments/index.ts @@ -0,0 +1,14 @@ +export const typeLookup: Record = { + jpg: 'image', + jpeg: 'image', + png: 'image', + gif: 'image', + webp: 'image', + quicktime: 'video', + mov: 'video', + mp4: 'video', + pdf: 'application', + doc: 'application', +}; + +export type AttachmentType = 'image' | 'video' | 'application' | undefined; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/calculateFileSize/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/calculateFileSize/index.ts new file mode 100644 index 00000000..e42510ca --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/calculateFileSize/index.ts @@ -0,0 +1,9 @@ +export const calculateFileSize = (bytes: number) => { + const kilobytes = bytes / 1024 + if (kilobytes < 1024) { + return kilobytes.toFixed(2) + ' KB' + } else { + const megabytes = kilobytes / 1024 + return megabytes.toFixed(2) + ' MB' + } +} diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/emojis/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/emojis/index.ts new file mode 100644 index 00000000..046290f8 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/emojis/index.ts @@ -0,0 +1,121 @@ +export type EmojiObject = { + name: string; + emoji: string; +}; + +export const emojis = [ + { name: 'grinningFace', emoji: '๐Ÿ˜€' }, + { name: 'grinningFaceWithBigEyes', emoji: '๐Ÿ˜ƒ' }, + { name: 'grinningFaceWithSmilingEyes', emoji: '๐Ÿ˜„' }, + { name: 'beamingFaceWithSmilingEyes', emoji: '๐Ÿ˜' }, + { name: 'grinningSquintingFace', emoji: '๐Ÿ˜†' }, + { name: 'grinningFaceWithSweat', emoji: '๐Ÿ˜…' }, + { name: 'faceWithTearsOfJoy', emoji: '๐Ÿ˜‚' }, + { name: 'rollingOnTheFloorLaughing', emoji: '๐Ÿคฃ' }, + { name: 'smilingFaceWithSmilingEyes', emoji: '๐Ÿ˜Š' }, + { name: 'smilingFaceWithHalo', emoji: '๐Ÿ˜‡' }, + { name: 'slightlySmilingFace', emoji: '๐Ÿ™‚' }, + { name: 'upsideDownFace', emoji: '๐Ÿ™ƒ' }, + { name: 'winkingFace', emoji: '๐Ÿ˜‰' }, + { name: 'relievedFace', emoji: '๐Ÿ˜Œ' }, + { name: 'heartEyes', emoji: '๐Ÿ˜' }, + { name: 'smilingFaceWithHearts', emoji: '๐Ÿฅฐ' }, + { name: 'starStruck', emoji: '๐Ÿคฉ' }, + { name: 'faceBlowingAKiss', emoji: '๐Ÿ˜˜' }, + { name: 'kissingFace', emoji: '๐Ÿ˜—' }, + { name: 'kissingFaceWithSmilingEyes', emoji: '๐Ÿ˜™' }, + { name: 'kissingFaceWithClosedEyes', emoji: '๐Ÿ˜š' }, + { name: 'faceSavouringFood', emoji: '๐Ÿ˜‹' }, + { name: 'faceWithTongue', emoji: '๐Ÿ˜›' }, + { name: 'winkingFaceWithTongue', emoji: '๐Ÿ˜œ' }, + { name: 'zanyFace', emoji: '๐Ÿคช' }, + { name: 'squintingFaceWithTongue', emoji: '๐Ÿ˜' }, + { name: 'moneyMouthFace', emoji: '๐Ÿค‘' }, + { name: 'huggingFace', emoji: '๐Ÿค—' }, + { name: 'faceWithHandOverMouth', emoji: '๐Ÿคญ' }, + { name: 'shushingFace', emoji: '๐Ÿคซ' }, + { name: 'thinkingFace', emoji: '๐Ÿค”' }, + { name: 'zipperMouthFace', emoji: '๐Ÿค' }, + { name: 'faceWithRaisedEyebrow', emoji: '๐Ÿคจ' }, + { name: 'neutralFace', emoji: '๐Ÿ˜' }, + { name: 'expressionlessFace', emoji: '๐Ÿ˜‘' }, + { name: 'faceWithoutMouth', emoji: '๐Ÿ˜ถ' }, + { name: 'smirkingFace', emoji: '๐Ÿ˜' }, + { name: 'unamusedFace', emoji: '๐Ÿ˜’' }, + { name: 'faceWithRollingEyes', emoji: '๐Ÿ™„' }, + { name: 'grimacingFace', emoji: '๐Ÿ˜ฌ' }, + { name: 'lyingFace', emoji: '๐Ÿคฅ' }, + { name: 'pensiveFace', emoji: '๐Ÿ˜”' }, + { name: 'sleepyFace', emoji: '๐Ÿ˜ช' }, + { name: 'droolingFace', emoji: '๐Ÿคค' }, + { name: 'sleepingFace', emoji: '๐Ÿ˜ด' }, + { name: 'faceWithMedicalMask', emoji: '๐Ÿ˜ท' }, + { name: 'faceWithThermometer', emoji: '๐Ÿค’' }, + { name: 'faceWithHeadBandage', emoji: '๐Ÿค•' }, + { name: 'nauseatedFace', emoji: '๐Ÿคข' }, + { name: 'faceVomiting', emoji: '๐Ÿคฎ' }, + { name: 'sneezingFace', emoji: '๐Ÿคง' }, + { name: 'hotFace', emoji: '๐Ÿฅต' }, + { name: 'coldFace', emoji: '๐Ÿฅถ' }, + { name: 'woozyFace', emoji: '๐Ÿฅด' }, + { name: 'dizzyFace', emoji: '๐Ÿ˜ต' }, + { name: 'explodingHead', emoji: '๐Ÿคฏ' }, + { name: 'cowboyHatFace', emoji: '๐Ÿค ' }, + { name: 'partyingFace', emoji: '๐Ÿฅณ' }, + { name: 'smilingFaceWithSunglasses', emoji: '๐Ÿ˜Ž' }, + { name: 'nerdFace', emoji: '๐Ÿค“' }, + { name: 'faceWithMonocle', emoji: '๐Ÿง' }, + { name: 'confusedFace', emoji: '๐Ÿ˜•' }, + { name: 'worriedFace', emoji: '๐Ÿ˜Ÿ' }, + { name: 'slightlyFrowningFace', emoji: '๐Ÿ™' }, + { name: 'frowningFace', emoji: 'โ˜น' }, + { name: 'faceWithOpenMouth', emoji: '๐Ÿ˜ฎ' }, + { name: 'hushedFace', emoji: '๐Ÿ˜ฏ' }, + { name: 'astonishedFace', emoji: '๐Ÿ˜ฒ' }, + { name: 'flushedFace', emoji: '๐Ÿ˜ณ' }, + { name: 'pleadingFace', emoji: '๐Ÿฅบ' }, + { name: 'frowningFaceWithOpenMouth', emoji: '๐Ÿ˜ฆ' }, + { name: 'anguishedFace', emoji: '๐Ÿ˜ง' }, + { name: 'fearfulFace', emoji: '๐Ÿ˜จ' }, + { name: 'anxiousFaceWithSweat', emoji: '๐Ÿ˜ฐ' }, + { name: 'sadButRelievedFace', emoji: '๐Ÿ˜ฅ' }, + { name: 'cryingFace', emoji: '๐Ÿ˜ข' }, + { name: 'loudlyCryingFace', emoji: '๐Ÿ˜ญ' }, + { name: 'faceScreamingInFear', emoji: '๐Ÿ˜ฑ' }, + { name: 'confoundedFace', emoji: '๐Ÿ˜–' }, + { name: 'perseveringFace', emoji: '๐Ÿ˜ฃ' }, + { name: 'disappointedFace', emoji: '๐Ÿ˜ž' }, + { name: 'downcastFaceWithSweat', emoji: '๐Ÿ˜“' }, + { name: 'wearyFace', emoji: '๐Ÿ˜ฉ' }, + { name: 'tiredFace', emoji: '๐Ÿ˜ซ' }, + { name: 'faceWithSteamFromNose', emoji: '๐Ÿ˜ค' }, + { name: 'poutingFace', emoji: '๐Ÿ˜ก' }, + { name: 'angryFace', emoji: '๐Ÿ˜ ' }, + { name: 'faceWithSymbolsOnMouth', emoji: '๐Ÿคฌ' }, + { name: 'smilingFaceWithHorns', emoji: '๐Ÿ˜ˆ' }, + { name: 'angryFaceWithHorns', emoji: '๐Ÿ‘ฟ' }, + { name: 'skull', emoji: '๐Ÿ’€' }, + { name: 'skullAndCrossbones', emoji: 'โ˜ ' }, + { name: 'pileOfPoo', emoji: '๐Ÿ’ฉ' }, + { name: 'clownFace', emoji: '๐Ÿคก' }, + { name: 'ogre', emoji: '๐Ÿ‘น' }, + { name: 'goblin', emoji: '๐Ÿ‘บ' }, + { name: 'ghost', emoji: '๐Ÿ‘ป' }, + { name: 'alien', emoji: '๐Ÿ‘ฝ' }, + { name: 'alienMonster', emoji: '๐Ÿ‘พ' }, + { name: 'robot', emoji: '๐Ÿค–' }, + { name: 'grinningCat', emoji: '๐Ÿ˜บ' }, + { name: 'grinningCatWithSmilingEyes', emoji: '๐Ÿ˜ธ' }, + { name: 'catWithTearsOfJoy', emoji: '๐Ÿ˜น' }, + { name: 'smilingCatWithHeartEyes', emoji: '๐Ÿ˜ป' }, + { name: 'catWithWrySmile', emoji: '๐Ÿ˜ผ' }, + { name: 'kissingCat', emoji: '๐Ÿ˜ฝ' }, + { name: 'wearyCat', emoji: '๐Ÿ™€' }, + { name: 'cryingCat', emoji: '๐Ÿ˜ฟ' }, + { name: 'poutingCat', emoji: '๐Ÿ˜พ' }, +]; + +export const findEmojiByName = (name: string) => { + const emojiObj = emojis.find((emoji) => emoji.name === name); + return emojiObj ? emojiObj.emoji : null; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/filterReactionsMessages/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/filterReactionsMessages/index.ts new file mode 100644 index 00000000..4fbc2f23 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/filterReactionsMessages/index.ts @@ -0,0 +1,25 @@ +import { CachedMessage } from '@xmtp/react-sdk'; + +export type MessageWithReaction = CachedMessage & { + reactionMessage?: CachedMessage; +}; + +export const filterReactionsMessages = (messages: CachedMessage[]) => { + const messagesMap = new Map(); + for (const message of messages) { + if (message.contentType === 'xmtp.org/reaction:1.0') { + const referenceId = message.content.reference.toString(); + const reactionMessage = messagesMap.get(referenceId); + if (reactionMessage) { + const messageWithReaction: MessageWithReaction = { + ...reactionMessage, + reactionMessage: message, + }; + messagesMap.set(reactionMessage.id, messageWithReaction); + } + } else { + messagesMap.set(message.id, message); + } + } + return Array.from(messagesMap.values()); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/formatAddress/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatAddress/index.ts new file mode 100644 index 00000000..726343cd --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatAddress/index.ts @@ -0,0 +1,5 @@ +export const formatAddress = (text: string) => { + const start = text.substring(0, 4); + const end = text.slice(-4); + return `${start}...${end}`; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/formatChatDate/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatChatDate/index.ts new file mode 100644 index 00000000..158a16b7 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatChatDate/index.ts @@ -0,0 +1,49 @@ +export const formatChatDate = (inputDate: Date): string => { + const now = new Date(); + const input = new Date(inputDate); + + // Helper function to format date as DD/MM/YYYY + const formatDate = (date: Date): string => + `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`; + + // Check if it's today + if ( + input.getDate() === now.getDate() && + input.getMonth() === now.getMonth() && + input.getFullYear() === now.getFullYear() + ) { + return `${input.getHours()}:${String(input.getMinutes()).padStart(2, '0')}`; + } + + // Check if it's yesterday + const yesterday = new Date(now); + yesterday.setDate(now.getDate() - 1); + + if ( + input.getDate() === yesterday.getDate() && + input.getMonth() === yesterday.getMonth() && + input.getFullYear() === yesterday.getFullYear() + ) { + return 'Yesterday'; + } + + // Check if it's within the last week + const oneWeekAgo = new Date(now); + oneWeekAgo.setDate(now.getDate() - 7); + + if (input > oneWeekAgo) { + const dayNames = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + ]; + return dayNames[input.getDay()]; + } + + // Default to DD/MM/YYYY format for older dates + return formatDate(input); +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/formatVoiceTime/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatVoiceTime/index.ts new file mode 100644 index 00000000..c74d31c1 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/formatVoiceTime/index.ts @@ -0,0 +1,12 @@ +export const formatTime = (timeSeconds: number) => { + if (Number.isFinite(timeSeconds)) { + const date = new Date(timeSeconds * 1000); + const minutes = date.getUTCMinutes(); + const mins = minutes < 10 ? `0${minutes}` : minutes; + const seconds = date.getUTCSeconds(); + const secs = seconds < 10 ? `0${seconds}` : seconds; + return `${mins}:${secs}`; + } else { + return '00:00'; + } +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/groupMessageByDate/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/groupMessageByDate/index.ts new file mode 100644 index 00000000..c6a8b16f --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/groupMessageByDate/index.ts @@ -0,0 +1,37 @@ +import { MessageWithReaction } from '../filterReactionsMessages' + +interface GroupedMessages { + [date: string]: MessageWithReaction[] +} + +const getFormattedDate = (date: Date): string => { + const options: Intl.DateTimeFormatOptions = { + weekday: 'long', + day: '2-digit', + month: 'short', + } + const formattedDate = date + .toLocaleDateString('en-US', options) + .toUpperCase() + const parts = formattedDate.split(' ') + return `${parts[0]} ${parts[1]} ${parts[2]}` +} + +export const groupMessagesByDate = ( + messages: MessageWithReaction[], +): GroupedMessages => { + const groupedMessages = messages.reduce((acc, message) => { + const date = new Date(message.sentAt) + const formattedDate = getFormattedDate(date) + + if (!acc[formattedDate]) { + acc[formattedDate] = [] + } + + acc[formattedDate].push(message) + + return acc + }, {}) + + return groupedMessages +} diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/messageTimeFormat/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/messageTimeFormat/index.ts new file mode 100644 index 00000000..27e22c2a --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/messageTimeFormat/index.ts @@ -0,0 +1,16 @@ +export const formatMessageSentTime = (date: Date) => { + // Get hours, minutes, and AM/PM + let hours = date.getHours(); + const minutes = date.getMinutes(); + const ampm = hours >= 12 ? 'PM' : 'AM'; + + // Convert 24h time to 12h format + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + + // Ensure minutes are two digits + const minutesStr = minutes < 10 ? '0' + minutes : minutes; + + // Format: "HH:MM AM/PM" + return `${hours}:${minutesStr} ${ampm}`; +}; diff --git a/packages/@justweb3/xmtp-plugin/src/lib/utils/recordingValue/index.ts b/packages/@justweb3/xmtp-plugin/src/lib/utils/recordingValue/index.ts new file mode 100644 index 00000000..8e74f33b --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/lib/utils/recordingValue/index.ts @@ -0,0 +1,12 @@ +import type { StatusMessages } from 'react-media-recorder-2'; + +export const getRecordingValue = ( + status: StatusMessages, + minutes: number, + seconds: number +): string | null => + status === 'recording' + ? `${minutes < 10 ? '0' : ''}${minutes}:${ + seconds < 10 ? '0' : '' + }${seconds}` + : null; diff --git a/packages/@justweb3/xmtp-plugin/src/stories/xmtp.stories.tsx b/packages/@justweb3/xmtp-plugin/src/stories/xmtp.stories.tsx new file mode 100644 index 00000000..a622ef32 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/src/stories/xmtp.stories.tsx @@ -0,0 +1,142 @@ +import { + JustWeb3Button, + JustWeb3Provider, + JustWeb3ProviderConfig, +} from '@justweb3/widget'; +import '@justweb3/widget/styles.css'; +import { + ConnectButton, + getDefaultConfig, + RainbowKitProvider, +} from '@rainbow-me/rainbowkit'; +import '@rainbow-me/rainbowkit/styles.css'; +import { Meta, StoryObj } from '@storybook/react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { WagmiProvider } from 'wagmi'; +import { mainnet, sepolia } from 'wagmi/chains'; +import { XMTPPlugin } from '../lib'; +import { ChainId } from '@justaname.id/sdk'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { EFPPlugin } from '@justweb3/efp-plugin'; +import { POAPPlugin } from '@justweb3/poap-plugin'; +import { TalentProtocolPlugin } from '@justweb3/talent-protocol-plugin'; +import { JustVerifiedPlugin } from '@justverified/plugin'; + +const queryClient = new QueryClient(); + +const JustWeb3Config: JustWeb3ProviderConfig = { + config: { + origin: import.meta.env.STORYBOOK_APP_ORIGIN, + domain: import.meta.env.STORYBOOK_APP_DOMAIN, + signInTtl: 1000 * 60 * 60 * 24, + }, + backendUrl: import.meta.env.STORYBOOK_APP_BACKEND_URL, + networks: [ + { + chainId: 1, + providerUrl: import.meta.env.STORYBOOK_APP_MAINNET_PROVIDER_URL, + }, + { + chainId: 11155111, + providerUrl: import.meta.env.STORYBOOK_APP_SEPOLIA_PROVIDER_URL, + }, + ], + ensDomains: [ + { + ensDomain: import.meta.env.STORYBOOK_APP_ENS_DOMAIN, + chainId: parseInt(import.meta.env.STORYBOOK_APP_CHAIN_ID) as ChainId, + }, + ], + openOnWalletConnect: false, + allowedEns: 'all', + dev: import.meta.env.STORYBOOK_APP_DEV === 'true', + plugins: [ + XMTPPlugin, + EFPPlugin, + POAPPlugin({ + apiKey: import.meta.env.STORYBOOK_APP_POAP_KEY, + }), + TalentProtocolPlugin({ + apiKey: import.meta.env.STORYBOOK_APP_TALENT_PROTOCOL_API_KEY, + }), + JustVerifiedPlugin(['email', 'telegram', 'twitter', 'discord']), + ], + // color: { + // primary: '#FF00FF', + // background: '#000000', + // }, +}; + +export const Example = () => { + const config = getDefaultConfig({ + appName: 'My RainbowKit App', + projectId: 'YOUR_PROJECT_ID', + chains: [mainnet, sepolia], + }); + + return ( + + + + +

JustWeb3 Sign In

+ +
+
+ + + +
+ + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} +
+ + + + + + ); +}; + +const meta: Meta = { + component: Example, + title: 'Connect/XMTP', +}; +export default meta; +type Story = StoryObj; diff --git a/packages/@justweb3/xmtp-plugin/tsconfig.json b/packages/@justweb3/xmtp-plugin/tsconfig.json new file mode 100644 index 00000000..759148c7 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/tsconfig.json @@ -0,0 +1,33 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "moduleResolution": "node", + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "paths": { + "@justaname.id/siwens": ["packages/@justaname.id/siwens"], + "@justaname.id/sdk": ["packages/@justaname.id/sdk"], + "@justaname.id/react": ["packages/@justaname.id/react"], + "@justweb3/ui": ["packages/@justweb3/ui"], + "@justweb3/widget": ["packages/@justweb3/widget"] + } + }, + "files": [], + "include": [ + "node_modules/viem/**/*" + ], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./tsconfig.storybook.json" + } + ] +} diff --git a/packages/@justweb3/xmtp-plugin/tsconfig.lib.json b/packages/@justweb3/xmtp-plugin/tsconfig.lib.json new file mode 100644 index 00000000..b7ad5977 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/tsconfig.lib.json @@ -0,0 +1,39 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "moduleResolution": "node", + "types": [ + "node", + "jest", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts" + ], + "paths": { + "@justaname.id/siwens": ["packages/@justaname.id/siwens"], + "@justaname.id/sdk": ["packages/@justaname.id/sdk"], + "@justaname.id/react": ["packages/@justaname.id/react"], + "@justweb3/ui": ["packages/@justweb3/ui"], + "@justweb3/widget": ["packages/@justweb3/widget"] + } + }, + "exclude": [ + "jest.config.ts", + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.jsx", + "src/**/*.test.jsx", + "**/*.stories.ts", + "**/*.stories.js", + "**/*.stories.jsx", + "**/*.stories.tsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "../../node_modules/viem/**/*" + ] +} diff --git a/packages/@justweb3/xmtp-plugin/tsconfig.spec.json b/packages/@justweb3/xmtp-plugin/tsconfig.spec.json new file mode 100644 index 00000000..70d68044 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/tsconfig.spec.json @@ -0,0 +1,27 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"], + "paths": { + "@justaname.id/siwens": ["packages/@justaname.id/siwens"], + "@justaname.id/sdk": ["packages/@justaname.id/sdk"], + "@justaname.id/react": ["packages/@justaname.id/react"], + "@justweb3/ui": ["packages/@justweb3/ui"], + "@justweb3/widget": ["packages/@justweb3/widget"] + } + }, + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ] +} diff --git a/packages/@justweb3/xmtp-plugin/tsconfig.storybook.json b/packages/@justweb3/xmtp-plugin/tsconfig.storybook.json new file mode 100644 index 00000000..81d3537c --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/tsconfig.storybook.json @@ -0,0 +1,42 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDecoratorMetadata": true, + "outDir": "tsconfig.storybook", + "module": "esnext", + "noUnusedLocals": false, + "paths": { + "@justaname.id/siwens": ["packages/@justaname.id/siwens"], + "@justaname.id/sdk": ["packages/@justaname.id/sdk"], + "@justaname.id/react": ["packages/@justaname.id/react"], + "@justweb3/ui": ["packages/@justweb3/ui"], + "@justweb3/widget": ["packages/@justweb3/widget"] + } + }, + "files": [ + "../../../../node_modules/@nx/react/typings/styled-jsx.d.ts", + "../../../node_modules/@nx/react/typings/cssmodule.d.ts", + "../../../node_modules/@nx/react/typings/image.d.ts" + ], + "exclude": [ + "src/**/*.spec.ts", + "src/**/*.test.ts", + "src/**/*.spec.js", + "src/**/*.test.js", + "src/**/*.spec.tsx", + "src/**/*.test.tsx", + "src/**/*.spec.jsx", + "src/**/*.test.js" + ], + "include": [ + "src/lib/**/*.ts", + "src/**/*.stories.ts", + "src/**/*.stories.js", + "src/**/*.stories.jsx", + "src/**/*.stories.tsx", + "src/**/*.stories.mdx", + ".storybook/*.js", + ".storybook/*.ts", + "env.d.ts" + ] +} diff --git a/packages/@justweb3/xmtp-plugin/typedoc.json b/packages/@justweb3/xmtp-plugin/typedoc.json new file mode 100644 index 00000000..d9109a89 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/typedoc.json @@ -0,0 +1,7 @@ +{ + "$schema": "https://typedoc-plugin-markdown.org/schema.json", + "entryPoints": ["./src/index.ts"], + "plugin": ["typedoc-plugin-markdown"], + "out": "../../../docs/sdk/JustWeb3 Talent Protocol Plugin", + "cleanOutputDir": true +} diff --git a/packages/@justweb3/xmtp-plugin/update-package-json.js b/packages/@justweb3/xmtp-plugin/update-package-json.js new file mode 100644 index 00000000..e65e6887 --- /dev/null +++ b/packages/@justweb3/xmtp-plugin/update-package-json.js @@ -0,0 +1,31 @@ +const fs = require('fs'); +const path = require('path'); + +// Read the original package.json +const packageJson = require('./package.json'); + +// Modify the paths +packageJson.main = packageJson.main.replace('./dist/', './'); +packageJson.module = packageJson.module.replace('./dist/', './'); +packageJson.types = packageJson.types.replace('./dist/', './'); + +if (packageJson.exports) { + Object.keys(packageJson.exports).forEach((key) => { + if (typeof packageJson.exports[key] === 'string') { + packageJson.exports[key] = packageJson.exports[key].replace( + './dist/', + './' + ); + } else if (typeof packageJson.exports[key] === 'object') { + Object.keys(packageJson.exports[key]).forEach((subKey) => { + packageJson.exports[key][subKey] = packageJson.exports[key][ + subKey + ].replace('./dist/', './'); + }); + } + }); +} + +// Write the modified package.json to the dist folder +const distPath = path.join(__dirname, 'dist', 'package.json'); +fs.writeFileSync(distPath, JSON.stringify(packageJson, null, 2)); diff --git a/yarn.lock b/yarn.lock index 5bd02018..cc819a24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24,6 +24,13 @@ __metadata: languageName: node linkType: hard +"@adraffy/ens-normalize@npm:1.10.0": + version: 1.10.0 + resolution: "@adraffy/ens-normalize@npm:1.10.0" + checksum: 10c0/78ae700847a2516d5a0ae12c4e23d09392a40c67e73b137eb7189f51afb1601c8d18784aeda2ed288a278997824dc924d1f398852c21d41ee2c4c564f2fb4d26 + languageName: node + linkType: hard + "@adraffy/ens-normalize@npm:1.10.1": version: 1.10.1 resolution: "@adraffy/ens-normalize@npm:1.10.1" @@ -1665,7 +1672,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.25.6, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -3510,6 +3517,13 @@ __metadata: languageName: node linkType: hard +"@fastify/busboy@npm:^2.0.0": + version: 2.1.1 + resolution: "@fastify/busboy@npm:2.1.1" + checksum: 10c0/6f8027a8cba7f8f7b736718b013f5a38c0476eea67034c94a0d3c375e2b114366ad4419e6a6fa7ffc2ef9c6d3e0435d76dd584a7a1cbac23962fda7650b579e3 + languageName: node + linkType: hard + "@floating-ui/core@npm:^1.6.0": version: 1.6.8 resolution: "@floating-ui/core@npm:1.6.8" @@ -4632,6 +4646,18 @@ __metadata: languageName: unknown linkType: soft +"@justweb3/xmtp-plugin@workspace:packages/@justweb3/xmtp-plugin": + version: 0.0.0-use.local + resolution: "@justweb3/xmtp-plugin@workspace:packages/@justweb3/xmtp-plugin" + dependencies: + "@xmtp/react-sdk": "npm:^9.0.0" + peerDependencies: + "@justweb3/widget": ">=0.0.0" + react: ">=17" + wagmi: 2.x + languageName: unknown + linkType: soft + "@leichtgewicht/ip-codec@npm:^2.0.1": version: 2.0.5 resolution: "@leichtgewicht/ip-codec@npm:2.0.5" @@ -5559,7 +5585,7 @@ __metadata: languageName: node linkType: hard -"@noble/curves@npm:1.2.0": +"@noble/curves@npm:1.2.0, @noble/curves@npm:~1.2.0": version: 1.2.0 resolution: "@noble/curves@npm:1.2.0" dependencies: @@ -5614,7 +5640,14 @@ __metadata: languageName: node linkType: hard -"@noble/secp256k1@npm:1.7.1, @noble/secp256k1@npm:~1.7.0": +"@noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.2": + version: 1.3.3 + resolution: "@noble/hashes@npm:1.3.3" + checksum: 10c0/23c020b33da4172c988e44100e33cd9f8f6250b68b43c467d3551f82070ebd9716e0d9d2347427aa3774c85934a35fa9ee6f026fca2117e3fa12db7bedae7668 + languageName: node + linkType: hard + +"@noble/secp256k1@npm:1.7.1, @noble/secp256k1@npm:^1.7.1, @noble/secp256k1@npm:~1.7.0": version: 1.7.1 resolution: "@noble/secp256k1@npm:1.7.1" checksum: 10c0/48091801d39daba75520012027d0ff0b1719338d96033890cfe0d287ad75af00d82769c0194a06e7e4fbd816ae3f204f4a59c9e26f0ad16b429f7e9b5403ccd5 @@ -6952,6 +6985,86 @@ __metadata: languageName: node linkType: hard +"@protobufjs/aspromise@npm:^1.1.1, @protobufjs/aspromise@npm:^1.1.2": + version: 1.1.2 + resolution: "@protobufjs/aspromise@npm:1.1.2" + checksum: 10c0/a83343a468ff5b5ec6bff36fd788a64c839e48a07ff9f4f813564f58caf44d011cd6504ed2147bf34835bd7a7dd2107052af755961c6b098fd8902b4f6500d0f + languageName: node + linkType: hard + +"@protobufjs/base64@npm:^1.1.2": + version: 1.1.2 + resolution: "@protobufjs/base64@npm:1.1.2" + checksum: 10c0/eec925e681081af190b8ee231f9bad3101e189abbc182ff279da6b531e7dbd2a56f1f306f37a80b1be9e00aa2d271690d08dcc5f326f71c9eed8546675c8caf6 + languageName: node + linkType: hard + +"@protobufjs/codegen@npm:^2.0.4": + version: 2.0.4 + resolution: "@protobufjs/codegen@npm:2.0.4" + checksum: 10c0/26ae337c5659e41f091606d16465bbcc1df1f37cc1ed462438b1f67be0c1e28dfb2ca9f294f39100c52161aef82edf758c95d6d75650a1ddf31f7ddee1440b43 + languageName: node + linkType: hard + +"@protobufjs/eventemitter@npm:^1.1.0": + version: 1.1.0 + resolution: "@protobufjs/eventemitter@npm:1.1.0" + checksum: 10c0/1eb0a75180e5206d1033e4138212a8c7089a3d418c6dfa5a6ce42e593a4ae2e5892c4ef7421f38092badba4040ea6a45f0928869989411001d8c1018ea9a6e70 + languageName: node + linkType: hard + +"@protobufjs/fetch@npm:^1.1.0": + version: 1.1.0 + resolution: "@protobufjs/fetch@npm:1.1.0" + dependencies: + "@protobufjs/aspromise": "npm:^1.1.1" + "@protobufjs/inquire": "npm:^1.1.0" + checksum: 10c0/cda6a3dc2d50a182c5865b160f72077aac197046600091dbb005dd0a66db9cce3c5eaed6d470ac8ed49d7bcbeef6ee5f0bc288db5ff9a70cbd003e5909065233 + languageName: node + linkType: hard + +"@protobufjs/float@npm:^1.0.2": + version: 1.0.2 + resolution: "@protobufjs/float@npm:1.0.2" + checksum: 10c0/18f2bdede76ffcf0170708af15c9c9db6259b771e6b84c51b06df34a9c339dbbeec267d14ce0bddd20acc142b1d980d983d31434398df7f98eb0c94a0eb79069 + languageName: node + linkType: hard + +"@protobufjs/inquire@npm:^1.1.0": + version: 1.1.0 + resolution: "@protobufjs/inquire@npm:1.1.0" + checksum: 10c0/64372482efcba1fb4d166a2664a6395fa978b557803857c9c03500e0ac1013eb4b1aacc9ed851dd5fc22f81583670b4f4431bae186f3373fedcfde863ef5921a + languageName: node + linkType: hard + +"@protobufjs/path@npm:^1.1.2": + version: 1.1.2 + resolution: "@protobufjs/path@npm:1.1.2" + checksum: 10c0/cece0a938e7f5dfd2fa03f8c14f2f1cf8b0d6e13ac7326ff4c96ea311effd5fb7ae0bba754fbf505312af2e38500250c90e68506b97c02360a43793d88a0d8b4 + languageName: node + linkType: hard + +"@protobufjs/pool@npm:^1.1.0": + version: 1.1.0 + resolution: "@protobufjs/pool@npm:1.1.0" + checksum: 10c0/eda2718b7f222ac6e6ad36f758a92ef90d26526026a19f4f17f668f45e0306a5bd734def3f48f51f8134ae0978b6262a5c517c08b115a551756d1a3aadfcf038 + languageName: node + linkType: hard + +"@protobufjs/utf8@npm:^1.1.0": + version: 1.1.0 + resolution: "@protobufjs/utf8@npm:1.1.0" + checksum: 10c0/a3fe31fe3fa29aa3349e2e04ee13dc170cc6af7c23d92ad49e3eeaf79b9766264544d3da824dba93b7855bd6a2982fb40032ef40693da98a136d835752beb487 + languageName: node + linkType: hard + +"@radix-ui/number@npm:1.1.0": + version: 1.1.0 + resolution: "@radix-ui/number@npm:1.1.0" + checksum: 10c0/a48e34d5ff1484de1b7cf5d7317fefc831d49e96a2229f300fd37b657bd8cfb59c922830c00ec02838ab21de3b299a523474592e4f30882153412ed47edce6a4 + languageName: node + linkType: hard + "@radix-ui/primitive@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/primitive@npm:1.1.0" @@ -7490,6 +7603,35 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-slider@npm:^1.2.1": + version: 1.2.1 + resolution: "@radix-ui/react-slider@npm:1.2.1" + dependencies: + "@radix-ui/number": "npm:1.1.0" + "@radix-ui/primitive": "npm:1.1.0" + "@radix-ui/react-collection": "npm:1.1.0" + "@radix-ui/react-compose-refs": "npm:1.1.0" + "@radix-ui/react-context": "npm:1.1.1" + "@radix-ui/react-direction": "npm:1.1.0" + "@radix-ui/react-primitive": "npm:2.0.0" + "@radix-ui/react-use-controllable-state": "npm:1.1.0" + "@radix-ui/react-use-layout-effect": "npm:1.1.0" + "@radix-ui/react-use-previous": "npm:1.1.0" + "@radix-ui/react-use-size": "npm:1.1.0" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/f39b67f019accc2fddebddb0d7f5bca7fc6ce8b370d294779e5139f7f36135ead9dff8672a9e4d5c771103280df9a05185ff17656d11e9eb88170e8f30e5efb4 + languageName: node + linkType: hard + "@radix-ui/react-slot@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/react-slot@npm:1.1.0" @@ -8637,7 +8779,7 @@ __metadata: languageName: node linkType: hard -"@scure/base@npm:^1.1.3, @scure/base@npm:^1.1.5, @scure/base@npm:~1.1.0, @scure/base@npm:~1.1.6, @scure/base@npm:~1.1.7, @scure/base@npm:~1.1.8": +"@scure/base@npm:^1.1.3, @scure/base@npm:^1.1.5, @scure/base@npm:~1.1.0, @scure/base@npm:~1.1.2, @scure/base@npm:~1.1.6, @scure/base@npm:~1.1.7, @scure/base@npm:~1.1.8": version: 1.1.9 resolution: "@scure/base@npm:1.1.9" checksum: 10c0/77a06b9a2db8144d22d9bf198338893d77367c51b58c72b99df990c0a11f7cadd066d4102abb15e3ca6798d1529e3765f55c4355742465e49aed7a0c01fe76e8 @@ -8655,6 +8797,17 @@ __metadata: languageName: node linkType: hard +"@scure/bip32@npm:1.3.2": + version: 1.3.2 + resolution: "@scure/bip32@npm:1.3.2" + dependencies: + "@noble/curves": "npm:~1.2.0" + "@noble/hashes": "npm:~1.3.2" + "@scure/base": "npm:~1.1.2" + checksum: 10c0/2e9c1ce67f72b6c3329483f5fd39fb43ba6dcf732ed7ac63b80fa96341d2bc4cad1ea4c75bfeb91e801968c00df48b577b015fd4591f581e93f0d91178e630ca + languageName: node + linkType: hard + "@scure/bip32@npm:1.4.0": version: 1.4.0 resolution: "@scure/bip32@npm:1.4.0" @@ -8687,6 +8840,16 @@ __metadata: languageName: node linkType: hard +"@scure/bip39@npm:1.2.1": + version: 1.2.1 + resolution: "@scure/bip39@npm:1.2.1" + dependencies: + "@noble/hashes": "npm:~1.3.0" + "@scure/base": "npm:~1.1.0" + checksum: 10c0/fe951f69dd5a7cdcefbe865bce1b160d6b59ba19bd01d09f0718e54fce37a7d8be158b32f5455f0e9c426a7fbbede3e019bf0baa99bacc88ef26a76a07e115d4 + languageName: node + linkType: hard + "@scure/bip39@npm:1.3.0": version: 1.3.0 resolution: "@scure/bip39@npm:1.3.0" @@ -11638,6 +11801,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:>=13.7.0": + version: 22.9.1 + resolution: "@types/node@npm:22.9.1" + dependencies: + undici-types: "npm:~6.19.8" + checksum: 10c0/ea489ae603aa8874e4e88980aab6f2dad09c755da779c88dd142983bfe9609803c89415ca7781f723072934066f63daf2b3339ef084a8ad1a8079cf3958be243 + languageName: node + linkType: hard + "@types/node@npm:^12.12.6": version: 12.20.55 resolution: "@types/node@npm:12.20.55" @@ -14055,6 +14227,133 @@ __metadata: languageName: node linkType: hard +"@xmtp/consent-proof-signature@npm:^0.1.4": + version: 0.1.4 + resolution: "@xmtp/consent-proof-signature@npm:0.1.4" + dependencies: + "@xmtp/proto": "npm:^3.72.0" + long: "npm:^5.2.3" + checksum: 10c0/61a6744d5e4e063b6b2fac1c8f46b89bc7b6ef762a213b06d312ff9596882da5cb71837c9a7300094f6f82acef893e43a0c9273aa607c1eedf39bb7188b3c688 + languageName: node + linkType: hard + +"@xmtp/content-type-primitives@npm:^1.0.1, @xmtp/content-type-primitives@npm:^1.0.3": + version: 1.0.3 + resolution: "@xmtp/content-type-primitives@npm:1.0.3" + dependencies: + "@xmtp/proto": "npm:^3.72.0" + checksum: 10c0/a644dd24d0edad2c67b4b7a42f5af32914fb2df935debaabde61dba9d0c061692b198757777323c266a1ce84a1a3050d98bde21f795035a18ae076fee9528a0e + languageName: node + linkType: hard + +"@xmtp/content-type-reaction@npm:^1.1.11": + version: 1.1.11 + resolution: "@xmtp/content-type-reaction@npm:1.1.11" + dependencies: + "@xmtp/content-type-primitives": "npm:^1.0.3" + checksum: 10c0/11449e9f6f8d6e4c97ce9b306f40989db588725bb29dd3b87c869df766884c68cc3b128bcbae00bc2688c43b464b64d701a481560c874661b6b2a703340e9d0b + languageName: node + linkType: hard + +"@xmtp/content-type-read-receipt@npm:^1.1.12": + version: 1.1.12 + resolution: "@xmtp/content-type-read-receipt@npm:1.1.12" + dependencies: + "@xmtp/content-type-primitives": "npm:^1.0.3" + checksum: 10c0/086094c96d13c088306e422b395752a033ac8ac7ad8c77611312fd4a0f7c776abc162c9d34de93a9cea9651505bb93be2074bef4d84f582d5202a45860965db1 + languageName: node + linkType: hard + +"@xmtp/content-type-remote-attachment@npm:^1.1.12": + version: 1.1.12 + resolution: "@xmtp/content-type-remote-attachment@npm:1.1.12" + dependencies: + "@noble/secp256k1": "npm:^1.7.1" + "@xmtp/content-type-primitives": "npm:^1.0.3" + "@xmtp/proto": "npm:^3.72.0" + checksum: 10c0/e3491ac0c2a92e2510b8271ccacc9399d8115b7b11874974f208f26e50c1530992c5aadc87742891766f4be0a172549abadeeae1c951425359d959bb01a4a988 + languageName: node + linkType: hard + +"@xmtp/content-type-reply@npm:^1.1.12": + version: 1.1.12 + resolution: "@xmtp/content-type-reply@npm:1.1.12" + dependencies: + "@xmtp/content-type-primitives": "npm:^1.0.3" + "@xmtp/proto": "npm:^3.72.0" + checksum: 10c0/e9e60e69277f91792a7b261321c7ab85d05af56d9f4f128c98ab185f6b973d4adbafa02c788127eca9f8ac517460b3a65314e34d56f44e3e7b201aa7681edb1e + languageName: node + linkType: hard + +"@xmtp/content-type-text@npm:^1.0.0, @xmtp/content-type-text@npm:^1.0.1": + version: 1.0.1 + resolution: "@xmtp/content-type-text@npm:1.0.1" + dependencies: + "@xmtp/content-type-primitives": "npm:^1.0.3" + checksum: 10c0/d981039d21ce437b3ae7eaa2e2c2779788c823354b59f261d9bf0582862d9b44872c20ae4964587a502adcc2fca99162e60adf55460992dacdc795513e035465 + languageName: node + linkType: hard + +"@xmtp/proto@npm:^3.72.0": + version: 3.72.3 + resolution: "@xmtp/proto@npm:3.72.3" + dependencies: + long: "npm:^5.2.0" + protobufjs: "npm:^7.0.0" + rxjs: "npm:^7.8.0" + undici: "npm:^5.8.1" + checksum: 10c0/ce899a62307853efd2fe199144ded806560b7f9f5d2b5b08948a001530a8cf43151fbb6b56e6e71879c4a72ab50ab7233b0cc9f7b1ed28e7e3ea86ff90f7d9df + languageName: node + linkType: hard + +"@xmtp/react-sdk@npm:^9.0.0": + version: 9.0.0 + resolution: "@xmtp/react-sdk@npm:9.0.0" + dependencies: + "@xmtp/content-type-primitives": "npm:^1.0.1" + "@xmtp/content-type-text": "npm:^1.0.0" + async-mutex: "npm:^0.5.0" + date-fns: "npm:^3.6.0" + dexie: "npm:^4.0.8" + dexie-react-hooks: "npm:^1.1.7" + uuid: "npm:^10.0.0" + zod: "npm:^3.23.8" + peerDependencies: + "@xmtp/content-type-primitives": ^1.0.1 + "@xmtp/content-type-reaction": ^1.1.7 + "@xmtp/content-type-remote-attachment": ^1.1.8 + "@xmtp/content-type-reply": ^1.1.9 + "@xmtp/xmtp-js": ^12.1.0 + react: ^16.14.0 || ^17 || ^18 + checksum: 10c0/adaa6b8b576251b7da474ca013ab032ad88febba5518cdf561ed507e061a61a35db79460b40793a98dff17a0322a175490941495ee1e728126dbdb83cabe6d02 + languageName: node + linkType: hard + +"@xmtp/user-preferences-bindings-wasm@npm:^0.3.6": + version: 0.3.6 + resolution: "@xmtp/user-preferences-bindings-wasm@npm:0.3.6" + checksum: 10c0/8a28468e3c82c85157dd7962485fec2712f448aa510fb46c51ea0e01139b0e316aa52ecbbc4a84604b254aa848e045dd378b1c116465c7739926a9a0bb4425f6 + languageName: node + linkType: hard + +"@xmtp/xmtp-js@npm:^13.0.4": + version: 13.0.4 + resolution: "@xmtp/xmtp-js@npm:13.0.4" + dependencies: + "@noble/secp256k1": "npm:1.7.1" + "@xmtp/consent-proof-signature": "npm:^0.1.4" + "@xmtp/content-type-primitives": "npm:^1.0.3" + "@xmtp/content-type-text": "npm:^1.0.1" + "@xmtp/proto": "npm:^3.72.0" + "@xmtp/user-preferences-bindings-wasm": "npm:^0.3.6" + async-mutex: "npm:^0.5.0" + elliptic: "npm:^6.5.7" + long: "npm:^5.2.3" + viem: "npm:2.7.15" + checksum: 10c0/6e93652ba5f1385253fae0c0714042cf9ed070279e34bb907b3739325486741e85158a6d77273c779440a3dd9bda2f4c6510203f58a0bcba05afe52883c24f8d + languageName: node + linkType: hard + "@xtuc/ieee754@npm:^1.2.0": version: 1.2.0 resolution: "@xtuc/ieee754@npm:1.2.0" @@ -14150,6 +14449,21 @@ __metadata: languageName: node linkType: hard +"abitype@npm:1.0.0": + version: 1.0.0 + resolution: "abitype@npm:1.0.0" + peerDependencies: + typescript: ">=5.0.4" + zod: ^3 >=3.22.0 + peerDependenciesMeta: + typescript: + optional: true + zod: + optional: true + checksum: 10c0/d685351a725c49f81bdc588e2f3825c28ad96c59048d4f36bf5e4ef30935c31f7e60b5553c70177b77a9e4d8b04290eea43d3d9c1c2562cb130381c88b15d39f + languageName: node + linkType: hard + "abitype@npm:1.0.6, abitype@npm:^1.0.0": version: 1.0.6 resolution: "abitype@npm:1.0.6" @@ -14891,6 +15205,15 @@ __metadata: languageName: node linkType: hard +"async-mutex@npm:^0.5.0": + version: 0.5.0 + resolution: "async-mutex@npm:0.5.0" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10c0/9096e6ad6b674c894d8ddd5aa4c512b09bb05931b8746ebd634952b05685608b2b0820ed5c406e6569919ff5fe237ab3c491e6f2887d6da6b6ba906db3ee9c32 + languageName: node + linkType: hard + "async@npm:3.2.4": version: 3.2.4 resolution: "async@npm:3.2.4" @@ -14942,6 +15265,16 @@ __metadata: languageName: node linkType: hard +"automation-events@npm:^7.0.9": + version: 7.1.4 + resolution: "automation-events@npm:7.1.4" + dependencies: + "@babel/runtime": "npm:^7.26.0" + tslib: "npm:^2.8.1" + checksum: 10c0/422e6b9046640d6d527ec9662b07c4fa9c04f26ef56c6fa418fcfcd7e41b3e2a48b2ae72f8255fca64982f232155653aa814346fc963cb0f1adc61c00470bf81 + languageName: node + linkType: hard + "autoprefixer@npm:^10.4.20, autoprefixer@npm:^10.4.9": version: 10.4.20 resolution: "autoprefixer@npm:10.4.20" @@ -15683,6 +16016,18 @@ __metadata: languageName: node linkType: hard +"broker-factory@npm:^3.0.107, broker-factory@npm:^3.0.97": + version: 3.0.107 + resolution: "broker-factory@npm:3.0.107" + dependencies: + "@babel/runtime": "npm:^7.26.0" + fast-unique-numbers: "npm:^9.0.14" + tslib: "npm:^2.8.1" + worker-factory: "npm:^7.0.34" + checksum: 10c0/f0dd17dd86471e9b89b36fcb4e2dac2dc1457ed17e548fc65f95942e54f8330911666e226f077583fff33575200cedb07959658db86b64c4974fe3f3f792b5b2 + languageName: node + linkType: hard + "brorand@npm:^1.0.1, brorand@npm:^1.1.0": version: 1.1.0 resolution: "brorand@npm:1.1.0" @@ -18585,6 +18930,24 @@ __metadata: languageName: node linkType: hard +"dexie-react-hooks@npm:^1.1.7": + version: 1.1.7 + resolution: "dexie-react-hooks@npm:1.1.7" + peerDependencies: + "@types/react": ">=16" + dexie: ^3.2 || ^4.0.1-alpha + react: ">=16" + checksum: 10c0/3ff38e715a52bff9132b483963246ea5372a282d9257c8c2bf8891c522fa0d761d1e362bb352eb63386f49ea9a55c52e1bcc5cce2019deb1eceba40d8a88631d + languageName: node + linkType: hard + +"dexie@npm:^4.0.8": + version: 4.0.10 + resolution: "dexie@npm:4.0.10" + checksum: 10c0/7e5cbc79947fd830918679f8621bceb4e543f139eb8ec73d5a9605927e5d659ea306a9649bbac7c37d55e623888daaf416f9868422badebc26049c9c2ebf1dfb + languageName: node + linkType: hard + "didyoumean@npm:^1.2.2": version: 1.2.2 resolution: "didyoumean@npm:1.2.2" @@ -20955,6 +21318,56 @@ __metadata: languageName: node linkType: hard +"extendable-media-recorder-wav-encoder-broker@npm:^7.0.100, extendable-media-recorder-wav-encoder-broker@npm:^7.0.111": + version: 7.0.111 + resolution: "extendable-media-recorder-wav-encoder-broker@npm:7.0.111" + dependencies: + "@babel/runtime": "npm:^7.26.0" + broker-factory: "npm:^3.0.107" + extendable-media-recorder-wav-encoder-worker: "npm:^8.0.108" + tslib: "npm:^2.8.1" + checksum: 10c0/ecbfd6f600dbfa87d87332efc1eaedae5bdba90b60f6941178ebde5636aaa6b0bbfca3b17d611e8887c9fc52a5babf0f6b0737f8e0c2d4fc78b3d2c1ed3efe34 + languageName: node + linkType: hard + +"extendable-media-recorder-wav-encoder-worker@npm:^8.0.108": + version: 8.0.108 + resolution: "extendable-media-recorder-wav-encoder-worker@npm:8.0.108" + dependencies: + "@babel/runtime": "npm:^7.26.0" + tslib: "npm:^2.8.1" + worker-factory: "npm:^7.0.34" + checksum: 10c0/06cab89e1fe0d7e5f8113a4dab6ccb11a4083412eab2b64f02cc76e0637c7b6dcdad3731fef8533813fa716f789beff08a875f82a43d1b409a59d5ebc9591b2d + languageName: node + linkType: hard + +"extendable-media-recorder-wav-encoder@npm:^7.0.85": + version: 7.0.121 + resolution: "extendable-media-recorder-wav-encoder@npm:7.0.121" + dependencies: + "@babel/runtime": "npm:^7.26.0" + extendable-media-recorder-wav-encoder-broker: "npm:^7.0.111" + extendable-media-recorder-wav-encoder-worker: "npm:^8.0.108" + tslib: "npm:^2.8.1" + checksum: 10c0/3afd95e9986214630dfe0e9ed55bb0cba5639ab3b98e15a8b97f58d2ba10e40d9eb3ef0c24cbd43cd44bef17fcfd1632b76734344ff514742b7171ad3c1c9499 + languageName: node + linkType: hard + +"extendable-media-recorder@npm:^7.1.9": + version: 7.1.22 + resolution: "extendable-media-recorder@npm:7.1.22" + dependencies: + "@babel/runtime": "npm:^7.22.6" + media-encoder-host: "npm:^8.0.98" + multi-buffer-data-view: "npm:^5.0.7" + recorder-audio-worklet: "npm:^6.0.12" + standardized-audio-context: "npm:^25.3.54" + subscribable-things: "npm:^2.1.22" + tslib: "npm:^2.6.0" + checksum: 10c0/ae7631708bf32feeb59ff058b6b1f09e75befb6c8d6c12b86e4a515f36e174f8d8d96b96658ea900201778622cfa5f39ca020c92ea53df2ae3cf548f2d1ab562 + languageName: node + linkType: hard + "extension-port-stream@npm:^3.0.0": version: 3.0.0 resolution: "extension-port-stream@npm:3.0.0" @@ -21103,6 +21516,16 @@ __metadata: languageName: node linkType: hard +"fast-unique-numbers@npm:^9.0.14, fast-unique-numbers@npm:^9.0.4": + version: 9.0.14 + resolution: "fast-unique-numbers@npm:9.0.14" + dependencies: + "@babel/runtime": "npm:^7.26.0" + tslib: "npm:^2.8.1" + checksum: 10c0/cb9316e207f29ddc79ce6b893a86663883c2627a119226446b11086a9a31f990203097b3eb645c0de02937188866cdb419b8e0d41e83cbe1510b504539b36dda + languageName: node + linkType: hard + "fast-uri@npm:^3.0.1": version: 3.0.3 resolution: "fast-uri@npm:3.0.3" @@ -24475,6 +24898,15 @@ __metadata: languageName: node linkType: hard +"isows@npm:1.0.3": + version: 1.0.3 + resolution: "isows@npm:1.0.3" + peerDependencies: + ws: "*" + checksum: 10c0/adec15db704bb66615dd8ef33f889d41ae2a70866b21fa629855da98cc82a628ae072ee221fe9779a9a19866cad2a3e72593f2d161a0ce0e168b4484c7df9cd2 + languageName: node + linkType: hard + "isows@npm:1.0.6": version: 1.0.6 resolution: "isows@npm:1.0.6" @@ -26261,6 +26693,7 @@ __metadata: "@radix-ui/react-label": "npm:^2.1.0" "@radix-ui/react-popover": "npm:^1.1.1" "@radix-ui/react-radio-group": "npm:^1.2.1" + "@radix-ui/react-slider": "npm:^1.2.1" "@radix-ui/react-switch": "npm:^1.1.1" "@radix-ui/react-tabs": "npm:^1.1.1" "@radix-ui/react-tooltip": "npm:^1.1.4" @@ -26327,6 +26760,12 @@ __metadata: "@vitest/ui": "npm:1.3.1" "@walletconnect/react-native-compat": "npm:^2.11.2" "@web3modal/wagmi-react-native": "npm:^1.2.0" + "@xmtp/content-type-reaction": "npm:^1.1.11" + "@xmtp/content-type-read-receipt": "npm:^1.1.12" + "@xmtp/content-type-remote-attachment": "npm:^1.1.12" + "@xmtp/content-type-reply": "npm:^1.1.12" + "@xmtp/react-sdk": "npm:^9.0.0" + "@xmtp/xmtp-js": "npm:^13.0.4" autoprefixer: "npm:^10.4.20" axios: "npm:^1.6.0" babel-jest: "npm:29.7.0" @@ -26378,10 +26817,11 @@ __metadata: prism-react-renderer: "npm:^2.4.0" punycode: "npm:^2.3.1" qs: "npm:^6.12.0" - react: "npm:18.3.1" + react: "npm:^18.3.1" react-code-blocks: "npm:^0.1.6" react-dom: "npm:18.3.1" react-hook-form: "npm:^7.53.0" + react-media-recorder-2: "npm:^1.6.23" react-native: "npm:0.73.2" react-native-svg: "npm:14.1.0" react-native-svg-transformer: "npm:1.2.0" @@ -26391,6 +26831,7 @@ __metadata: react-router-dom: "npm:6.11.2" react-split: "npm:^2.0.14" react-test-renderer: "npm:18.2.0" + react-timer-hook: "npm:^3.0.8" react-tiny-popover: "npm:^8.0.4" rollup: "npm:^4.24.0" rollup-plugin-postcss: "npm:^4.0.2" @@ -27367,6 +27808,13 @@ __metadata: languageName: node linkType: hard +"long@npm:^5.0.0, long@npm:^5.2.0, long@npm:^5.2.3": + version: 5.2.3 + resolution: "long@npm:5.2.3" + checksum: 10c0/6a0da658f5ef683b90330b1af76f06790c623e148222da9d75b60e266bbf88f803232dd21464575681638894a84091616e7f89557aa087fd14116c0f4e0e43d9 + languageName: node + linkType: hard + "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" @@ -27763,6 +28211,43 @@ __metadata: languageName: node linkType: hard +"media-encoder-host-broker@npm:^7.1.0": + version: 7.1.0 + resolution: "media-encoder-host-broker@npm:7.1.0" + dependencies: + "@babel/runtime": "npm:^7.24.4" + broker-factory: "npm:^3.0.97" + fast-unique-numbers: "npm:^9.0.4" + media-encoder-host-worker: "npm:^9.2.0" + tslib: "npm:^2.6.2" + checksum: 10c0/0387ef42930aa757377fb90542feb8dc0bac5a1f0baec97688fad9061afde0dbf1c75f4fe8f04412a087739c738f2556ca03d0d8a1dd5f064d0cad29c5c15c38 + languageName: node + linkType: hard + +"media-encoder-host-worker@npm:^9.2.0": + version: 9.2.0 + resolution: "media-encoder-host-worker@npm:9.2.0" + dependencies: + "@babel/runtime": "npm:^7.24.4" + extendable-media-recorder-wav-encoder-broker: "npm:^7.0.100" + tslib: "npm:^2.6.2" + worker-factory: "npm:^7.0.24" + checksum: 10c0/5fd1464898ec198e35877ead3e38998c7132425c35e49336986edce048088c1f2d5d3e15baac619cc217904090e8cf0d2a3ca44d6487244fbba3e62f1e58613b + languageName: node + linkType: hard + +"media-encoder-host@npm:^8.0.98": + version: 8.1.0 + resolution: "media-encoder-host@npm:8.1.0" + dependencies: + "@babel/runtime": "npm:^7.24.4" + media-encoder-host-broker: "npm:^7.1.0" + media-encoder-host-worker: "npm:^9.2.0" + tslib: "npm:^2.6.2" + checksum: 10c0/e274c446f20a175897ab593bd5bcb9d62dd65e6851a35bb9d117f3ada568cbcea91d878ebbd9a946f1abfb92286d626f02901777b8b478c74733201004c81c19 + languageName: node + linkType: hard + "media-query-parser@npm:^2.0.2": version: 2.0.2 resolution: "media-query-parser@npm:2.0.2" @@ -28610,6 +29095,16 @@ __metadata: languageName: node linkType: hard +"multi-buffer-data-view@npm:^5.0.7": + version: 5.0.14 + resolution: "multi-buffer-data-view@npm:5.0.14" + dependencies: + "@babel/runtime": "npm:^7.23.8" + tslib: "npm:^2.6.2" + checksum: 10c0/64722bff9c1d095feda26682a29587bb8ecad0ffbfcd8d89e90668f738ebc704612f88186f8af859af12bd8dfbac8933dcd1f27d96f772c9bb6154cc9b6fabbd + languageName: node + linkType: hard + "multicast-dns@npm:^7.2.5": version: 7.2.5 resolution: "multicast-dns@npm:7.2.5" @@ -32187,6 +32682,26 @@ __metadata: languageName: node linkType: hard +"protobufjs@npm:^7.0.0": + version: 7.4.0 + resolution: "protobufjs@npm:7.4.0" + dependencies: + "@protobufjs/aspromise": "npm:^1.1.2" + "@protobufjs/base64": "npm:^1.1.2" + "@protobufjs/codegen": "npm:^2.0.4" + "@protobufjs/eventemitter": "npm:^1.1.0" + "@protobufjs/fetch": "npm:^1.1.0" + "@protobufjs/float": "npm:^1.0.2" + "@protobufjs/inquire": "npm:^1.1.0" + "@protobufjs/path": "npm:^1.1.2" + "@protobufjs/pool": "npm:^1.1.0" + "@protobufjs/utf8": "npm:^1.1.0" + "@types/node": "npm:>=13.7.0" + long: "npm:^5.0.0" + checksum: 10c0/a5460a63fe596523b9a067cbce39a6b310d1a71750fda261f076535662aada97c24450e18c5bc98a27784f70500615904ff1227e1742183509f0db4fdede669b + languageName: node + linkType: hard + "proxy-addr@npm:~2.0.7": version: 2.0.7 resolution: "proxy-addr@npm:2.0.7" @@ -32713,6 +33228,16 @@ __metadata: languageName: node linkType: hard +"react-media-recorder-2@npm:^1.6.23": + version: 1.6.23 + resolution: "react-media-recorder-2@npm:1.6.23" + dependencies: + extendable-media-recorder: "npm:^7.1.9" + extendable-media-recorder-wav-encoder: "npm:^7.0.85" + checksum: 10c0/fd922d6e40a39abb2b04001569c9309334ba747bd9c6ed190042e012142ebfd8cb44cae73fae685a46bda1d9ee49bdb11377a6286a41f96240e1b92fd3c5daa1 + languageName: node + linkType: hard + "react-native-svg-transformer@npm:1.2.0": version: 1.2.0 resolution: "react-native-svg-transformer@npm:1.2.0" @@ -32983,6 +33508,15 @@ __metadata: languageName: node linkType: hard +"react-timer-hook@npm:^3.0.8": + version: 3.0.8 + resolution: "react-timer-hook@npm:3.0.8" + peerDependencies: + react: ">=16.8.0" + checksum: 10c0/3ee67def88bbe5d848ac02c9a795e49bc2bd248357e6119b26ad5ee1d98d66e5be21431d33e0e457da8bf2919c7cc5a3438f792e4fb5e44e8b80664f309af93e + languageName: node + linkType: hard + "react-tiny-popover@npm:^8.0.4": version: 8.1.2 resolution: "react-tiny-popover@npm:8.1.2" @@ -32993,7 +33527,7 @@ __metadata: languageName: node linkType: hard -"react@npm:18.3.1, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": +"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -33210,6 +33744,32 @@ __metadata: languageName: node linkType: hard +"recorder-audio-worklet-processor@npm:^5.0.29": + version: 5.0.29 + resolution: "recorder-audio-worklet-processor@npm:5.0.29" + dependencies: + "@babel/runtime": "npm:^7.26.0" + tslib: "npm:^2.8.1" + checksum: 10c0/5485b3a84f1a5970fac35ce35315540367b286716246239d81ebb977c251c42386508df8ae01abe6e4f697312002c07d16ee0626fe0db95e2d794d05e88801f8 + languageName: node + linkType: hard + +"recorder-audio-worklet@npm:^6.0.12": + version: 6.0.39 + resolution: "recorder-audio-worklet@npm:6.0.39" + dependencies: + "@babel/runtime": "npm:^7.26.0" + broker-factory: "npm:^3.0.107" + fast-unique-numbers: "npm:^9.0.14" + recorder-audio-worklet-processor: "npm:^5.0.29" + standardized-audio-context: "npm:^25.3.77" + subscribable-things: "npm:^2.1.45" + tslib: "npm:^2.8.1" + worker-factory: "npm:^7.0.34" + checksum: 10c0/38ec13a988a130b2e65a62a54cbd8e37c77c5638f47ef8b3df85787311df4c6eb0024da1fb8e170ec8dedb2e477f83cf4faaf070d40bc46c87c7b81da51bda80 + languageName: node + linkType: hard + "redent@npm:^3.0.0": version: 3.0.0 resolution: "redent@npm:3.0.0" @@ -33958,6 +34518,13 @@ __metadata: languageName: node linkType: hard +"rxjs-interop@npm:^2.0.0": + version: 2.0.0 + resolution: "rxjs-interop@npm:2.0.0" + checksum: 10c0/609d4766630624af138b4def9dcc435b5e2118f72e2e84cda6213315585c7160b40c5d3a88c2c166997f5c28f5ea03451c73d86d240e92e7be5fce25b37b5028 + languageName: node + linkType: hard + "rxjs@npm:^6.6.3": version: 6.6.7 resolution: "rxjs@npm:6.6.7" @@ -35192,6 +35759,17 @@ __metadata: languageName: node linkType: hard +"standardized-audio-context@npm:^25.3.54, standardized-audio-context@npm:^25.3.77": + version: 25.3.77 + resolution: "standardized-audio-context@npm:25.3.77" + dependencies: + "@babel/runtime": "npm:^7.25.6" + automation-events: "npm:^7.0.9" + tslib: "npm:^2.7.0" + checksum: 10c0/41d5e3a64b881691fecd709313045ab9bddb864ed79c6eb51490056cec080e808e9f5b3ef94d734567b9da88f9c95e68cc63a3a0343374b2f865b1a961fb46ef + languageName: node + linkType: hard + "statuses@npm:2.0.1": version: 2.0.1 resolution: "statuses@npm:2.0.1" @@ -35819,6 +36397,17 @@ __metadata: languageName: node linkType: hard +"subscribable-things@npm:^2.1.22, subscribable-things@npm:^2.1.45": + version: 2.1.45 + resolution: "subscribable-things@npm:2.1.45" + dependencies: + "@babel/runtime": "npm:^7.26.0" + rxjs-interop: "npm:^2.0.0" + tslib: "npm:^2.8.1" + checksum: 10c0/6e2151b5ce0fdd1db671a139c4b878656ed4615525942f69501b9c0c37b955c13bdb566be3430cc29d89aedbdefae81bf61b473d54e68ab4b4185220096c5200 + languageName: node + linkType: hard + "sucrase@npm:3.34.0": version: 3.34.0 resolution: "sucrase@npm:3.34.0" @@ -36806,6 +37395,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.7.0, tslib@npm:^2.8.1": + version: 2.8.1 + resolution: "tslib@npm:2.8.1" + checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 + languageName: node + linkType: hard + "tsscmp@npm:1.0.6": version: 1.0.6 resolution: "tsscmp@npm:1.0.6" @@ -37276,6 +37872,15 @@ __metadata: languageName: node linkType: hard +"undici@npm:^5.8.1": + version: 5.28.4 + resolution: "undici@npm:5.28.4" + dependencies: + "@fastify/busboy": "npm:^2.0.0" + checksum: 10c0/08d0f2596553aa0a54ca6e8e9c7f45aef7d042c60918564e3a142d449eda165a80196f6ef19ea2ef2e6446959e293095d8e40af1236f0d67223b06afac5ecad7 + languageName: node + linkType: hard + "unenv@npm:^1.10.0": version: 1.10.0 resolution: "unenv@npm:1.10.0" @@ -37805,6 +38410,15 @@ __metadata: languageName: node linkType: hard +"uuid@npm:^10.0.0": + version: 10.0.0 + resolution: "uuid@npm:10.0.0" + bin: + uuid: dist/bin/uuid + checksum: 10c0/eab18c27fe4ab9fb9709a5d5f40119b45f2ec8314f8d4cf12ce27e4c6f4ffa4a6321dc7db6c515068fa373c075b49691ba969f0010bf37f44c37ca40cd6bf7fe + languageName: node + linkType: hard + "uuid@npm:^7.0.3": version: 7.0.3 resolution: "uuid@npm:7.0.3" @@ -38048,6 +38662,27 @@ __metadata: languageName: node linkType: hard +"viem@npm:2.7.15": + version: 2.7.15 + resolution: "viem@npm:2.7.15" + dependencies: + "@adraffy/ens-normalize": "npm:1.10.0" + "@noble/curves": "npm:1.2.0" + "@noble/hashes": "npm:1.3.2" + "@scure/bip32": "npm:1.3.2" + "@scure/bip39": "npm:1.2.1" + abitype: "npm:1.0.0" + isows: "npm:1.0.3" + ws: "npm:8.13.0" + peerDependencies: + typescript: ">=5.0.4" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/c9e987d959e5b91578fc0082a4142a83832d27575ec23fdafd7569d46acaa6f65ccd4c8a5a0b3ebfac8bfe0b2d74cd48d7e51357701806d9bebb9607077b242a + languageName: node + linkType: hard + "viem@npm:2.x, viem@npm:^2.1.1, viem@npm:^2.21.9": version: 2.21.37 resolution: "viem@npm:2.21.37" @@ -39005,6 +39640,17 @@ __metadata: languageName: node linkType: hard +"worker-factory@npm:^7.0.24, worker-factory@npm:^7.0.34": + version: 7.0.34 + resolution: "worker-factory@npm:7.0.34" + dependencies: + "@babel/runtime": "npm:^7.26.0" + fast-unique-numbers: "npm:^9.0.14" + tslib: "npm:^2.8.1" + checksum: 10c0/699b1141ca6262f315f2e54dc018da8b44ff3a4851c88f068cf524ae5988ebffb5a121bd48588dee58160ea6b84fbad28c6aded68e56d01a27141b2b4a0951f4 + languageName: node + linkType: hard + "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0": version: 7.0.0 resolution: "wrap-ansi@npm:7.0.0" @@ -39103,6 +39749,21 @@ __metadata: languageName: node linkType: hard +"ws@npm:8.13.0": + version: 8.13.0 + resolution: "ws@npm:8.13.0" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ">=5.0.2" + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 10c0/579817dbbab3ee46669129c220cfd81ba6cdb9ab5c3e9a105702dd045743c4ab72e33bb384573827c0c481213417cc880e41bc097e0fc541a0b79fa3eb38207d + languageName: node + linkType: hard + "ws@npm:8.17.1, ws@npm:~8.17.1": version: 8.17.1 resolution: "ws@npm:8.17.1" @@ -39440,7 +40101,7 @@ __metadata: languageName: node linkType: hard -"zod@npm:^3.21.4, zod@npm:^3.22.4": +"zod@npm:^3.21.4, zod@npm:^3.22.4, zod@npm:^3.23.8": version: 3.23.8 resolution: "zod@npm:3.23.8" checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69