diff --git a/examples/sample-remix-app/.eslintrc.cjs b/examples/sample-remix-app/.eslintrc.cjs
new file mode 100644
index 00000000..c3128a89
--- /dev/null
+++ b/examples/sample-remix-app/.eslintrc.cjs
@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+ root: true,
+ parserOptions: {
+ ecmaVersion: "latest",
+ sourceType: "module",
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ env: {
+ browser: true,
+ commonjs: true,
+ es6: true,
+ },
+
+ // Base config
+ extends: ["eslint:recommended"],
+
+ overrides: [
+ // React
+ {
+ files: ["**/*.{js,jsx,ts,tsx}"],
+ plugins: ["react", "jsx-a11y"],
+ extends: [
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
+ "plugin:jsx-a11y/recommended",
+ ],
+ settings: {
+ react: {
+ version: "detect",
+ },
+ formComponents: ["Form"],
+ linkComponents: [
+ { name: "Link", linkAttribute: "to" },
+ { name: "NavLink", linkAttribute: "to" },
+ ],
+ "import/resolver": {
+ typescript: {},
+ },
+ },
+ },
+
+ // Typescript
+ {
+ files: ["**/*.{ts,tsx}"],
+ plugins: ["@typescript-eslint", "import"],
+ parser: "@typescript-eslint/parser",
+ settings: {
+ "import/internal-regex": "^~/",
+ "import/resolver": {
+ node: {
+ extensions: [".ts", ".tsx"],
+ },
+ typescript: {
+ alwaysTryTypes: true,
+ },
+ },
+ },
+ extends: [
+ "plugin:@typescript-eslint/recommended",
+ "plugin:import/recommended",
+ "plugin:import/typescript",
+ ],
+ },
+
+ // Node
+ {
+ files: [".eslintrc.cjs"],
+ env: {
+ node: true,
+ },
+ },
+ ],
+};
diff --git a/examples/sample-remix-app/.gitignore b/examples/sample-remix-app/.gitignore
new file mode 100644
index 00000000..80ec311f
--- /dev/null
+++ b/examples/sample-remix-app/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env
diff --git a/examples/sample-remix-app/README.md b/examples/sample-remix-app/README.md
new file mode 100644
index 00000000..a67d000a
--- /dev/null
+++ b/examples/sample-remix-app/README.md
@@ -0,0 +1,36 @@
+# Welcome to Remix + Vite!
+
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+
+## Development
+
+Run the Vite dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
diff --git a/examples/sample-remix-app/app/entry.client.tsx b/examples/sample-remix-app/app/entry.client.tsx
new file mode 100644
index 00000000..4afc7412
--- /dev/null
+++ b/examples/sample-remix-app/app/entry.client.tsx
@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ ,
+ );
+});
diff --git a/examples/sample-remix-app/app/entry.server.tsx b/examples/sample-remix-app/app/entry.server.tsx
new file mode 100644
index 00000000..e5ab6707
--- /dev/null
+++ b/examples/sample-remix-app/app/entry.server.tsx
@@ -0,0 +1,140 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import { PassThrough } from 'node:stream';
+
+import type { AppLoadContext, EntryContext } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import { isbot } from 'isbot';
+import { renderToPipeableStream } from 'react-dom/server';
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ remixContext: EntryContext,
+ // This is ignored so we can keep it in the template for visibility. Feel
+ // free to delete this parameter in your app if you're not using it!
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ loadContext: AppLoadContext,
+) {
+ return isbot(request.headers.get('user-agent') || '')
+ ? handleBotRequest(
+ request,
+ responseStatusCode,
+ responseHeaders,
+ remixContext,
+ )
+ : handleBrowserRequest(
+ request,
+ responseStatusCode,
+ responseHeaders,
+ remixContext,
+ );
+}
+
+function handleBotRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ remixContext: EntryContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ const { pipe, abort } = renderToPipeableStream(
+ ,
+ {
+ onAllReady() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ },
+ );
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+function handleBrowserRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ remixContext: EntryContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ const { pipe, abort } = renderToPipeableStream(
+ ,
+ {
+ onShellReady() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ },
+ );
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
diff --git a/examples/sample-remix-app/app/root.tsx b/examples/sample-remix-app/app/root.tsx
new file mode 100644
index 00000000..549c4ad4
--- /dev/null
+++ b/examples/sample-remix-app/app/root.tsx
@@ -0,0 +1,32 @@
+import {
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from '@remix-run/react';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
+
+export default function App() {
+ return ;
+}
diff --git a/examples/sample-remix-app/app/routes/_index.tsx b/examples/sample-remix-app/app/routes/_index.tsx
new file mode 100644
index 00000000..3747184b
--- /dev/null
+++ b/examples/sample-remix-app/app/routes/_index.tsx
@@ -0,0 +1,7 @@
+import { App } from '../screens/App.client';
+
+function Index() {
+ return ;
+}
+
+export default Index;
diff --git a/examples/sample-remix-app/app/screens/App.client.tsx b/examples/sample-remix-app/app/screens/App.client.tsx
new file mode 100644
index 00000000..25aa2798
--- /dev/null
+++ b/examples/sample-remix-app/app/screens/App.client.tsx
@@ -0,0 +1,65 @@
+import {
+ DAppKitProvider,
+ WalletButton,
+ WalletConnectOptions,
+ useWallet,
+ useWalletModal,
+} from '@vechain/dapp-kit-react';
+import { useEffect, useState } from 'react';
+
+const walletConnectOptions: WalletConnectOptions = {
+ projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+ metadata: {
+ name: 'Sample VeChain dApp',
+ description: 'A sample VeChain dApp',
+ url: window.location.origin,
+ icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+ },
+};
+
+const AppContent = () => {
+ const { account } = useWallet();
+ const { open, onConnectionStatusChange } = useWalletModal();
+ const [buttonText, setButtonText] = useState('Connect Custom Button');
+
+ useEffect(() => {
+ const handleConnected = (address: string | null) => {
+ if (address) {
+ const formattedAddress = `${address.slice(
+ 0,
+ 6,
+ )}...${address.slice(-4)}`;
+ setButtonText(`Disconnect from ${formattedAddress}`);
+ } else {
+ setButtonText('Connect Custom Button');
+ }
+ };
+
+ handleConnected(account);
+
+ onConnectionStatusChange(handleConnected);
+ }, [account, onConnectionStatusChange]);
+
+ return (
+
+
React JS
+
kit button:
+
+
custom button:
+
+