+
diff --git a/assets/LogoWithSlogen.png b/assets/LogoWithSlogen.png
new file mode 100644
index 00000000..54568961
Binary files /dev/null and b/assets/LogoWithSlogen.png differ
diff --git a/assets/wallet-kit.png b/assets/wallet-kit.png
new file mode 100644
index 00000000..2e99c445
Binary files /dev/null and b/assets/wallet-kit.png differ
diff --git a/examples/with-next-app-router/.eslintrc.json b/examples/with-next-app-router/.eslintrc.json
new file mode 100644
index 00000000..bffb357a
--- /dev/null
+++ b/examples/with-next-app-router/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/examples/with-next-app-router/.gitignore b/examples/with-next-app-router/.gitignore
new file mode 100644
index 00000000..8f322f0d
--- /dev/null
+++ b/examples/with-next-app-router/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/with-next-app-router/README.md b/examples/with-next-app-router/README.md
new file mode 100644
index 00000000..f4da3c4c
--- /dev/null
+++ b/examples/with-next-app-router/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/with-next-app-router/app/favicon.ico b/examples/with-next-app-router/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/examples/with-next-app-router/app/favicon.ico differ
diff --git a/examples/with-next-app-router/app/globals.css b/examples/with-next-app-router/app/globals.css
new file mode 100644
index 00000000..da90d194
--- /dev/null
+++ b/examples/with-next-app-router/app/globals.css
@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+
+body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
+}
+
+button {
+ @apply px-4 py-1 text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-colors
+}
+
+.logo {
+ height: 8em;
+ padding: 1.5em;
+ will-change: filter;
+ cursor: pointer;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
diff --git a/examples/with-next-app-router/app/layout.tsx b/examples/with-next-app-router/app/layout.tsx
new file mode 100644
index 00000000..88bbaf55
--- /dev/null
+++ b/examples/with-next-app-router/app/layout.tsx
@@ -0,0 +1,27 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+import Providers from "@/app/providers";
+import "@suiet/wallet-kit/style.css";
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+
+ Get started by editing
+ app/page.tsx
+
Connect DApp with Suiet wallet from now!
+ ) : ( +current wallet: {wallet.adapter?.name}
++ wallet status:{" "} + {wallet.connecting + ? "connecting" + : wallet.connected + ? "connected" + : "disconnected"} +
++ account address: {addressEllipsis(wallet.account?.address ?? "")} +
+account label: {wallet.account?.label || "no label provided"}
+current network: {wallet.chain?.name}
++ wallet balance:{" "} + {formatSUI(balance ?? 0, { + withAbbr: false, + })}{" "} + SUI +
+
+ ![Suiet logo]({"/suiet-logo.svg"}){kind=logo}
+