diff --git a/.reflame.config.jsonc b/.reflame.config.jsonc
index f73b39f3..5716da16 100644
--- a/.reflame.config.jsonc
+++ b/.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:one-webcrypto@1.0.3"
   }
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2f257482..5b7d7cb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,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",
diff --git a/package.json b/package.json
index c10fbf70..2a21d587 100644
--- a/package.json
+++ b/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",
diff --git a/src/component-library/components/Avatar/Avatar.tsx b/src/component-library/components/Avatar/Avatar.tsx
index 85649705..2e2820fc 100644
--- a/src/component-library/components/Avatar/Avatar.tsx
+++ b/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 />;
diff --git a/src/component-library/components/Mobile/Mobile.tsx b/src/component-library/components/Mobile/Mobile.tsx
index 1e830a08..4ce9876d 100644
--- a/src/component-library/components/Mobile/Mobile.tsx
+++ b/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>
diff --git a/src/component-library/components/ScreenEffects/RainEffect.css b/src/component-library/components/ScreenEffects/RainEffect.css
index 4e2a76ab..f6078a61 100644
--- a/src/component-library/components/ScreenEffects/RainEffect.css
+++ b/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;
diff --git a/src/component-library/components/SideNav/SideNav.tsx b/src/component-library/components/SideNav/SideNav.tsx
index 9c35f36d..0bca6d51 100644
--- a/src/component-library/components/SideNav/SideNav.tsx
+++ b/src/component-library/components/SideNav/SideNav.tsx
@@ -9,6 +9,7 @@ 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";
@@ -16,6 +17,8 @@ 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,11 +226,7 @@ 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")}
@@ -231,7 +234,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 ?? ""}`}
diff --git a/src/global.d.ts b/src/global.d.ts
index e141921f..e0f2fc1d 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -4,7 +4,7 @@ declare module "*.svg" {
 }
 
 declare module "*.png" {
-  const content: any;
+  const content: string;
   export default content;
 }
 
diff --git a/public/shareQrBg.png b/src/images/shareQrBg.png
similarity index 100%
rename from public/shareQrBg.png
rename to src/images/shareQrBg.png
diff --git a/public/xmtp-icon.png b/src/images/xmtp-icon.png
similarity index 100%
rename from public/xmtp-icon.png
rename to src/images/xmtp-icon.png
diff --git a/public/xmtp-logo.png b/src/images/xmtp-logo.png
similarity index 100%
rename from public/xmtp-logo.png
rename to src/images/xmtp-logo.png
diff --git a/src/testConfig.tsx b/src/testConfig.tsx
new file mode 100644
index 00000000..77f6fcb0
--- /dev/null
+++ b/src/testConfig.tsx
@@ -0,0 +1 @@
+import "./globals.css";