feat: wallet island docs

.prettierrc

@@ -1,5 +1,6 @@
 {
   "tabWidth": 2,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "embeddedLanguageFormatting": "off"
 }

playground/nextjs-app-router/components/Demo.tsx

@@ -20,6 +20,8 @@ import TransactionDemo from './demo/Transaction';
 import TransactionDefaultDemo from './demo/TransactionDefault';
 import WalletDemo from './demo/Wallet';
 import WalletDefaultDemo from './demo/WalletDefault';
+import WalletIslandDraggableDemo from './demo/WalletIslandDraggable';
+import WalletIslandFixedDemo from './demo/WalletIslandFixed';
 
 const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
   [OnchainKitComponent.Buy]: BuyDemo,
@@ -31,6 +33,8 @@ const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
   [OnchainKitComponent.SwapDefault]: SwapDefaultDemo,
   [OnchainKitComponent.Wallet]: WalletDemo,
   [OnchainKitComponent.WalletDefault]: WalletDefaultDemo,
+  [OnchainKitComponent.WalletIslandDraggable]: WalletIslandDraggableDemo,
+  [OnchainKitComponent.WalletIslandFixed]: WalletIslandFixedDemo,
   [OnchainKitComponent.TransactionDefault]: TransactionDefaultDemo,
   [OnchainKitComponent.NFTMintCard]: NFTMintCardDemo,
   [OnchainKitComponent.NFTCard]: NFTCardDemo,
@@ -39,7 +43,7 @@ const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
   [OnchainKitComponent.IdentityCard]: IdentityCardDemo,
 };
 
