Skip to content

Commit

Permalink
Merge branch 'dev' into fix-package-install-failure
Browse files Browse the repository at this point in the history
  • Loading branch information
lewisl9029 committed Apr 24, 2024
2 parents ef283e1 + 31e7106 commit 4dc0fe1
Show file tree
Hide file tree
Showing 16 changed files with 17,008 additions and 9,263 deletions.
25,821 changes: 16,751 additions & 9,070 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@
"@headlessui/react": "^1.4.3",
"@heroicons/react": "^1.0.5",
"@ipld/car": "^5.2.5",
"@rainbow-me/rainbowkit": "^1.0.11",
"@ucanto/core": "^9.0.1",
"@ucanto/principal": "^9.0.0",
"@wagmi/core": "^1.4.2",
"@rainbow-me/rainbowkit": "^2.0.1",
"@tanstack/react-query": "^5.24.1",
"@wagmi/connectors": "^4.1.14",
"@wagmi/core": "^2.6.5",
"@web3-storage/w3up-client": "^12.0.0",
"@xmtp/content-type-reaction": "^1.1.3",
"@xmtp/content-type-remote-attachment": "^1.1.4",
"@xmtp/content-type-reply": "^1.1.5",
"@xmtp/experimental-content-type-screen-effect": "^1.0.2",
"@xmtp/frames-client": "0.4.2",
"@xmtp/react-sdk": "^5.0.1",
"@xmtp/react-sdk": "^5.1.0",
"buffer": "^6.0.3",
"date-fns": "^2.29.3",
"dexie": "^3.2.4",
Expand All @@ -67,8 +67,8 @@
"react-timer-hook": "^3.0.6",
"react-tooltip": "^5.19.0",
"react-virtuoso": "^4.3.4",
"viem": "^1.13.2",
"wagmi": "^1.4.2",
"viem": "^2.7.16",
"wagmi": "^2.5.7",
"web3.storage": "^4.5.4",
"zustand": "^4.3.2"
},
Expand All @@ -90,7 +90,7 @@
"eslint-config-xmtp-web": "^1.0.0",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-prettier": "^5.1.3",
"jsdom": "^24.0.0",
"happy-dom": "^13.6.2",
"patch-package": "^8.0.0",
"postcss": "^8.4.21",
"prettier": "^3.2.5",
Expand Down
45 changes: 45 additions & 0 deletions src/component-library/components/FullConversation/AcceptOrDeny.tsx
Original file line number Diff line number Diff line change
@@ -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 ? (
<div
className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
data-testid="accept_or_deny_container">
<h3 className="font-bold">{t("consent.new_message_request")}</h3>
<p>{t("consent.new_message_request_description")}</p>
<div className="flex w-full justify-between p-3 gap-2">
<button
type="button"
className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
onClick={() => {
void allow([address]);
setModalOpen(false);
setChangedConsentCount(changedConsentCount + 1);
}}>
{t("consent.accept")}
</button>
<button
type="button"
className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
onClick={() => {
void deny([address]);
setModalOpen(false);
setChangedConsentCount(changedConsentCount + 1);
}}>
{t("consent.block")}
</button>
</div>
</div>
) : null;
};
Original file line number Diff line number Diff line change
@@ -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<JSX.Element | null>;
isLoading?: boolean;
address: string;
}

const LoadingMessage: React.FC = () => {
Expand All @@ -31,51 +28,9 @@ const BeginningMessage: React.FC = () => {
);
};

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 ? (
<div
className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
data-testid="accept_or_deny_container">
<h3 className="font-bold">{t("consent.new_message_request")}</h3>
<p>{t("consent.new_message_request_description")}</p>
<div className="flex w-full justify-between p-3 gap-2">
<button
type="button"
className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
onClick={() => {
void allow([address]);
setModalOpen(false);
setChangedConsentCount(changedConsentCount + 1);
}}>
{t("consent.accept")}
</button>
<button
type="button"
className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
onClick={() => {
void deny([address]);
setModalOpen(false);
setChangedConsentCount(changedConsentCount + 1);
}}>
{t("consent.block")}
</button>
</div>
</div>
) : null;
};

