Alpha (#142)

* feat: Support embedding modal into page.  (#135)

* docs: Change `@totejs/uikit` -> `@node-real/uikit`

* fix: Update grid layout condition

* feat: Support embedding modal into page.

* chore: update versions (alpha) (#136)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* fix: Fixed ssr issue (#137)

* docs: Change `@totejs/uikit` -> `@node-real/uikit`

* fix: Update grid layout condition

* feat: Support embedding modal into page.

* fix: Fixed ssr issue

* chore: update versions (alpha) (#138)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* docs: Update docs (#139)

* docs: Change `@totejs/uikit` -> `@node-real/uikit`

* fix: Update grid layout condition

* feat: Support embedding modal into page.

* fix: Fixed ssr issue

* docs: Update docs

* docs: Update docs (#140)

* docs: Change `@totejs/uikit` -> `@node-real/uikit`

* fix: Update grid layout condition

* feat: Support embedding modal into page.

* fix: Fixed ssr issue

* docs: Update docs

* docs: Update docs

* Update docs (#141)

* docs: Change `@totejs/uikit` -> `@node-real/uikit`

* fix: Update grid layout condition

* feat: Support embedding modal into page.

* fix: Fixed ssr issue

* docs: Update docs

* docs: Update docs

* docs: Update docs

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/eight-bulldogs-heal.md

@@ -0,0 +1,5 @@
+---
+"@node-real/walletkit": patch
+---
+
+Support embedding modal into page.

.changeset/olive-brooms-lie.md

@@ -0,0 +1,5 @@
+---
+"@node-real/walletkit": patch
+---
+
+Fixed ssr issue

.changeset/pre.json

@@ -0,0 +1,14 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "example-nextjs": "0.0.1",
+    "example-vite": "0.0.1",
+    "@node-real/walletkit": "1.0.11",
+    "website": "0.0.1"
+  },
+  "changesets": [
+    "eight-bulldogs-heal",
+    "olive-brooms-lie"
+  ]
+}

packages/walletkit/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @node-real/walletkit
 
+## 1.0.12-alpha.1
+
+### Patch Changes
+
+- 3a9e8f0: Fixed ssr issue
+
+## 1.0.12-alpha.0
+
+### Patch Changes
+
+- 2e73c6b: Support embedding modal into page.
+
 ## 1.0.11
 
 ### Patch Changes

packages/walletkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-real/walletkit",
-  "version": "1.0.11",
+  "version": "1.0.12-alpha.1",
   "author": "node-real",
   "private": false,
   "description": "WalletKit is a React component library for easily connecting a wallet to your dApp.",

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

@@ -0,0 +1,11 @@
+import { cx } from '@/base/utils/css';
+import { Box, BoxProps } from '../../Box';
+import { clsModalContent } from './style.css';
+
+export type ModalContentProps = BoxProps;
+
+export function ModalContent(props: ModalContentProps) {
+  const { className, ...restProps } = props;
+
+  return <Box className={cx('wk-modal-content', clsModalContent, className)} {...restProps} />;
+}

packages/walletkit/src/base/components/Modal/ModalContent/style.css.ts

@@ -0,0 +1,21 @@
+import { cssVar } from '@/base/utils/css';
+import { mobile } from '@/base/vanilla/index.css';
+import { style } from '@vanilla-extract/css';
+
+export const clsModalContent = style({
+  position: 'absolute',
+  background: cssVar('modalBackground'),
+  padding: '48px 24px',
+  width: 'calc(100% - 32px)',
+  maxWidth: 484,
+  borderRadius: cssVar('modal', 'radii'),
+  '@media': mobile({
+    width: '100%',
+    maxWidth: '100vw',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingBottom: 40,
+    left: 0,
+    bottom: 0,
+  }),
+});

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

@@ -3,9 +3,10 @@ import { cx } from '@/base/utils/css';
 import { BoxProps, Box } from '../Box';
 import { Portal } from '../Portal';
 import { Transition } from '../Transition';
-import { clsModal, clsModalOverlay, clsModalContent } from './styles.css';
+import { clsModal, clsModalOverlay } from './styles.css';
 import { useScrollLock } from '@/base/hooks/useScrollLock';
 import { useResponsive } from '@/base/hooks/useResponsive';
+import { ModalContent } from './ModalContent';
 
 export interface ModalProps extends BoxProps {
   isOpen: boolean;
@@ -49,9 +50,7 @@ export function Modal(props: ModalProps) {
             onClick={() => closeOnOverlayClick && onClose()}
           />
           <Transition in={isOpen} variant={isMobileLayout ? 'modal-slide' : undefined}>
-            <Box className={cx('wk-modal-content', clsModalContent, contentClassName)}>
-              {children}
-            </Box>
+            <ModalContent className={contentClassName}>{children}</ModalContent>
           </Transition>
         </Box>
       </Transition>

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

@@ -28,21 +28,3 @@ export const clsModalOverlay = style({
   height: '100%',
   backgroundColor: cssVar('modalOverlay'),
 });
-
-export const clsModalContent = style({
-  position: 'absolute',
-  background: cssVar('modalBackground'),
-  padding: '48px 24px',
-  width: 'calc(100% - 32px)',
-  maxWidth: 484,
-  borderRadius: cssVar('modal', 'radii'),
-  '@media': mobile({
-    width: '100%',
-    maxWidth: '100vw',
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    paddingBottom: 40,
-    left: 0,
-    bottom: 0,
-  }),
-});

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

@@ -1,10 +1,10 @@
 import { BoxProps, Box } from '@/base/components/Box';
 import { cx } from '@/index';
-import { useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi';
+import { Address, useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi';
 import { clsAvatar, clsAvatarImg, clsAvatarDefault } from './styles.css';
 
 export interface AvatarProps extends BoxProps {
-  address?: `0x${string}`;
+  address?: Address;
   name?: string | undefined;
 }
 

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

@@ -2,8 +2,10 @@ import { ButtonProps, Button } from '@/base/components/Button';
 import { ExitIcon } from '@/base/icons/ExitIcon';
 import { cx } from '@/index';
 import { useConnect, useDisconnect } from 'wagmi';
-import { useModal } from '../ModalProvider/context';
 import { clsContainer } from './styles.css';
+import { useProfileModal } from '@/components/ProfileModal/ProfileModalProvider/context';
+import { useSwitchNetworkModal } from '@/components/SwitchNetworkModal/SwitchNetworkProvider/context';
+import { useWalletKitModal } from '@/components/WalletKitModal/WalletKitModalProvider/context';
 
 export type DisconnectButtonProps = ButtonProps;
 
@@ -12,10 +14,10 @@ export function DisconnectButton(props: DisconnectButtonProps) {
 
   const { reset } = useConnect();
   const { disconnect } = useDisconnect();
-  const { onClose } = useModal();
+  const { onCloseAllModals } = useCloseAllModals();
 
   const onDisconnect = () => {
-    onClose();
+    onCloseAllModals();
     setTimeout(() => {
       disconnect();
       reset();
@@ -33,3 +35,17 @@ export function DisconnectButton(props: DisconnectButtonProps) {
     </Button>
   );
 }
+
+function useCloseAllModals() {
+  const walletkitModal = useWalletKitModal();
+  const switchNetworkModal = useSwitchNetworkModal();
+  const profileModal = useProfileModal();
+
+  return {
+    onCloseAllModals() {
+      walletkitModal.onClose();
+      switchNetworkModal.onClose();
+      profileModal.onClose();
+    },
+  };
+}

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

@@ -3,33 +3,27 @@ import { IconButton } from '@/base/components/IconButton';
 import { BackIcon } from '@/base/icons/BackIcon';
 import { CloseIcon } from '@/base/icons/CloseIcon';
 import { cx } from '@/index';
-import { useModal } from '../ModalProvider/context';
-import { useRouter } from '../RouteProvider/context';
 import { clsNavbar } from './styles.css';
+import { useRouter } from '../RouteProvider/context';
 
 export interface NavbarProps extends BoxProps {
-  showBack?: boolean;
-  onBack?: () => void;
+  onClose?: () => void;
 }
 
 export function Navbar(props: NavbarProps) {
-  const { className, showBack = false, onBack, ...restProps } = props;
+  const { className, onClose, ...restProps } = props;
 
-  const { onClose: onCloseModal } = useModal();
-  const router = useRouter();
+  const { history, back } = useRouter();
 
-  const onBeforeBack = () => {
-    onBack?.();
-    router.back();
-  };
+  const showBack = history.length > 1;
 
   return (
     <Box className={cx('wk-navbar', clsNavbar, className)} {...restProps}>
       {showBack && (
-        <IconButton className="wk-navbar-back-button" icon={<BackIcon />} onClick={onBeforeBack} />
+        <IconButton className="wk-navbar-back-button" icon={<BackIcon />} onClick={back} />
       )}
       <Box style={{ flex: 1 }} />
-      <IconButton className="wk-navbar-close-button" icon={<CloseIcon />} onClick={onCloseModal} />
+      <IconButton className="wk-navbar-close-button" icon={<CloseIcon />} onClick={onClose} />
     </Box>
   );
 }

packages/walletkit/src/components/ProfileModal/ProfileModalProvider/context.ts

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+
+export interface ProfileModalContextProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+}
+
+export const ProfileModalContext = React.createContext({} as ProfileModalContextProps);
+
+export function useProfileModal() {
+  return useContext(ProfileModalContext);
+}