@multiplatform.one/web3 7.34.3 → 7.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/web3",
-  "version": "7.34.3",
+  "version": "7.35.0",
   "description": "Web3 wallet integration for multiplatform.one ecosystem with ConnectKit and wagmi",
   "keywords": [
     "connectkit",
@@ -120,10 +120,10 @@
     "@aave/account": "^0.2.1",
     "@coinbase/wallet-sdk": "^4.4.0",
     "@metamask/connect-evm": "^2.1.1",
-    "@multiplatform.one/connectkit": "^7.34.3",
-    "@multiplatform.one/gpg": "^7.34.3",
-    "@multiplatform.one/platform": "^7.34.3",
-    "@multiplatform.one/theme": "^7.34.3",
+    "@multiplatform.one/connectkit": "^7.35.0",
+    "@multiplatform.one/gpg": "^7.35.0",
+    "@multiplatform.one/platform": "^7.35.0",
+    "@multiplatform.one/theme": "^7.35.0",
     "@noble/ciphers": "^1.3.0",
     "@noble/curves": "^1.9.7",
     "@solana/kit": "^8.5.0",
@@ -146,7 +146,7 @@
     "wagmi": "^3.7.1"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.34.3",
+    "@multiplatform.one/config": "7.35.0",
     "@tamagui/build": "2.7.6",
     "@tanstack/react-query": "^5.104.3",
     "@testing-library/jest-dom": "^7.0.1",

package/src/bundler/metaMaskConnectTimeouts.spec.ts

@@ -49,6 +49,9 @@ const multichainFiles = exportedFiles(multichainDir);
 const dappClientFiles = exportedFiles(dappClientDir);
 const read = (file: string) => readFileSync(file, "utf8");
 
+const iPadCheck =
+  /if \(window\.navigator\.maxTouchPoints > 1 && \/Macintosh\/\.test\(window\.navigator\.userAgent\)\) return true;/g;
+
 const pageLoadResume =
   /resumeSession_fn = function\(session, options\)[\s\S]*?isContinuingPriorAttempt \? this\.options\.resumeTimeout : options \? this\.options\.connectionTimeout : 120 \* 1e3/;
 const stockConnectionTimer =
@@ -96,6 +99,18 @@ describe("the timer patches on the installed MetaMask Connect", () => {
     }
   });
 
