chore: add mobile layout for user modal

packages/connect-kit/src/components/layouts/mobile.tsx

@@ -5,7 +5,13 @@ import { TermsAndConditions } from '../terms';
 import { AnimateChangeInHeight } from '../ui/animate-height';
 import { Header } from '../header';
 
-export const MobileLayout = ({ children }: PropsWithChildren) => {
+interface MobileLayoutProps extends PropsWithChildren {
+  isUserModal?: boolean;
+}
+export const MobileLayout = ({
+  children,
+  isUserModal = false,
+}: MobileLayoutProps) => {
   return (
     <AnimateChangeInHeight>
       <div className='ck-py-2 ck-w-full'>
@@ -16,7 +22,7 @@ export const MobileLayout = ({ children }: PropsWithChildren) => {
           </div>
         </div>
         <div className='ck-px-3'>{children}</div>
-        <TermsAndConditions />
+        {!isUserModal && <TermsAndConditions />}
       </div>
     </AnimateChangeInHeight>
   );

packages/connect-kit/src/components/user-modal/mobile.tsx

@@ -2,28 +2,34 @@ import { UserButton } from '../user-button';
 
 import { Drawer, DrawerContent, DrawerTrigger } from '~/components/ui/drawer';
 import { useConnectKitStore, useConnectWallet } from '~/lib/hooks';
+import { WalletScreen } from '../screens';
+import { MobileLayout } from '../layouts';
 
 export const MobileUserModal = () => {
-  const { onUserModalOpenChange, isUserModalOpen } = useConnectKitStore();
+  const { onDialogOpenChange, isModalOpen } = useConnectKitStore();
 
   const { mode } = useConnectWallet();
 
   if (mode === 'modal') {
     return (
-      <Drawer open={isUserModalOpen} onOpenChange={onUserModalOpenChange}>
+      <Drawer open={isModalOpen} onOpenChange={onDialogOpenChange}>
         <DrawerTrigger>
           <UserButton />
         </DrawerTrigger>
         <DrawerContent className='ck-rounded-t-[2rem]'>
-          test content
+          <MobileLayout isUserModal>
+            <WalletScreen isUserModal />
+          </MobileLayout>
         </DrawerContent>
       </Drawer>
     );
   }
 
   return (
-    <div className='!ck-rounded-3xl !ck-px-0 !ck-w-full ck-gap-4 ck-border ck-bg-background ck-p-6 ck-shadow-lg ck-max-w-[22rem] ck-py-3'>
-      test content
+    <div className='!ck-rounded-3xl !ck-px-0 ck-w-full ck-gap-4 ck-border ck-bg-background ck-p-6 ck-shadow-lg ck-max-w-[22rem] ck-py-3'>
+      <MobileLayout isUserModal>
+        <WalletScreen isUserModal />
+      </MobileLayout>
     </div>
   );
 };

packages/connect-kit/src/index.tsx

@@ -1,7 +1,7 @@
 import './styles/globals.css';
 
 export { ConnectKitProvider, supportedWallets } from './providers/connectkit';
-export { useConnectWallet } from './lib/hooks';
+export { useConnectWallet, useUser } from './lib/hooks';
 export * from './components';
 export * from './lib/chain';
 export type {