{Array.from({ length: 12 }).map((_, idx) => (
- {}}
+ allow={() => Promise.resolve()}
+ />
))}
) : !messages.length && !isLoading && !hasRecipientEnteredValue ? (
diff --git a/src/component-library/components/DateDivider/DateDivider.stories.tsx b/src/component-library/components/DateDivider/DateDivider.stories.tsx
deleted file mode 100644
index 045a2750..00000000
--- a/src/component-library/components/DateDivider/DateDivider.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { DateDivider } from "./DateDivider";
-
-export default {
- title: "DateDivider",
- component: DateDivider,
-} as ComponentMeta
- {addresses?.map((address) => (
-
diff --git a/src/component-library/components/FullConversation/AcceptOrDeny.tsx b/src/component-library/components/FullConversation/AcceptOrDeny.tsx new file mode 100644 index 00000000..9aa3acc7 --- /dev/null +++ b/src/component-library/components/FullConversation/AcceptOrDeny.tsx @@ -0,0 +1,45 @@ +import { useTranslation } from "react-i18next"; +import { useState } from "react"; +import { useConsent } from "@xmtp/react-sdk"; +import { useXmtpStore } from "../../../store/xmtp"; + +export const AcceptOrDeny = ({ address }: { address: string }) => { + const { t } = useTranslation(); + const { allow, deny } = useConsent(); + const activeTab = useXmtpStore((s) => s.activeTab); + const changedConsentCount = useXmtpStore((s) => s.changedConsentCount); + const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount); + + const [modalOpen, setModalOpen] = useState(true); + + return activeTab === "requests" && modalOpen ? ( +
+
+ ) : null;
+};
diff --git a/src/component-library/components/FullConversation/FullConversation.stories.tsx b/src/component-library/components/FullConversation/FullConversation.stories.tsx
deleted file mode 100644
index 10b4a3f6..00000000
--- a/src/component-library/components/FullConversation/FullConversation.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { FullConversation } from "./FullConversation";
-import { FullMessage } from "../FullMessage/FullMessage";
-import { getMockMessage, getMockConversation } from "../../../helpers/mocks";
-
-export default {
- title: "FullConversation",
- component: FullConversation,
- argTypes: {
- messages: { control: false },
- },
-} as ComponentMeta{t("consent.new_message_request")}
+{t("consent.new_message_request_description")}
+
+
+
+
+
-
-);
-
-const mockConversation = getMockConversation();
-
-const mockMessageFrom = getMockMessage(1, {
- content:
- "This should be a from message. Here is my super, super, super interesting from message. What do you think?",
- senderAddress: "sender",
- walletAddress: "receiver",
-});
-
-const mockMessageTo = getMockMessage(2, {
- content:
- "This should be a to message. Here is my super, super, super interesting to message. What do you think?",
- senderAddress: "receiver",
- walletAddress: "sender",
-});
-
-export const FullConversationNoMessages = Template.bind({});
-FullConversationNoMessages.args = {
- messages: [],
-};
-
-export const FullConversationWithMessages = Template.bind({});
-FullConversationWithMessages.args = {
- messages: Array(20).fill(
-
-
,
- ),
-};
-
-export const FullConversationLoading = Template.bind({});
-FullConversationLoading.args = {
- messages: [],
- isLoading: true,
-};
diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index 3876988a..f0c9f746 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -1,14 +1,11 @@
import { useTranslation } from "react-i18next";
import type { VirtuosoHandle } from "react-virtuoso";
import { Virtuoso } from "react-virtuoso";
-import { useMemo, useRef, useState } from "react";
-import { useConsent } from "@xmtp/react-sdk";
-import { useXmtpStore } from "../../../store/xmtp";
+import { useMemo, useRef } from "react";
interface FullConversationProps {
messages?: Array
-
- ) : null;
-};
-
export const FullConversation = ({
messages = [],
isLoading = false,
- address,
}: FullConversationProps) => {
const virtuosoRef = useRef{t("consent.new_message_request")}
-{t("consent.new_message_request_description")}
-
-
-
-
-
+
;
-
-const Template: ComponentStory = (args) => (
- ;
-
-const TextTemplate: ComponentStory = (args) => (
- ;
-
-const Template: ComponentStory = (args) => (
- ;
-
-const Template: ComponentStory = (args) => (
- ;
-
-const Template: ComponentStory = (args) => (
- ;
-
-const Template: ComponentStory = (args) => ;
-
-const Template: ComponentStory = (args) => (
- ;
-
-const Template: ComponentStory = (args) => (
- ;
-
export const ConversationListController = ({
setStartedFirstMessage,
}: ConversationListControllerProps) => {
+ const [activeConversations, setActiveConversations] = useState<
+ CachedConversation[]
+ >([]);
const { isLoaded, isLoading, conversations } = useListConversations();
- const { isAllowed, isDenied } = useConsent();
+ const { isAllowed, isDenied, consentState } = useConsent();
const { db } = useDb();
useStreamAllMessages();
const recipientInput = useXmtpStore((s) => s.recipientInput);
- const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
-
const activeTab = useXmtpStore((s) => s.activeTab);
// when the conversations are loaded, update their identities
useEffect(() => {
const runUpdate = async () => {
if (isLoaded) {
- await updateConversationIdentities(conversations, db);
+ await updateConversationIdentities(activeConversations, db);
}
};
void runUpdate();
- }, [isLoaded, activeTab, changedConsentCount, conversations, db]);
+ }, [activeConversations, db, isLoaded]);
- const messagesToPass = useMemo(() => {
- const conversationsWithTab = conversations.map(
- (conversation: CachedConversation) => (
+ useEffect(() => {
+ const getActiveConversations = async () => {
+ const active = await Promise.all(
+ conversations.map(async (conversation) => {
+ if (
+ activeTab === "blocked" &&
+ (await isDenied(conversation.peerAddress))
+ ) {
+ return conversation;
+ }
+ if (
+ activeTab === "messages" &&
+ (await isAllowed(conversation.peerAddress))
+ ) {
+ return conversation;
+ }
+ if (
+ activeTab === "requests" &&
+ (await consentState(conversation.peerAddress)) === "unknown"
+ ) {
+ return conversation;
+ }
+ return null;
+ }),
+ );
+ setActiveConversations(active.filter(Boolean) as CachedConversation[]);
+ };
+ void getActiveConversations();
+ }, [activeTab, consentState, conversations, isAllowed, isDenied]);
+
+ const messagesToPass = useMemo(
+ () =>
+ activeConversations.map((conversation: CachedConversation) => (
);
};
diff --git a/src/helpers/config.ts b/src/helpers/config.ts
new file mode 100644
index 00000000..502bc0bf
--- /dev/null
+++ b/src/helpers/config.ts
@@ -0,0 +1,65 @@
+import {
+ connectorsForWallets,
+ getDefaultWallets,
+} from "@rainbow-me/rainbowkit";
+import { trustWallet } from "@rainbow-me/rainbowkit/wallets";
+import { mainnet } from "@wagmi/core/chains";
+import type { Config } from "@wagmi/core";
+import { http, fallback } from "@wagmi/core";
+import { createConfig } from "wagmi";
+import { demoConnector } from "./demoConnector";
+import { isAppEnvDemo } from "./env";
+
+// Required field as of WalletConnect v2.
+// Replace with your project id: https://www.rainbowkit.com/docs/migration-guide#2-supply-a-walletconnect-cloud-projectid
+const projectId = import.meta.env.VITE_PROJECT_ID || "ADD_PROJECT_ID_HERE";
+const appName = "XMTP Inbox Web";
+
+const { wallets } = getDefaultWallets({
+ appName,
+ projectId,
+});
+
+const connectors = connectorsForWallets(
+ [
+ ...wallets,
+ {
+ groupName: "Other",
+ wallets: [trustWallet],
+ },
+ ],
+ {
+ appName,
+ projectId,
+ },
+);
+
+const transports = {
+ [mainnet.id]: fallback([
+ http(
+ `https://mainnet.infura.io/v3/${import.meta.env.VITE_INFURA_ID ?? ""}`,
+ ),
+ http(),
+ ]),
+};
+
+let config: Config;
+
+export const getWagmiConfig = () => {
+ if (!config) {
+ if (isAppEnvDemo()) {
+ config = createConfig({
+ connectors: [demoConnector],
+ chains: [mainnet],
+ transports,
+ });
+ } else {
+ config = createConfig({
+ connectors,
+ chains: [mainnet],
+ transports,
+ });
+ }
+ }
+ return config;
+};
diff --git a/src/helpers/conversation.ts b/src/helpers/conversation.ts
index 6611e6c3..130221c7 100644
--- a/src/helpers/conversation.ts
+++ b/src/helpers/conversation.ts
@@ -11,6 +11,7 @@ import {
throttledFetchAddressName,
} from "./string";
import { chunkArray } from "./functions";
+import { getWagmiConfig } from "./config";
export type PeerAddressAvatar = string | null;
export type PeerAddressName = string | null;
@@ -92,7 +93,8 @@ export const fetchPeerAddressAvatar = async (
// check for a cached name
const name = getCachedPeerAddressName(conversation);
if (name) {
- avatar = (await throttledFetchEnsAvatar({ name })) ?? null;
+ avatar =
+ (await throttledFetchEnsAvatar(getWagmiConfig(), { name })) ?? null;
}
}
return avatar;
@@ -196,7 +198,9 @@ export const updateConversationIdentities = async (
// eslint-disable-next-line no-await-in-loop
await Promise.all(
chunk.map(async (address) => {
- const name = await throttledFetchEnsName({ address });
+ const name = await throttledFetchEnsName(getWagmiConfig(), {
+ address,
+ });
if (name) {
resolvedAddresses[address] = name;
const addressConversations = conversationsWithoutNameMap[address];
@@ -251,7 +255,9 @@ export const updateConversationIdentities = async (
// eslint-disable-next-line no-await-in-loop
await Promise.all(
chunk.map(async (name) => {
- const avatar = await throttledFetchEnsAvatar({ name });
+ const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
+ name,
+ });
const addressConversations = conversationsWithoutAvatarMap[name];
await Promise.all(
addressConversations.map((convo) =>
diff --git a/src/helpers/demoConnector.ts b/src/helpers/demoConnector.ts
new file mode 100644
index 00000000..bdad2c3e
--- /dev/null
+++ b/src/helpers/demoConnector.ts
@@ -0,0 +1,41 @@
+import { createConnector } from "wagmi";
+import { mainnet } from "viem/chains";
+import randomWalletClient from "./createRandomWallet";
+
+// wagmi connector for demos
+export const demoConnector = createConnector(() => ({
+ id: "demoConnector",
+ name: "Demo Connector",
+ type: "demo",
+ // eslint-disable-next-line @typescript-eslint/require-await
+ async connect() {
+ return {
+ accounts: [randomWalletClient.account.address],
+ chainId: mainnet.id,
+ };
+ },
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ async disconnect() {},
+ // eslint-disable-next-line @typescript-eslint/require-await
+ async getAccounts() {
+ return [randomWalletClient.account.address];
+ },
+ // eslint-disable-next-line @typescript-eslint/require-await
+ async getClient() {
+ return randomWalletClient;
+ },
+ // eslint-disable-next-line @typescript-eslint/require-await
+ async getChainId() {
+ return mainnet.id;
+ },
+ // eslint-disable-next-line @typescript-eslint/require-await
+ async isAuthorized() {
+ return true;
+ },
+ onAccountsChanged() {},
+ onChainChanged() {},
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ async onDisconnect() {},
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ async getProvider() {},
+}));
diff --git a/src/helpers/mockConnector.ts b/src/helpers/mockConnector.ts
deleted file mode 100644
index a07aa9f8..00000000
--- a/src/helpers/mockConnector.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { MockConnector } from "@wagmi/core/connectors/mock";
-import walletClient from "./createRandomWallet";
-
-// mock connector for demos
-export const mockConnector = new MockConnector({
- options: {
- walletClient,
- },
-});
diff --git a/src/helpers/string.ts b/src/helpers/string.ts
index b3bb5192..f272e8af 100644
--- a/src/helpers/string.ts
+++ b/src/helpers/string.ts
@@ -1,7 +1,8 @@
-import { fetchEnsAvatar, fetchEnsName, fetchEnsAddress } from "@wagmi/core";
+import { getEnsAvatar, getEnsName, getEnsAddress } from "@wagmi/core";
import { getAddress } from "viem";
import { ALLOWED_UNS_SUFFIXES, API_FETCH_THROTTLE } from "./constants";
import { memoizeThrottle } from "./functions";
+import { getWagmiConfig } from "./config";
export type ETHAddress = `0x${string}`;
@@ -68,24 +69,24 @@ type UnstoppableDomainsDomainResponse = {
};
export const throttledFetchEnsAddress = memoizeThrottle(
- fetchEnsAddress,
+ getEnsAddress,
API_FETCH_THROTTLE,
undefined,
- ({ name }) => name,
+ (_, { name }) => name,
);
export const throttledFetchEnsName = memoizeThrottle(
- fetchEnsName,
+ getEnsName,
API_FETCH_THROTTLE,
undefined,
- ({ address }) => address,
+ (_, { address }) => address,
);
export const throttledFetchEnsAvatar = memoizeThrottle(
- fetchEnsAvatar,
+ getEnsAvatar,
API_FETCH_THROTTLE,
undefined,
- ({ name }) => name,
+ (_, { name }) => name,
);
const fetchUnsName = async (address: ETHAddress) => {
@@ -117,7 +118,7 @@ export const throttledFetchUnsName = memoizeThrottle(
);
const fetchAddressName = async (address: ETHAddress) => {
- let name = await throttledFetchEnsName({ address });
+ let name = await throttledFetchEnsName(getWagmiConfig(), { address });
if (!name) {
name = await throttledFetchUnsName(address);
}
diff --git a/src/hooks/useAddressInput.ts b/src/hooks/useAddressInput.ts
index ca3fdf9c..ff71e0cf 100644
--- a/src/hooks/useAddressInput.ts
+++ b/src/hooks/useAddressInput.ts
@@ -12,6 +12,7 @@ import {
throttledFetchUnsName,
} from "../helpers";
import { useXmtpStore } from "../store/xmtp";
+import { getWagmiConfig } from "../helpers/config";
/**
* Hook to manage the state of the recipient address input
@@ -50,7 +51,7 @@ export const useAddressInput = () => {
setRecipientName(unsName);
} else {
// check for ENS name
- const ensName = await throttledFetchEnsName({
+ const ensName = await throttledFetchEnsName(getWagmiConfig(), {
address: recipientAddress,
});
setRecipientName(ensName);
@@ -64,7 +65,7 @@ export const useAddressInput = () => {
if (!recipientAvatar && recipientName) {
setRecipientState("loading");
// check for avatar
- const avatar = await throttledFetchEnsAvatar({
+ const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
name: recipientName,
});
setRecipientAvatar(avatar);
@@ -117,7 +118,7 @@ export const useAddressInput = () => {
} else if (isEnsName(recipientInput)) {
setRecipientState("loading");
// fetch ens address
- const address = await throttledFetchEnsAddress({
+ const address = await throttledFetchEnsAddress(getWagmiConfig(), {
name: recipientInput,
});
if (address) {
diff --git a/src/hooks/useAttachmentChange.tsx b/src/hooks/useAttachmentChange.tsx
index 085b660e..02567698 100644
--- a/src/hooks/useAttachmentChange.tsx
+++ b/src/hooks/useAttachmentChange.tsx
@@ -29,8 +29,8 @@ export const useAttachmentChange = ({
const target = (e as ChangeEvent)?.target.files
? (e as ChangeEvent)?.target
: (e as React.DragEvent)?.dataTransfer.files
- ? (e as React.DragEvent).dataTransfer
- : undefined;
+ ? (e as React.DragEvent).dataTransfer
+ : undefined;
if (target?.files?.length && setAttachment) {
const file = target.files[0];
diff --git a/src/hooks/useInitXmtpClient.ts b/src/hooks/useInitXmtpClient.ts
index b036a0cb..534a7a0c 100644
--- a/src/hooks/useInitXmtpClient.ts
+++ b/src/hooks/useInitXmtpClient.ts
@@ -13,9 +13,9 @@ import {
throttledFetchAddressName,
throttledFetchEnsAvatar,
} from "../helpers";
-import { mockConnector } from "../helpers/mockConnector";
+import { demoConnector } from "../helpers/demoConnector";
import { useXmtpStore } from "../store/xmtp";
-import "wagmi/window";
+import { getWagmiConfig } from "../helpers/config";
type ClientStatus = "new" | "created" | "enabled";
@@ -127,7 +127,7 @@ const useInitXmtpClient = () => {
// if this is an app demo, connect to the temporary wallet
useEffect(() => {
if (isAppEnvDemo()) {
- connectWallet({ connector: mockConnector });
+ connectWallet({ connector: demoConnector });
}
if (!client) {
setStatus(undefined);
@@ -182,7 +182,8 @@ const useInitXmtpClient = () => {
}
}
- if (window.ethereum?.isMetaMask) {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+ if (!isAppEnvDemo() && window.ethereum?.isMetaMask) {
// Snaps flow — TODO: move to SDK side after ironing out all edge cases.
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
const browserSupportSnaps = await Client.isSnapsReady();
@@ -248,7 +249,7 @@ const useInitXmtpClient = () => {
xmtpClient.address as ETHAddress,
);
if (name) {
- const avatar = await throttledFetchEnsAvatar({
+ const avatar = await throttledFetchEnsAvatar(getWagmiConfig(), {
name,
});
setClientAvatar(avatar);
diff --git a/src/main.tsx b/src/main.tsx
index 6a2f5e8f..660f10b9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,29 +2,21 @@ import "./polyfills";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@rainbow-me/rainbowkit/styles.css";
-import {
- connectorsForWallets,
- getDefaultWallets,
- RainbowKitProvider,
-} from "@rainbow-me/rainbowkit";
-import { configureChains, createConfig, WagmiConfig } from "wagmi";
-import { trustWallet } from "@rainbow-me/rainbowkit/wallets";
-import { publicProvider } from "wagmi/providers/public";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
attachmentContentTypeConfig,
reactionContentTypeConfig,
replyContentTypeConfig,
XMTPProvider,
} from "@xmtp/react-sdk";
-import { mainnet } from "wagmi/chains";
-import { infuraProvider } from "wagmi/providers/infura";
import {
ContentTypeScreenEffect,
ScreenEffectCodec,
} from "@xmtp/experimental-content-type-screen-effect";
import App from "./controllers/AppController";
-import { isAppEnvDemo } from "./helpers";
-import { mockConnector } from "./helpers/mockConnector";
+import { getWagmiConfig } from "./helpers/config";
// Increment with any schema change; e.g. adding support for a new content type
const DB_VERSION = 6;
@@ -44,57 +36,20 @@ const contentTypeConfigs = [
customConfig,
];
-const { chains, publicClient, webSocketPublicClient } = configureChains(
- [mainnet],
- [
- infuraProvider({ apiKey: import.meta.env.VITE_INFURA_ID ?? "" }),
- publicProvider(),
- ],
-);
-
-// Required field as of WalletConnect v2.
-// Replace with your project id: https://www.rainbowkit.com/docs/migration-guide#2-supply-a-walletconnect-cloud-projectid
-const projectId = import.meta.env.VITE_PROJECT_ID || "ADD_PROJECT_ID_HERE";
-const appName = "XMTP Inbox Web";
-
-const { wallets } = getDefaultWallets({
- appName,
- projectId,
- chains,
-});
-
-const connectors = connectorsForWallets([
- ...wallets,
- {
- groupName: "Other",
- wallets: [trustWallet({ projectId, chains })],
- },
-]);
-
-const wagmiDemoConfig = createConfig({
- autoConnect: true,
- connectors: [mockConnector],
- publicClient,
- webSocketPublicClient,
-});
-
-const wagmiConfig = createConfig({
- autoConnect: true,
- connectors,
- publicClient,
- webSocketPublicClient,
-});
+const queryClient = new QueryClient();
createRoot(document.getElementById("root") as HTMLElement).render(
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+
+ ,
);
diff --git a/src/pages/inbox.tsx b/src/pages/inbox.tsx
index 3bc8f456..86a5405c 100644
--- a/src/pages/inbox.tsx
+++ b/src/pages/inbox.tsx
@@ -42,9 +42,10 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
useEffect(() => {
if (!client) {
navigate("/");
+ } else {
+ // make sure there's a client before loading the consent list
+ void loadConsentList();
}
- void loadConsentList();
-
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [client]);
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
deleted file mode 100644
index c3a663b8..00000000
--- a/tsconfig.eslint.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "include": [".", ".storybook/*"]
-}
diff --git a/tsconfig.json b/tsconfig.json
index 7640e56d..e6ea7b09 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,6 @@
"ts-node": {
"compilerOptions": {
"lib": ["es2023"],
- "module": "Node16",
"target": "ES2015",
"moduleResolution": "node"
}
@@ -12,7 +11,6 @@
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
- "incremental": true,
"skipLibCheck": true,
"allowJs": true,
"strict": true,
@@ -28,9 +26,12 @@
"include": [
"src",
"index.html",
- "./storybook/*",
- "cypress/*",
- "cypress.config.ts"
+ "cypress",
+ "cypress.config.ts",
+ "postcss.config.cjs",
+ "tailwind.config.ts",
+ "vite.config.ts",
+ "vitest.config.ts"
],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/vitest.config.ts b/vitest.config.ts
index 8b312569..1d10f07b 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -3,6 +3,6 @@ import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
globals: true,
- environment: "jsdom",
+ environment: "happy-dom",
},
});
- 
+ 
Looks like you're on mobile!
For mobile-friendly chat:
diff --git a/src/component-library/components/OnboardingStep/OnboardingStep.stories.tsx b/src/component-library/components/OnboardingStep/OnboardingStep.stories.tsx deleted file mode 100644 index 84a1b12d..00000000 --- a/src/component-library/components/OnboardingStep/OnboardingStep.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import type { ComponentStory, ComponentMeta } from "@storybook/react"; - -import { OnboardingStep } from "./OnboardingStep"; - -export default { - title: "OnboardingStep", - component: OnboardingStep, - argTypes: {}, -} as ComponentMeta