feat: Remove default initialChainId

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["example-nextjs", "example-vite", "example-test", "website"]
+  "ignore": ["example-nextjs", "example-vite", "website"]
 }

.changeset/unlucky-meals-eat.md

@@ -0,0 +1,6 @@
+---
+'@totejs/walletkit': patch
+---
+
+Remove default `initialChainId` to support the case only connecting a wallet and not switching a
+network.

packages/walletkit/dev/App.tsx

@@ -39,18 +39,14 @@ const config = createConfig(
       mathWallet(),
       binanceWeb3Wallet(),
       coinbaseWallet(),
-      walletConnect({
-        connectorOptions: {
-          showQrModal: true,
-        },
-      }),
       tokenPocket(),
+      walletConnect(),
     ],
   }),
 );
 
 const options: WalletKitOptions = {
-  initialChainId: 1,
+  // initialChainId: 204,
 };
 
 export default function App() {

packages/walletkit/src/base/components/Modal/index.tsx

@@ -5,6 +5,7 @@ import { Portal } from '../Portal';
 import { Transition } from '../Transition';
 import { clsModal, clsModalOverlay, clsModalContent } from './styles.css';
 import { useScrollLock } from '@/base/hooks/useScrollLock';
+import { useResponsive } from '@/base/hooks/useResponsive';
 
 export interface ModalProps extends BoxProps {
   isOpen: boolean;
@@ -37,6 +38,8 @@ export function Modal(props: ModalProps) {
 
   useScrollLock(isOpen);
 
+  const { isMobileLayout } = useResponsive();
+
   return (
     <Portal>
       <Transition in={isOpen} variant="fade">
@@ -45,9 +48,11 @@ export function Modal(props: ModalProps) {
             className={cx('wk-modal-overlay', clsModalOverlay)}
             onClick={() => closeOnOverlayClick && onClose()}
           />
-          <Box className={cx('wk-modal-content', clsModalContent, contentClassName)}>
-            {children}
-          </Box>
+          <Transition in={isOpen} variant={isMobileLayout ? 'modal-slide' : undefined}>
+            <Box className={cx('wk-modal-content', clsModalContent, contentClassName)}>
+              {children}
+            </Box>
+          </Transition>
         </Box>
       </Transition>
     </Portal>

packages/walletkit/src/base/components/Modal/styles.css.ts

@@ -38,9 +38,11 @@ export const clsModalContent = style({
   borderRadius: cssVar('modal', 'radii'),
   '@media': mobile({
     width: '100%',
-    maxWidth: 'unset',
+    maxWidth: '100vw',
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     paddingBottom: 40,
+    left: 0,
+    bottom: 0,
   }),
 });

packages/walletkit/src/base/components/Transition/index.tsx

@@ -2,16 +2,18 @@ import React, { useEffect, useState } from 'react';
 import { cx } from '@/base/utils/css';
 import { clsFadeIn, clsFadeOut } from './fade.css';
 import { clsToastSlideIn, clsToastSlideOut } from './toastSlide.css';
+import { clsModalSlideIn, clsModalSlideOut } from './modalSlide.css';
 
 const animationMap = {
   fade: [clsFadeOut, clsFadeIn],
   'toast-slide': [clsToastSlideOut, clsToastSlideIn],
+  'modal-slide': [clsModalSlideOut, clsModalSlideIn],
 };
 
 export interface TransitionProps {
   in: boolean;
   children: React.ReactElement;
-  variant?: 'fade' | 'toast-slide';
+  variant?: keyof typeof animationMap;
   onExit?: () => void;
 }
 

packages/walletkit/src/base/components/Transition/modalSlide.css.ts

@@ -0,0 +1,29 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const modalSlideInFrames = keyframes({
+  '0%': {
+    transform: 'translateY(40%)',
+  },
+  '100%': {
+    transform: 'translateY(0%)',
+  },
+});
+
+const modalSlideOutFrames = keyframes({
+  '0%': {
+    transform: 'translateY(0%)',
+  },
+  '100%': {
+    transform: 'translateY(40%)',
+  },
+});
+
+export const clsModalSlideIn = style({
+  animation: `${modalSlideInFrames} 0.2s forwards ease-out`,
+  transformOrigin: 'bottom center',
+});
+
+export const clsModalSlideOut = style({
+  animation: `${modalSlideOutFrames} 0.2s forwards ease-out`,
+  transformOrigin: 'bottom center',
+});

packages/walletkit/src/components/WalletKitProvider/index.tsx

@@ -36,7 +36,7 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => {
   const chains = useChains();
 
   const value = useMemo(() => {
-    const finalOptions = getDefaultProviderOptions(options, chains);
+    const finalOptions = getDefaultProviderOptions(options);
     const finalChains = getDefaultSupportedChains(options, chains);
 
     const finalValue: WalletKitContextProps = {

packages/walletkit/src/defaultConfig/getDefaultProviderOptions.ts

@@ -1,13 +1,11 @@
 import { toast } from '@/base/components/toast';
-import { Chain } from 'wagmi';
 import { WalletKitOptions } from '..';
 
-export function getDefaultProviderOptions(options: WalletKitOptions, chains: Chain[]) {
+export function getDefaultProviderOptions(options: WalletKitOptions) {
   const { ...restOptions } = options;
 
   const mergedOptions: WalletKitOptions = {
-    initialChainId: chains?.[0]?.id,
-    disclaimer: null,
+    disclaimer: undefined,
     chainsConfig: undefined,
 
     hideNoWalletCTA: false,

packages/walletkit/src/pages/SwitchNetwork/styles.css.ts

@@ -37,7 +37,7 @@ export const clsChains = style({
   gap: 16,
   lineHeight: 1.5,
   width: '100%',
-  maxHeight: 320,
+  maxHeight: 360,
 });
 
 export const clsOrSeparator = style({