Fix reflame deploys, add example visual tests

.reflame.config.jsonc

@@ -174,6 +174,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

@@ -35,6 +35,8 @@
     "@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",
     "@web3-storage/w3up-client": "^12.0.0",
     "@xmtp/content-type-reaction": "^1.1.3",

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,9 @@ 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}
@@ -222,7 +227,7 @@ const SideNav = ({
                 <img
                   className="h-[100%]"
                   alt="xmtp-logo"
-                  src="/xmtp-logo.png"
+                  src={xmtpLogoUrl}
                 />
               </div>
               <div className="text-center p-4 pb-6">
@@ -231,7 +236,7 @@ const SideNav = ({
               <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'