Link feature + Wallet widget

package.json

@@ -13,35 +13,36 @@
   },
   "dependencies": {
     "0xsequence": "2.3.9",
-    "@0xsequence/connect": "^5.2.1",
-    "@0xsequence/network": "^2.3.9",
-    "@tanstack/react-query": "^5.74.7",
-    "boilerplate-design-system": "github:0xsequence-demos/boilerplate-design-system#42564000bc8653348b1fb7d25885908faa5fa355",
+    "@0xsequence-demos/boilerplate-design-system": "^0.2.1",
+    "@0xsequence/connect": "^5.2.4",
+    "@0xsequence/network": "^2.3.12",
+    "@0xsequence/wallet-widget": "^5.2.4",
+    "@tanstack/react-query": "^5.75.7",
     "ethers": "6.13.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "viem": "^2.28.0",
-    "wagmi": "^2.15.0",
-    "zod": "^3.24.3"
+    "viem": "^2.29.1",
+    "wagmi": "^2.15.2",
+    "zod": "^3.24.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.1",
-    "@tailwindcss/vite": "^4.1.4",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
+    "@eslint/js": "^9.26.0",
+    "@tailwindcss/vite": "^4.1.6",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
     "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.1",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.0.0",
+    "globals": "^16.1.0",
     "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.4",
+    "tailwindcss": "^4.1.6",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.31.1",
-    "vite": "^6.3.3"
+    "typescript-eslint": "^8.32.0",
+    "vite": "^6.3.5"
   },
   "packageManager": "[email protected]+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }

src/App.tsx

@@ -4,24 +4,33 @@ import { config } from "./config";
 import { useAccount, useDisconnect, useSwitchChain } from "wagmi";
 import { NotConnected } from "./views/NotConnected";
 import { Connected } from "./views/Connected";
-import { SequenceBoilerplate } from "boilerplate-design-system";
+import { SequenceBoilerplate } from "@0xsequence-demos/boilerplate-design-system";
+import {
+  SequenceWalletProvider,
+  useOpenWalletModal,
+} from "@0xsequence/wallet-widget";
 
 export default function Layout() {
   return (
     <SequenceConnect config={config}>
-      <App />
+      <SequenceWalletProvider>
+        <App />
+      </SequenceWalletProvider>
     </SequenceConnect>
   );
 }
 
 function App() {
   const { isConnected } = useAccount();
+  const { setOpenWalletModal } = useOpenWalletModal();
+
   return (
     <SequenceBoilerplate
       githubUrl="https://github.com/0xsequence-demos/kit-embedded-wallet-react-boilerplate"
       name="Sequence Web SDK Starter - React"
       description="Embedded Wallet"
       wagmi={{ useAccount, useDisconnect, useSwitchChain }}
+      walletCallback={() => setOpenWalletModal(true)}
     >
       {isConnected ? <Connected /> : <NotConnected />}
     </SequenceBoilerplate>

src/components/TestLinkWallet.tsx

@@ -1,5 +1,5 @@
 import { useOpenConnectModal } from "@0xsequence/connect";
-import { Button } from "boilerplate-design-system";
+import { Button } from "@0xsequence-demos/boilerplate-design-system";
 
 export function TestLinkWallet() {
   const { setOpenConnectModal } = useOpenConnectModal();

src/components/TestSendTransaction.tsx

@@ -7,7 +7,7 @@ import {
   Form,
   FormHandler,
   useStoreData,
-} from "boilerplate-design-system";
+} from "@0xsequence-demos/boilerplate-design-system";
 
 interface TxnRespose {
   hash: string;

src/components/TestSignMessage.tsx

@@ -6,10 +6,10 @@ import {
   useStoreData,
   setStoreData,
   useForm,
-} from "boilerplate-design-system";
+} from "@0xsequence-demos/boilerplate-design-system";
 import { useAccount, useSignMessage } from "wagmi";
 import { SignableMessage } from "viem";
-import type { FormHandler } from "boilerplate-design-system";
+import type { FormHandler } from "@0xsequence-demos/boilerplate-design-system";
 import { z } from "zod";
 
 const schemaSignMessage = z.object({

src/components/TestVerifyMessage.tsx

@@ -11,12 +11,12 @@ import {
   useStoreData,
   setStoreData,
   useForm,
-} from "boilerplate-design-system";
+} from "@0xsequence-demos/boilerplate-design-system";
 
 import { usePublicClient } from "wagmi";
 import { z } from "zod";
 // import { type Signature } from "viem";
-import type { FormHandler } from "boilerplate-design-system";
+import type { FormHandler } from "@0xsequence-demos/boilerplate-design-system";
 // Define Hex as a string with a hex pattern
 const Hex = z.string().regex(/^0x[0-9a-fA-F]+$/, "Invalid hex format");
 

src/index.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
-@import "boilerplate-design-system/styles/index.css";
-@source "../node_modules/boilerplate-design-system";
+@import "@0xsequence-demos/boilerplate-design-system/styles/index.css";
+@source "../node_modules/@0xsequence-demos/boilerplate-design-system";
 
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,

src/views/Connected.tsx

@@ -4,7 +4,7 @@ import TestSignMessage from "../components/TestSignMessage";
 import TestVerifyMessage from "../components/TestVerifyMessage";
 import TestSendTransaction from "../components/TestSendTransaction";
 
-import { Group, Card } from "boilerplate-design-system";
+import { Group, Card } from "@0xsequence-demos/boilerplate-design-system";
 import { TestLinkWallet } from "../components/TestLinkWallet";
 
 export function Connected() {

src/views/NotConnected.tsx

@@ -1,5 +1,5 @@
 import { useOpenConnectModal } from "@0xsequence/connect";
-import { Button } from "boilerplate-design-system";
+import { Button } from "@0xsequence-demos/boilerplate-design-system";
 
 export function NotConnected() {
   const { setOpenConnectModal } = useOpenConnectModal();

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-import boilerplateConfig from "boilerplate-design-system/tailwind-config";
+import boilerplateConfig from "@0xsequence-demos/boilerplate-design-system/tailwind-config";
 
 export default {
   content: [