@multiplatform.one/web3 7.34.4 → 7.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/web3",
-  "version": "7.34.4",
+  "version": "7.36.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.4",
-    "@multiplatform.one/gpg": "^7.34.4",
-    "@multiplatform.one/platform": "^7.34.4",
-    "@multiplatform.one/theme": "^7.34.4",
+    "@multiplatform.one/connectkit": "^7.36.0",
+    "@multiplatform.one/gpg": "^7.36.0",
+    "@multiplatform.one/platform": "^7.36.0",
+    "@multiplatform.one/theme": "^7.36.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.4",
+    "@multiplatform.one/config": "7.36.0",
     "@tamagui/build": "2.7.6",
     "@tanstack/react-query": "^5.104.3",
     "@testing-library/jest-dom": "^7.0.1",

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

package/src/connectkit/components/Pages/About/graphics.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import { motion, EasingFunction } from "framer-motion";
 import { styled } from "@multiplatform.one/connectkit";
 import { keyframes } from "styled-components";
@@ -664,7 +665,7 @@ export const SlideThree = ({ layoutId }: Slide) => {
             animate={{ rotate: 0 }}
             exit={{
               rotate: -180,
-              transition: { duration: 0 }, // needed to avoid AnimatePresence taking too long to unmount the animation which causes issues on page close
+              transition: { duration: motionSeconds("0ms") }, // needed to avoid AnimatePresence taking too long to unmount the animation which causes issues on page close
             }}
             transition={{
               type: "spring",

package/src/connectkit/components/Pages/About/index.tsx

@@ -1,3 +1,4 @@
+import { motionDurationMs, motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useEffect, useRef, useState } from "react";
 import {
   ImageContainer,
@@ -39,7 +40,7 @@ const About: React.FC = () => {
   const scrollPos = useRef(0);
 
   const animationEase: Easing = [0.16, 1, 0.3, 1];
-  const animationDuration = 600;
+  const animationDuration = motionDurationMs("superLazy");
   const autoplayDelay = 5100;
 
   let interval: ReturnType<typeof setTimeout>;
@@ -207,7 +208,7 @@ const About: React.FC = () => {
                 <MobileImageContainer>
                   <MotionConfig
                     transition={{
-                      duration: 0,
+                      duration: motionSeconds("0ms"),
                     }}
                   >
                     <ImageContainerInner>{mobileGraphics[i]}</ImageContainerInner>

package/src/connectkit/components/Pages/Profile/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useEffect, useState } from "react";
 import {
   useContext,
@@ -122,7 +123,7 @@ const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    transition={{ duration: 0.2 }}
+                    transition={{ duration: motionSeconds("200ms") }}
                   >
                     {nFormatter(Number(balance?.formatted))}
                     {` `}
@@ -134,7 +135,7 @@ const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    transition={{ duration: 0.2 }}
+                    transition={{ duration: motionSeconds("200ms") }}
                   >
                     &nbsp;
                   </LoadingBalance>

package/src/connectkit/components/Pages/SignInWithEthereum/index.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useEffect, useState } from "react";
 
 import {
@@ -30,8 +31,8 @@ import { getAppIcon } from "../../../defaultConfig";
 
 import { AnimatePresence, motion } from "framer-motion";
 
-const transition = { duration: 0.2, ease: [0.26, 0.08, 0.25, 1] };
-const copyTransition = { duration: 0.16, ease: [0.26, 0.08, 0.25, 1] };
+const transition = { duration: motionSeconds("200ms"), ease: [0.26, 0.08, 0.25, 1] };
+const copyTransition = { duration: motionSeconds("quick"), ease: [0.26, 0.08, 0.25, 1] };
 
 const SignInWithEthereum: React.FC = () => {
   const context = useContext();
@@ -131,7 +132,7 @@ const SignInWithEthereum: React.FC = () => {
                   strokeDashoffset: [0, -6],
                 }}
                 transition={{
-                  duration: 0.4,
+                  duration: motionSeconds("400ms"),
                   ease: "linear",
                   repeat: Infinity,
                 }}

package/src/connectkit/profileHeaderAction.tsx

@@ -1,3 +1,4 @@
+import { motionSeconds } from "@multiplatform.one/theme/motion";
 import React, { useContext as useReactContext } from "react";
 import { motion } from "framer-motion";
 
@@ -74,12 +75,15 @@ export const ProfileSiweHeaderAction: React.FC<HeaderActionProps> = ({ mobile, i
           animate={{
             opacity: 1,
             scale: 1,
-            transition: { delay: 0.5, duration: 0.2 },
+            transition: { delay: 0.5, duration: motionSeconds("200ms") },
           }}
           exit={{
             opacity: 0,
             scale: 0.6,
-            transition: { delay: 0, duration: mobile ? 0 : 0.1 },
+            transition: {
+              delay: 0,
+              duration: mobile ? motionSeconds("0ms") : motionSeconds("100ms"),
+            },
           }}
         >
           <SignInTooltip>{locales.signInWithEthereumScreen_tooltip}</SignInTooltip>
@@ -96,7 +100,10 @@ export const ProfileSiweHeaderAction: React.FC<HeaderActionProps> = ({ mobile, i
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        transition={{ duration: mobile ? 0 : 0.1, delay: mobile ? 0.01 : 0 }}
+        transition={{
+          duration: mobile ? motionSeconds("0ms") : motionSeconds("100ms"),
+          delay: mobile ? 0.01 : 0,
+        }}
       >
         <ProfileIcon isSignedIn={isSignedIn} />
       </SiweButton>

package/src/examples/LockContract.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import type { Address } from "viem";
 import { formatEther } from "viem";
 import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
-import { YStack, XStack, Text, Button, Separator, Card } from "tamagui";
+import { YStack, XStack, SizableText, Text, Button, Separator, Card } from "tamagui";
 import { useContractRead } from "../hooks/useContractRead";
 import { useContractWrite } from "../hooks/useContractWrite";
 import { TransactionStatus } from "../components/TransactionStatus";
@@ -178,9 +178,9 @@ export function LockContract({ address, chainId, explorerUrl }: LockContractProp
 
         {/* Contract State */}
         <YStack gap="$3">
-          <Text fontSize="$4" fontWeight="600">
+          <SizableText fontFamily="$heading" size="$4">
             Contract State
-          </Text>
+          </SizableText>
 
           {isLoading ? (
             <Text color="$gray10">Loading contract data...</Text>
@@ -196,16 +196,16 @@ export function LockContract({ address, chainId, explorerUrl }: LockContractProp
               {/* Balance */}
               <XStack justifyContent="space-between" alignItems="center">
                 <Text color="$gray11">Locked Balance</Text>
-                <Text fontWeight="600" fontSize="$4">
+                <SizableText fontFamily="$heading" size="$4">
                   {balanceData ? formatEther(balanceData.value) : "0"} ETH
-                </Text>
+                </SizableText>
               </XStack>
 
               {/* Unlock Time */}
               <XStack justifyContent="space-between" alignItems="center">
                 <Text color="$gray11">Unlock Time</Text>
                 <YStack alignItems="flex-end">
-                  <Text fontWeight="500">{formattedUnlockTime}</Text>
+                  <Text>{formattedUnlockTime}</Text>
                   {timeRemaining && (
                     <Text fontSize="$2" color="$orange10">
                       {timeRemaining} remaining
@@ -234,9 +234,9 @@ export function LockContract({ address, chainId, explorerUrl }: LockContractProp
 
         {/* Withdraw Action */}
         <YStack gap="$3">
-          <Text fontSize="$4" fontWeight="600">
+          <SizableText fontFamily="$heading" size="$4">
             Actions
-          </Text>
+          </SizableText>
 
           <Button
             size="$4"
@@ -245,7 +245,7 @@ export function LockContract({ address, chainId, explorerUrl }: LockContractProp
             onPress={handleWithdraw}
             opacity={canWithdraw ? 1 : 0.5}
           >
-            <Text fontWeight="600">{isWithdrawing ? "Processing..." : "Withdraw Funds"}</Text>
+            <Text>{isWithdrawing ? "Processing..." : "Withdraw Funds"}</Text>
           </Button>
 
           {!canWithdraw && unlockTime && (

package/types/components/NetworkSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/NetworkSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAIlF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAAE,YAAoB,EAAE,GAAG,WAAW,EAAE,EAAE,oBAAoB,kDA2D7F"}
+{"version":3,"file":"NetworkSwitcher.d.ts","sourceRoot":"","sources":["../../src/components/NetworkSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAIlF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAAE,YAAoB,EAAE,GAAG,WAAW,EAAE,EAAE,oBAAoB,kDAsD7F"}

package/types/connectkit/components/BalanceButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/connectkit/components/BalanceButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,GAAG,EAAkD,MAAM,+BAA+B,CAAC;AAuCpG,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6G1C,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,YAAY,CAkB/C,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/connectkit/components/BalanceButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,GAAG,EAAkD,MAAM,+BAA+B,CAAC;AAuCpG,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6G1C,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,YAAY,CAkB/C,CAAC;AACF,eAAe,aAAa,CAAC"}

package/types/connectkit/components/Common/Chain/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/Chain/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAiEA,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/Chain/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAiEA,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/types/connectkit/components/Common/ChainSelectDropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/ChainSelectDropdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAmBzF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CA0LA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/ChainSelectDropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAmBzF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CA0LA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/types/connectkit/components/Common/ChainSelectList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/ChainSelectList/index.tsx"],"names":[],"mappings":"AA0DA,QAAA,MAAM,eAAe,GAAI,aAAa;IAAE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,4CAyM1E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connectkit/components/Common/ChainSelectList/index.tsx"],"names":[],"mappings":"AA2DA,QAAA,MAAM,eAAe,GAAI,aAAa;IAAE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,4CAyM1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/types/connectkit/components/ConnectButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/connectkit/components/ConnectButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAOL,WAAW,EACX,IAAI,EACJ,KAAK,EAMN,MAAM,+BAA+B,CAAC;AAOvC,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAgF7B,KAAK,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;AAE1B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE;QACvB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,KAAK,CAAC,EAAE,KAAK,GAAG;YACd,WAAW,CAAC,EAAE,OAAO,CAAC;SACvB,CAAC;QACF,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,OAAO,CAAC;QACrB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,CAAC,EAAE,IAAI,CAAC;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AA6LF,KAAK,qBAAqB,GAAG;IAE3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,WAAW,CAAC;IAG1B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAE/B,KAAK,EACL,WAAmB,EACnB,UAAiB,EAGjB,KAAK,EACL,IAAI,EACJ,WAAW,EAGX,OAAO,GACR,EAAE,qBAAqB,kDA+GvB;yBA5He,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/connectkit/components/ConnectButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAOL,WAAW,EACX,IAAI,EACJ,KAAK,EAMN,MAAM,+BAA+B,CAAC;AAOvC,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAgF7B,KAAK,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;AAE1B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE;QACvB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;QAClB,KAAK,CAAC,EAAE,KAAK,GAAG;YACd,WAAW,CAAC,EAAE,OAAO,CAAC;SACvB,CAAC;QACF,WAAW,EAAE,OAAO,CAAC;QACrB,WAAW,EAAE,OAAO,CAAC;QACrB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,CAAC,EAAE,IAAI,CAAC;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB,CAAC;AA6LF,KAAK,qBAAqB,GAAG;IAE3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,WAAW,CAAC;IAG1B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAE/B,KAAK,EACL,WAAmB,EACnB,UAAiB,EAGjB,KAAK,EACL,IAAI,EACJ,WAAW,EAGX,OAAO,GACR,EAAE,qBAAqB,kDA+GvB;yBA5He,gBAAgB"}

package/types/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,aAAa,GAAI,0DAMpB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,4CAsEA,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/connectkit/components/ConnectModal/ConnectWithInjector/CircleSpinner/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,aAAa,GAAI,0DAMpB;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,4CAwEA,CAAC;AAEF,eAAe,aAAa,CAAC"}