-function Demo() {
+export default function Demo() {
   const { activeComponent } = useContext(AppContext);
   const [isDarkMode, setIsDarkMode] = useState(true);
   const [sideBarVisible, setSideBarVisible] = useState(true);
@@ -140,12 +144,17 @@ function Demo() {
         </div>
       </div>
       <div className="linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] flex flex-1 flex-col bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px), bg-[size:6rem_4rem]">
-        <div className="flex h-full w-full flex-col items-center justify-center">
+        <div
+          className={cn(
+            'flex h-full w-full flex-col items-center',
+            activeComponent === OnchainKitComponent.WalletIslandFixed
+              ? 'mt-12 justify-start'
+              : 'justify-center',
+          )}
+        >
           {ActiveComponent && <ActiveComponent />}
         </div>
       </div>
     </>
   );
 }
-
-export default Demo;

playground/nextjs-app-router/components/demo/WalletIslandDraggable.tsx

@@ -0,0 +1,5 @@
+import { WalletIslandDraggable } from '@coinbase/onchainkit/wallet';
+
+export default function WalletIslandDraggableDemo() {
+  return <WalletIslandDraggable />;
+}

playground/nextjs-app-router/components/demo/WalletIslandFixed.tsx

@@ -0,0 +1,11 @@
+import { WalletIslandFixed } from '@coinbase/onchainkit/wallet';
+
+export default function WalletIslandFixedDemo() {
+  return (
+    <div className="mx-auto">
+      <div className="flex justify-end">
+        <WalletIslandFixed />
+      </div>
+    </div>
+  );
+}

playground/nextjs-app-router/components/form/active-component.tsx

@@ -47,6 +47,12 @@ export function ActiveComponent() {
           <SelectItem value={OnchainKitComponent.WalletDefault}>
             WalletDefault
           </SelectItem>
+          <SelectItem value={OnchainKitComponent.WalletIslandDraggable}>
+            WalletIslandDraggable
+          </SelectItem>
+          <SelectItem value={OnchainKitComponent.WalletIslandFixed}>
+            WalletIslandFixed
+          </SelectItem>
           <SelectItem value={OnchainKitComponent.NFTCard}>NFT Card</SelectItem>
           <SelectItem value={OnchainKitComponent.NFTCardDefault}>
             NFT Card Default

playground/nextjs-app-router/onchainkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.36.0",
+  "version": "0.36.4",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -30,15 +30,16 @@
     "watch:tailwind": "tailwind -i ./src/styles/index.css -o ./src/tailwind.css --watch"
   },
   "peerDependencies": {
-    "@types/react": "^18",
-    "react": "^18",
-    "react-dom": "^18"
+    "@types/react": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "@tanstack/react-query": "^5",
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
+    "qrcode": "^1.5.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^2.21.33",
@@ -59,6 +60,7 @@
     "@storybook/test-runner": "^0.19.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.0",
+    "@types/qrcode": "^1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "^2.0.5",
@@ -119,6 +121,12 @@
       "import": "./esm/core/api/index.js",
       "default": "./esm/core/api/index.js"
     },
+    "./buy": {
+      "types": "./esm/buy/index.d.ts",
+      "module": "./esm/buy/index.js",
+      "import": "./esm/buy/index.js",
+      "default": "./esm/buy/index.js"
+    },
     "./checkout": {
       "types": "./esm/checkout/index.d.ts",
       "module": "./esm/checkout/index.js",
@@ -138,10 +146,10 @@
       "default": "./esm/fund/index.js"
     },
     "./identity": {
-      "types": "./esm/identity/index.d.ts",
-      "module": "./esm/identity/index.js",
-      "import": "./esm/identity/index.js",
-      "default": "./esm/identity/index.js"
+      "types": "./esm/ui/react/identity/index.d.ts",
+      "module": "./esm/ui/react/identity/index.js",
+      "import": "./esm/ui/react/identity/index.js",
+      "default": "./esm/ui/react/identity/index.js"
     },
     "./nft": {
       "types": "./esm/ui/react/nft/index.d.ts",

playground/nextjs-app-router/types/onchainkit.ts

@@ -10,6 +10,8 @@ export enum OnchainKitComponent {
   TransactionDefault = 'transaction-default',
   Wallet = 'wallet',
   WalletDefault = 'wallet-default',
+  WalletIslandDraggable = 'wallet-island-draggable',
+  WalletIslandFixed = 'wallet-island-fixed',
   NFTCard = 'nft-card',
   NFTCardDefault = 'nft-card-default',
   NFTMintCard = 'nft-mint-card',

site/docs/pages/wallet/types.mdx

@@ -47,6 +47,15 @@ export type IsWalletACoinbaseSmartWalletResponse =
 ```ts
 type WalletContextType = {
   address?: Address | null; // The Ethereum address to fetch the avatar and name for.
+  chain?: Chain; // Optional chain for domain resolution
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  isClosing: boolean;
+  setIsClosing: Dispatch<SetStateAction<boolean>>;
+  handleClose: () => void;
+  connectRef: React.RefObject<HTMLDivElement>;
+  showSubComponentAbove: boolean;
+  alignSubComponentRight: boolean;
 };
 ```
 
@@ -55,6 +64,9 @@ type WalletContextType = {
 ```ts
 type WalletReact = {
   children: React.ReactNode;
+  className?: string;
+  draggable?: boolean;
+  startingPosition?: { x: number; y: number };
 };
 ```
 
@@ -110,3 +122,38 @@ export type WalletDropdownLinkReact = {
   target?: string;
 };
 ```
+
+## `WalletIslandReact`
+
+```ts
+export type WalletIslandReact = {
+  children: React.ReactNode;
+  swappableTokens?: Token[]; // Optional array of tokens to specify which tokens the user can swap _to_
+};
+```
+
+## `WalletIslandContextType`
+
+```ts
+export type WalletIslandContextType = {
+  showSwap: boolean;
+  setShowSwap: Dispatch<SetStateAction<boolean>>;
+  isSwapClosing: boolean;
+  setIsSwapClosing: Dispatch<SetStateAction<boolean>>;
+  showQr: boolean;
+  setShowQr: Dispatch<SetStateAction<boolean>>;
+  isQrClosing: boolean;
+  setIsQrClosing: Dispatch<SetStateAction<boolean>>;
+  tokenBalances: PortfolioTokenWithFiatValue[] | undefined;
+  portfolioFiatValue: number | undefined;
+  isFetchingPortfolioData: boolean;
+  portfolioDataUpdatedAt: number | undefined;
+  refetchPortfolioData: () => Promise<
+    QueryObserverResult<PortfolioTokenBalances, Error>
+  >;
+  animations: {
+    container: string;
+    content: string;
+  };
+};
+```