+  it("adds the iPad touch check to the platform check once", () => {
+    for (const file of multichainFiles) {
+      const code = read(file);
+      expect(code).not.toContain("maxTouchPoints");
+      const patched = patchMetaMaskConnectTimeouts(file, code)!.code;
+      expect(patched.match(iPadCheck)).toHaveLength(1);
+      expect(patched).toMatch(
+        /function isMobile\d*\(\) \{\n {2}if \(window\.navigator\.maxTouchPoints > 1/,
+      );
+    }
+  });
+
   it("fails the build when a package renames the marker it looks for", () => {
     const [multichain] = multichainFiles;
     const [dappClient] = dappClientFiles;
@@ -109,9 +124,7 @@ describe("the timer patches on the installed MetaMask Connect", () => {
       ),
     ).toBeUndefined();
     renamedGrace.patch(dappClient!, read(dappClient!));
-    expect(renamedGrace.problem()).toMatch(
-      /left the timers in @metamask\/connect-multichain unpatched/,
-    );
+    expect(renamedGrace.problem()).toMatch(/left @metamask\/connect-multichain unpatched/);
 
     const renamedHandshake = createMetaMaskConnectTimeoutTracker();
     renamedHandshake.see(connectEvmEntry);
@@ -121,7 +134,7 @@ describe("the timer patches on the installed MetaMask Connect", () => {
       read(dappClient!).replaceAll("HANDSHAKE_TIMEOUT", "HANDSHAKE_GRACE"),
     );
     expect(renamedHandshake.problem()).toMatch(
-      /left the timers in @metamask\/mobile-wallet-protocol-dapp-client unpatched/,
+      /left @metamask\/mobile-wallet-protocol-dapp-client unpatched/,
     );
   });
 
@@ -142,6 +155,12 @@ describe("the timer patches on the installed MetaMask Connect", () => {
         read(dappClient!).replace("HANDSHAKE_TIMEOUT = 60 * 1e3;", "HANDSHAKE_TIMEOUT = 45 * 1e3;"),
       ),
     ).toThrow(/timer HANDSHAKE_TIMEOUT not found/);
+    expect(() =>
+      patchMetaMaskConnectTimeouts(
+        multichain!,
+        code.replace(/function isMobile(\d*)\(\)/, "function isPhone$1()"),
+      ),
+    ).toThrow(/platform check isMobile not found .* would lose the MetaMask app on an iPad/);
     // A resume that no longer reads the connection timer must not send the
     // rewrite on to startSession's copy of the expression.
     expect(() =>
@@ -259,6 +278,61 @@ describe("the patched MetaMask Connect transport", () => {
   });
 });
 
+const userAgents = {
+  iPadSafari:
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15",
+  iPhone:
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1",
+  windows:
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36",
+};
+
+/** connect-multichain's getPlatformType from its node build, with the patch applied or not. */
+function loadGetPlatformType(patched: boolean): () => string {
+  const file = requireHere.resolve(multichainPkg);
+  const code = patched ? patchMetaMaskConnectTimeouts(file, read(file))!.code : read(file);
+  const wrapper = runInThisContext(
+    `(function (module, exports, require, __filename, __dirname) {${code}\nreturn (init_platform(), getPlatformType);\n})`,
+    { filename: file },
+  );
+  const module = { exports: {} };
+  return wrapper(module, module.exports, createRequire(file), file, dirname(file));
+}
+
+describe("the patched MetaMask Connect platform check", () => {
+  const stock = loadGetPlatformType(false);
+  const patched = loadGetPlatformType(true);
+
+  function on(userAgent: string, maxTouchPoints: number) {
+    const navigator = { userAgent, maxTouchPoints, product: "Gecko" };
+    vi.stubGlobal("navigator", navigator);
+    vi.stubGlobal("window", { navigator });
+  }
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("takes an iPad on Safari's desktop site for mobile web, which stock MetaMask Connect does not", () => {
+    on(userAgents.iPadSafari, 5);
+    expect(stock()).toBe("web-desktop");
+    expect(patched()).toBe("web-mobile");
+  });
+
+  it("keeps a Mac, which reports no touch points, on desktop web", () => {
+    on(userAgents.iPadSafari, 0);
+    expect(patched()).toBe("web-desktop");
+  });
+
+  it("keeps a touch-screen Windows laptop on desktop web", () => {
+    on(userAgents.windows, 10);
+    expect(patched()).toBe("web-desktop");
+  });
+
+  it("still takes an iPhone for mobile web", () => {
+    on(userAgents.iPhone, 5);
+    expect(patched()).toBe("web-mobile");
+  });
+});
+
 const entryId = "mpo-web3-timer-entry";
 const entrySource = 'export { createEVMClient } from "@metamask/connect-evm";';
 
@@ -285,6 +359,7 @@ function expectLongTimers(code: string) {
   expect(code).toMatch(/resumeTimeout : [\w$]+ \? this\.options\.connectionTimeout : 120 \* 1e3/);
   expect(code).not.toMatch(/DEFAULT_REQUEST_TIMEOUT[\w$]* = 60 \* 1e3;\s+CONNECTION_GRACE_PERIOD/);
   expect(code).not.toMatch(/HANDSHAKE_TIMEOUT[\w$]* = 60 \* 1e3;/);
+  expect(code.match(iPadCheck)).toHaveLength(1);
 }
 
 function viteBuild(plugins: Plugin[]) {
@@ -315,7 +390,7 @@ describe("the bundler plugins", () => {
 
   it("fails a vite build that bundles MetaMask Connect with a marker gone", async () => {
     await expect(viteBuild([entry, renameGracePeriod, metaMaskConnectTimeouts()])).rejects.toThrow(
-      /left the timers in @metamask\/connect-multichain unpatched/,
+      /left @metamask\/connect-multichain unpatched/,
     );
   }, 120_000);
 
@@ -351,7 +426,7 @@ describe("the bundler plugins", () => {
 
   it("fails the dev server's pre-bundle when a marker is gone", async () => {
     await expect(preBundle([renameGracePeriod])).rejects.toThrow(
-      /left the timers in @metamask\/connect-multichain unpatched/,
+      /left @metamask\/connect-multichain unpatched/,
     );
   }, 120_000);
 
@@ -387,7 +462,7 @@ describe("the bundler plugins", () => {
       },
     };
     await expect(esbuildBundle([renamed])).rejects.toThrow(
-      /left the timers in @metamask\/connect-multichain unpatched/,
+      /left @metamask\/connect-multichain unpatched/,
     );
   }, 120_000);
 });

package/src/bundler/metaMaskConnectTimeouts.ts

@@ -13,16 +13,25 @@
 // MetaMask and connector calls wait on the resume. The resume made without
 // connect options (the page-load one) keeps the stock 120 s.
 //
+// The same patch makes MetaMask Connect's platform check count an iPad. iPadOS
+// Safari sends a Mac user agent by default, so MetaMask Connect took it for a
+// desktop and showed its install/QR modal instead of opening the MetaMask app.
+// A Mac reports no touch points, so it keeps the extension and QR path.
+//
 // A pattern that stops matching fails the build instead of quietly shipping the
-// short timers again.
+// short timers, or the desktop iPad, again.
 
 export type MetaMaskConnectTimerRewrite = {
-  /** The timer, as a build error names it. */
-  timer: string;
+  /** What the rewrite changes, as a build error names it. */
+  target: string;
+  /** What a build without the rewrite would lose, as a build error names it. */
+  lost: string;
   pattern: RegExp;
   replacement: string;
 };
 
+const longTimers = "the long Android timers";
+
 export type MetaMaskConnectTimeoutPatch = {
   pkg: string;
   marker: string;
@@ -35,16 +44,25 @@ export const metaMaskConnectTimeoutPatches: readonly MetaMaskConnectTimeoutPatch
     marker: "CONNECTION_GRACE_PERIOD",
     rewrites: [
       {
-        timer: "DEFAULT_REQUEST_TIMEOUT",
+        target: "timer DEFAULT_REQUEST_TIMEOUT",
+        lost: longTimers,
         pattern: /(DEFAULT_REQUEST_TIMEOUT\d*) = 60 \* 1e3;(\s+CONNECTION_GRACE_PERIOD =)/,
         replacement: "$1 = 600 * 1e3;$2",
       },
       {
-        timer: "the page-load session resume",
+        target: "timer the page-load session resume",
+        lost: longTimers,
         pattern:
           /(resumeSession_fn = function\((\w+), (\w+)\)(?:(?!startSession_fn)[\s\S])*?isContinuingPriorAttempt \? this\.options\.resumeTimeout : )this\.options\.connectionTimeout/,
         replacement: "$1$3 ? this.options.connectionTimeout : 120 * 1e3",
       },
+      {
+        target: "platform check isMobile",
+        lost: "the MetaMask app on an iPad",
+        pattern: /(function isMobile\d*\(\) \{)(?=[^}]*?\.parse\(window\.navigator\.userAgent\))/,
+        replacement:
+          "$1\n  if (window.navigator.maxTouchPoints > 1 && /Macintosh/.test(window.navigator.userAgent)) return true;",
+      },
     ],
   },
   {
@@ -52,7 +70,8 @@ export const metaMaskConnectTimeoutPatches: readonly MetaMaskConnectTimeoutPatch
     marker: "HANDSHAKE_TIMEOUT",
     rewrites: [
       {
-        timer: "HANDSHAKE_TIMEOUT",
+        target: "timer HANDSHAKE_TIMEOUT",
+        lost: longTimers,
         pattern: /(HANDSHAKE_TIMEOUT) = 60 \* 1e3;/,
         replacement: "$1 = 540 * 1e3;",
       },
@@ -89,7 +108,7 @@ export function patchMetaMaskConnectTimeouts(
   for (const rewrite of patch.rewrites) {
     if (!rewrite.pattern.test(patched))
       throw new Error(
-        `MetaMask Connect timer ${rewrite.timer} not found in ${id}: ${patch.pkg} changed its source, so the long Android timers cannot be applied`,
+        `MetaMask Connect ${rewrite.target} not found in ${id}: ${patch.pkg} changed its source, and a build without this rewrite would lose ${rewrite.lost}`,
       );
     patched = patched.replace(rewrite.pattern, rewrite.replacement);
   }
@@ -98,7 +117,7 @@ export function patchMetaMaskConnectTimeouts(
 
 /**
  * Counts what one build patched, so the build can refuse to ship MetaMask Connect
- * with a timer left short (a package renamed the marker the patch looks for).
+ * with a patch left out (a package renamed the marker the patch looks for).
  */
 export function createMetaMaskConnectTimeoutTracker() {
   const patched = new Map<string, number>();
@@ -113,14 +132,14 @@ export function createMetaMaskConnectTimeoutTracker() {
       if (result) patched.set(result.pkg, (patched.get(result.pkg) ?? 0) + 1);
       return result;
     },
-    /** Error text when the build bundles MetaMask Connect with a timer left unpatched. */
+    /** Error text when the build bundles MetaMask Connect with a patch left out. */
     problem(): string | undefined {
       if (!bundlesMetaMaskConnect) return undefined;
       const missing = metaMaskConnectTimeoutPatches
         .map((patch) => patch.pkg)
         .filter((pkg) => !patched.get(pkg));
       if (!missing.length) return undefined;
-      return `the build bundles ${metaMaskConnectPkg} but left the timers in ${missing.join(", ")} unpatched`;
+      return `the build bundles ${metaMaskConnectPkg} but left ${missing.join(", ")} unpatched`;
     },
   };
 }

package/src/components/NetworkSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, PopoverContent, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Button, Popover, Text, XStack, YStack, type ButtonProps } from "tamagui";
 import { useState } from "react";
 import { useAccount, useChains, useSwitchChain } from "wagmi";
@@ -31,15 +31,10 @@ export function NetworkSwitcher({ showTestnets = false, ...buttonProps }: Networ
         </Button>
       </Popover.Trigger>
 
-      <Popover.Content
-        {...knobProps.elevatedSurface}
-        // LC-24: enter/exit styles are dead code without a resolved token.
-        // web3 does not depend on @multiplatform.one/components, so the knob
-        // token is threaded here rather than adopting the PopoverContent wrapper.
-        transition={knobProps.transition}
+      <PopoverContent
+        {...transitionProps(knobProps.motion.overlay)}
         enterStyle={{ y: -10, opacity: 0 }}
         exitStyle={{ y: -10, opacity: 0 }}
-        elevation="$4"
       >
         <YStack gap="$2" padding="$2" minWidth={200}>
           <Text fontWeight="bold" fontSize="$3" paddingBottom="$2">
@@ -63,7 +58,7 @@ export function NetworkSwitcher({ showTestnets = false, ...buttonProps }: Networ
           ))}
         </YStack>
         <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-      </Popover.Content>
+      </PopoverContent>
     </Popover>
   );
 }

package/src/components/TransactionStatus.tsx

@@ -1,5 +1,5 @@
 import type { Hash, TransactionReceipt } from "viem";
-import { XStack, YStack, Text, Spinner, Button } from "tamagui";
+import { XStack, YStack, SizableText, Text, Spinner, Button } from "tamagui";
 import { openUrl } from "@multiplatform.one/platform";
 import type { TransactionStatus as TxStatusType } from "../hooks/useContractWrite";
 
@@ -69,9 +69,9 @@ export function TransactionStatus({
           </Text>
         )}
         <YStack flex={1}>
-          <Text fontWeight="600" fontSize="$4" color={statusConfig.color}>
+          <SizableText fontFamily="$heading" size="$4" color={statusConfig.color}>
             {statusConfig.title}
-          </Text>
+          </SizableText>
           <Text fontSize="$2" color="$gray10">
             {statusConfig.description}
           </Text>
@@ -140,7 +140,7 @@ export function TransactionStatus({
       {/* Error Details */}
       {error && (
         <YStack gap="$1" paddingTop="$2" borderTopWidth={1} borderTopColor="$red5">
-          <Text fontSize="$2" color="$red11" fontWeight="500">
+          <Text fontSize="$2" color="$red11">
             Error Details
           </Text>
           <Text fontSize="$2" color="$red10" numberOfLines={3}>

package/src/connectkit/components/BalanceButton/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useEffect, useState } from "react";
 import { All, styled, useIsMounted, ThemedButton, nFormatter } from "@multiplatform.one/connectkit";
 import { useQueryClient } from "@tanstack/react-query";
@@ -97,7 +98,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
             bottom: 0,
           }}
           transition={{
-            duration: 0.4,
+            duration: motionSeconds("400ms"),
             ease: [0.25, 1, 0.5, 1],
             delay: 0.4,
           }}
@@ -142,7 +143,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
           opacity: balance?.formatted !== undefined ? 1 : 0,
         }}
         transition={{
-          duration: balance && isInitial ? 0 : 0.4,
+          duration: balance && isInitial ? motionSeconds("0ms") : motionSeconds("400ms"),
           ease: [0.25, 1, 0.5, 1],
         }}
       >
@@ -163,7 +164,7 @@ const BalanceButton: React.FC<All & BalanceProps> = ({
 }) => {
   return (
     <ThemedButton
-      duration={0.4}
+      duration={motionSeconds("400ms")}
       variant={"secondary"}
       theme={theme}
       mode={mode}

package/src/connectkit/components/Common/Chain/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React from "react";
 
 import { ChainContainer, LoadingContainer, LogoContainer, Unsupported } from "./styles";
@@ -95,7 +96,7 @@ const Chain: React.FC<{
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
+            transition={{ duration: motionSeconds("300ms") }}
           >
             {chain?.logo ?? <Chains.UnknownChain />}
           </LogoContainer>
@@ -105,7 +106,7 @@ const Chain: React.FC<{
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
+            transition={{ duration: motionSeconds("300ms") }}
           >
             {Spinner}
           </LoadingContainer>

package/src/connectkit/components/Common/ChainSelectDropdown/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   useContext,
@@ -180,7 +181,7 @@ const ChainSelectDropdown: React.FC<{
                         y: -4,
                         x: 0,
                         transition: {
-                          duration: 0.1,
+                          duration: motionSeconds("100ms"),
                         },
                       },
                       open: {
@@ -193,7 +194,7 @@ const ChainSelectDropdown: React.FC<{
                         x: 0,
                         transition: {
                           ease: [0.76, 0, 0.24, 1],
-                          duration: 0.15,
+                          duration: motionSeconds("quick"),
                         },
                       },
                     }}

package/src/connectkit/components/Common/ChainSelectList/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import { useState } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
 import { chainConfigs } from "../../../constants/chainConfigs";
@@ -113,7 +114,7 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
                       }}
                       transition={{
                         ease: [0.76, 0, 0.24, 1],
-                        duration: 0.15,
+                        duration: motionSeconds("quick"),
                         delay: 0.1,
                       }}
                     >
@@ -156,11 +157,11 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
                           exit={{
                             opacity: 0,
                             x: 4,
-                            transition: { duration: 0.1, delay: 0 },
+                            transition: { duration: motionSeconds("100ms"), delay: 0 },
                           }}
                           transition={{
                             ease: [0.76, 0, 0.24, 1],
-                            duration: 0.3,
+                            duration: motionSeconds("300ms"),
                             delay: 0.2,
                           }}
                         >
@@ -183,7 +184,7 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
                           exit={{ opacity: 0, x: 4 }}
                           transition={{
                             ease: [0.76, 0, 0.24, 1],
-                            duration: 0.3,
+                            duration: motionSeconds("300ms"),
                             delay: 0.1,
                           }}
                         >
@@ -211,7 +212,7 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
                       opacity: ch.id === chain?.id ? 1 : 0,
                     }}
                     transition={{
-                      duration: 0.3,
+                      duration: motionSeconds("300ms"),
                       ease: "easeOut",
                     }}
                   />