export const FullConversation = ({
messages = [],
isLoading = false,
address,
}: FullConversationProps) => {
const virtuosoRef = useRef<VirtuosoHandle>(null);
const filteredMessages = useMemo(() => {
Expand All @@ -87,9 +42,8 @@ export const FullConversation = ({
<BeginningMessage key="beginning" />
),
...filtered,
<AcceptOrDeny key={address} address={address} />,
];
}, [isLoading, messages, address]);
}, [isLoading, messages]);

return (
<Virtuoso
Expand Down
81 changes: 43 additions & 38 deletions src/controllers/ConversationListController.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import { useConsent, useDb } from "@xmtp/react-sdk";
import type { CachedConversation } from "@xmtp/react-sdk";
import type { ActiveTab } from "../store/xmtp";
import { useXmtpStore } from "../store/xmtp";
import useListConversations from "../hooks/useListConversations";
import { ConversationList } from "../component-library/components/ConversationList/ConversationList";
Expand All @@ -13,65 +12,71 @@ type ConversationListControllerProps = {
setStartedFirstMessage: (startedFirstMessage: boolean) => void;
};

type ConsentProps = {
tab: ActiveTab;
convo: CachedConversation;
};

type NodeWithConsent = React.ReactElement<ConsentProps>;

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) => (
<MessagePreviewCardController
key={conversation.topic}
convo={conversation}
/>
),
);
const sortedConvos = conversationsWithTab.filter(
(item: NodeWithConsent) => {
const isAddressBlocked = isDenied(item.props.convo.peerAddress);
const isAddressAllowed = isAllowed(item.props.convo.peerAddress);

if (activeTab === "messages") {
return isAddressAllowed;
}
if (activeTab === "blocked") {
return isAddressBlocked;
}
if (activeTab === "requests") {
return !isAddressBlocked && !isAddressAllowed;
}
return null;
},
);
return sortedConvos;
}, [activeTab, conversations, isAllowed, isDenied]);
)),
[activeConversations],
);

return (
<ConversationList
Expand Down
8 changes: 3 additions & 5 deletions src/controllers/FullConversationController.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { updateConversationIdentity } from "../helpers/conversation";
import SnowEffect from "../component-library/components/ScreenEffects/SnowEffect";
import RainEffect from "../component-library/components/ScreenEffects/RainEffect";
import { useXmtpStore } from "../store/xmtp";
import { AcceptOrDeny } from "../component-library/components/FullConversation/AcceptOrDeny";

type FullConversationControllerProps = {
conversation: CachedConversation;
Expand Down Expand Up @@ -112,11 +113,8 @@ export const FullConversationController: React.FC<
) : effect === "RAIN" ? (
<RainEffect messageId={messageId} key={messageId} />
) : null}
<FullConversation
isLoading={isLoading}
messages={messagesWithDates}
address={conversation.peerAddress}
/>
<FullConversation isLoading={isLoading} messages={messagesWithDates} />
<AcceptOrDeny address={conversation.peerAddress} />
</div>
);
};
65 changes: 65 additions & 0 deletions src/helpers/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import {
connectorsForWallets,
getDefaultWallets,
} from "@rainbow-me/rainbowkit";
import { trustWallet } from "@rainbow-me/rainbowkit/wallets";
import { mainnet } from "@wagmi/core/chains";

Check failure on line 6 in src/helpers/config.ts

View check run for this annotation

Reflame / Preview deploy

Missing import

Import `@wagmi/core/chains` could not be resolved from src/helpers/config.ts. Looks like you're probably missing an entry point of `/chains` in the package `@wagmi/core`. We can fix this for you automatically on the check run page here: https://github.com/xmtp-labs/xmtp-inbox-web/runs/24221163070 You can also get there by clicking the icon at the top right of this card. ↗
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;
};
Loading

0 comments on commit 4dc0fe1

Please sign in to comment.