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://github.com/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://github.com/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";