@@ -222,7 +223,7 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
                       layoutId="activeChain"
                       layout="position"
                       transition={{
-                        duration: 0.3,
+                        duration: motionSeconds("300ms"),
                         ease: "easeOut",
                       }}
                     />
@@ -241,7 +242,7 @@ const ChainSelectList = ({ variant }: { variant?: "primary" | "secondary" }) =>
             exit={{ opacity: 0 }}
             transition={{
               ease: [0.76, 0, 0.24, 1],
-              duration: 0.3,
+              duration: motionSeconds("300ms"),
             }}
             onAnimationStart={triggerResize}
             onAnimationComplete={triggerResize}

package/src/connectkit/components/ConnectButton/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React from "react";
 import { useAccount, useEnsName } from "wagmi";
 import {
@@ -37,7 +38,7 @@ const contentVariants: Variants = {
     opacity: 1,
     x: 0.1,
     transition: {
-      duration: 0.4,
+      duration: motionSeconds("400ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -48,7 +49,7 @@ const contentVariants: Variants = {
     pointerEvents: "none",
     position: "absolute",
     transition: {
-      duration: 0.4,
+      duration: motionSeconds("400ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -64,7 +65,7 @@ const addressVariants: Variants = {
     x: 0.2,
     opacity: 1,
     transition: {
-      duration: 0.4,
+      duration: motionSeconds("400ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -75,7 +76,7 @@ const addressVariants: Variants = {
     pointerEvents: "none",
     position: "absolute",
     transition: {
-      duration: 0.4,
+      duration: motionSeconds("400ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -88,7 +89,7 @@ const textVariants: Variants = {
   animate: {
     opacity: 1,
     transition: {
-      duration: 0.3,
+      duration: motionSeconds("300ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -96,7 +97,7 @@ const textVariants: Variants = {
     position: "absolute",
     opacity: 0,
     transition: {
-      duration: 0.3,
+      duration: motionSeconds("300ms"),
       ease: [0.25, 1, 0.5, 1],
     },
   },
@@ -391,7 +392,7 @@ export function ConnectKitButton({
                   width: "auto",
                   marginRight: -24,
                   transition: {
-                    duration: 0.4,
+                    duration: motionSeconds("400ms"),
                     ease: [0.25, 1, 0.5, 1],
                   },
                 }}
@@ -401,7 +402,7 @@ export function ConnectKitButton({
                   width: 0,
                   marginRight: 0,
                   transition: {
-                    duration: 0.4,
+                    duration: motionSeconds("400ms"),
                     ease: [0.25, 1, 0.5, 1],
                   },
                 }}

package/src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import { LogoContainer, Logo, Spinner, SpinnerContainer, ExpiringSpinner } from "./styles";
 
 import { AnimatePresence } from "framer-motion";
@@ -17,7 +18,9 @@ const CircleSpinner = ({
   countdown?: boolean;
 }) => {
   return (
-    <LogoContainer transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}>
+    <LogoContainer
+      transition={{ duration: motionSeconds("500ms"), ease: [0.175, 0.885, 0.32, 0.98] }}
+    >
       <Logo
         $small={!unavailable && smallLogo}
         style={unavailable ? { borderRadius: 0 } : undefined}
@@ -34,7 +37,7 @@ const CircleSpinner = ({
               exit={{
                 opacity: 0,
                 transition: {
-                  duration: countdown ? 1 : 0,
+                  duration: countdown ? 1 : motionSeconds("0ms"),
                 },
               }}
             >
@@ -75,7 +78,7 @@ const CircleSpinner = ({
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.25 }}
+              transition={{ duration: motionSeconds("250ms") }}
             >
               <div />
               <div />

package/src/connectkit/components/ConnectModal/ConnectWithInjector/SquircleSpinner/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import { LogoContainer, Logo, Spinner, SpinnerContainer } from "./styles";
 import { AnimatePresence } from "framer-motion";
 
@@ -9,7 +10,9 @@ const SquircleSpinner = ({
   connecting?: boolean;
 }) => {
   return (
-    <LogoContainer transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}>
+    <LogoContainer
+      transition={{ duration: motionSeconds("500ms"), ease: [0.175, 0.885, 0.32, 0.98] }}
+    >
       <Logo>{logo}</Logo>
       <SpinnerContainer>
         <AnimatePresence>
@@ -21,7 +24,7 @@ const SquircleSpinner = ({
               exit={{
                 opacity: 0,
                 transition: {
-                  duration: 0,
+                  duration: motionSeconds("0ms"),
                 },
               }}
             />

package/src/connectkit/components/ConnectModal/ConnectWithInjector/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useEffect, useState } from "react";
 import { AnimatePresence, Variants } from "framer-motion";
 import {
@@ -63,7 +64,7 @@ const contentVariants: Variants = {
     scale: 1,
     transition: {
       ease: [0.16, 1, 0.3, 1],
-      duration: 0.4,
+      duration: motionSeconds("400ms"),
       delay: 0.05,
       position: { delay: 0 },
     },
@@ -74,7 +75,7 @@ const contentVariants: Variants = {
     scale: 0.95,
     transition: {
       ease: [0.16, 1, 0.3, 1],
-      duration: 0.3,
+      duration: motionSeconds("300ms"),
     },
   },
 };
@@ -287,7 +288,7 @@ const ConnectWithInjector: React.FC<{
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.8 }}
                   whileTap={{ scale: 0.9 }}
-                  transition={{ duration: 0.1 }}
+                  transition={{ duration: motionSeconds("100ms") }}
                   onClick={runConnect}
                 >
                   <RetryIconContainer>

package/src/connectkit/components/NetworkButton/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useState } from "react";
 import {
   All,
@@ -66,7 +67,7 @@ const NetworkButton: React.FC<NetworkButtonProps & All> = ({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.2, ease: "linear" }}
+            transition={{ duration: motionSeconds("200ms"), ease: "linear" }}
           >
             <ChainSelectDropdown open={open} onClose={() => setOpen(false)}>
               <ThemedButton