Fix reflame deploys, add example visual tests

.reflame.config.jsonc

@@ -116,6 +116,7 @@
  "@wagmi/core": {
  "entryPoints": [
  "/",
+ "/chains",
  "/connectors/mock"
  ]
  },
@@ -174,6 +175,25 @@
  "/chains",
  "/"
  ]
+ },
+ "@ucanto/core": {
+ "entryPoints": [
+ "/delegation",
+ "/"
+ ]
+ },
+ "@ucanto/principal": {
+ "entryPoints": [
+ "/ed25519",
+ "/"
+ ]
  }
+ },
+ "npmPackageOverrides": {
+ // This package is specified as a git dependency: https:/web3-storage/w3up/blob/d6978d7ab299be76987c6533d18e6857f6998fe6/packages/access-client/package.json#L113
+ // which Reflame doesn't support yet
+ // Luckily looks like the only reason for doing this was to point to a fork that fixes types: https:/fission-codes/one-webcrypto/commit/5148cd14d5489a8ac4cd38223870e02db15a2382
+ // which is irrelevant to the Reflame deploy, so we can safely just point to the original package
+ "one-webcrypto": "npm:[email protected]"
  }
-}
+}

package.json

@@ -36,6 +36,8 @@
  "@ipld/car": "^5.2.5",
  "@rainbow-me/rainbowkit": "^2.0.1",
  "@tanstack/react-query": "^5.24.1",
+ "@ucanto/core": "^9.0.1",
+ "@ucanto/principal": "^9.0.0",
  "@wagmi/connectors": "^4.1.14",
  "@wagmi/core": "^2.6.5",
  "@web3-storage/w3up-client": "^12.0.0",

src/component-library/components/Avatar/Avatar.tsx

@@ -1,4 +1,5 @@
 import Blockies from "react-blockies";
+import xmtpIconUrl from "../../../images/xmtp-icon.png";
 
 interface AvatarProps {
  /**
@@ -47,3 +48,7 @@ export const Avatar = ({ url, isLoading, address }: AvatarProps) => {
  </div>
  );
 };
+
+export const Avatar_test = <Avatar url={xmtpIconUrl} />;
+export const AvatarWithAddress_test = <Avatar address="1234" />;
+export const AvatarLoading_test = <Avatar isLoading />;

src/component-library/components/Mobile/Mobile.tsx

@@ -1,3 +1,5 @@
+import xmtpIconUrl from "../../../images/xmtp-icon.png";
+
 const LinkEle = ({ url, text }: { url: string; text: string }) => (
  <a
  href={url}
@@ -11,7 +13,7 @@ const LinkEle = ({ url, text }: { url: string; text: string }) => (
 export const Mobile = () => (
  <div className="flex flex-col items-center justify-center inset-0 fixed p-8 text-center">
  <div className="flex flex-col w-full items-center">
- <img src="/xmtp-icon.png" alt="XMTP logo" className="h-24 w-24 mb-4" />
+ <img src={xmtpIconUrl} alt="XMTP logo" className="h-24 w-24 mb-4" />
  <h1 className="text-3xl font-bold">Looks like you&apos;re on mobile!</h1>
  </div>
  <p className="text-left mt-4 font-bold">For mobile-friendly chat:</p>

src/component-library/components/ScreenEffects/RainEffect.css

@@ -12,7 +12,7 @@
  width: 50px;
  height: 50px;
  transform: scale(0.1);
- background-image: url("../../../../public/xmtp-icon.png");
+ background-image: url("../../../images/xmtp-icon.png");
  background-size: 50px auto;
  border-radius: 50%;
  animation: fall linear infinite;

src/component-library/components/SideNav/SideNav.tsx

@@ -9,13 +9,16 @@ import {
 import { ClipboardCopyIcon, XIcon } from "@heroicons/react/outline";
 import { useTranslation } from "react-i18next";
 import { QRCode } from "react-qrcode-logo";
+import xmtpIconUrl from "../../../images/xmtp-icon.png";
 import type { ETHAddress } from "../../../helpers";
 import { classNames, isAppEnvDemo, shortAddress } from "../../../helpers";
 import { XmtpIcon } from "../Icons/XmtpIcon";
 import { Avatar } from "../Avatar/Avatar";
 import { GhostButton } from "../GhostButton/GhostButton";
 import { DisconnectIcon } from "../Icons/DisconnectIcon";
 import i18next, { supportedLocales } from "../../../helpers/i18n";
+import shareQrBgUrl from "../../../images/shareQrBg.png";
+import xmtpLogoUrl from "../../../images/xmtp-logo.png";
 
 interface SideNavProps {
  /**
@@ -205,7 +208,11 @@ const SideNav = ({
  <div
  data-testid="share-qr-modal"
  className="bg-[#ffffffa3] w-[100vw] h-[100vh] flex items-center justify-center absolute top-0 z-20">
- <div className="bg-[url('/shareQrBg.png')] bg-repeat-round m-4 lg:w-[35%] sm:w-[90%] md:w-[50%] h-[90vh] text-white flex flex-col items-center p-4 rounded-3xl drop-shadow-lg">
+ <div
+ className="bg-repeat-round m-4 lg:w-[35%] sm:w-[90%] md:w-[50%] h-[90vh] text-white flex flex-col items-center p-4 rounded-3xl drop-shadow-lg"
+ style={{
+ backgroundImage: `url('${shareQrBgUrl}')`,
+ }}>
  <div
  role="button"
  tabIndex={0}
@@ -219,19 +226,15 @@ const SideNav = ({
  <XIcon width={24} />
  </div>
  <div className="h-8">
- <img
- className="h-[100%]"
- alt="xmtp-logo"
- src="/xmtp-logo.png"
- />
+ <img className="h-[100%]" alt="xmtp-logo" src={xmtpLogoUrl} />
  </div>
  <div className="text-center p-4 pb-6">
  {t("common.share_code")}
  </div>
  <div className="p-4 flex items-center justify-center rounded-3xl bg-white">
  <QRCode
  size={200}
- logoImage="/xmtp-icon.png"
+ logoImage={xmtpIconUrl}
  removeQrCodeBehindLogo
  logoPadding={10}
  value={`${window.location.origin}/dm/${walletAddress ?? ""}`}

src/global.d.ts

@@ -1,15 +1,15 @@
 declare module "*.svg" {
  const content: any;
  export default content;
 }
 
 declare module "*.png" {
- const content: any;
+ const content: string;
  export default content;
 }
 
 declare module "*.jpeg" {
  const content: any;
  export default content;
 }
 

src/testConfig.tsx

@@ -0,0 +1 @@
+import "./globals.css";