Merge pull request #310 from aptos-labs/shadcn-example

Add headless components and shadcn example

.changeset/fluffy-yaks-brake.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-nextjs-example": major
+---
+
+Overhauled the app to use the latest version of Next.js and shadcn/ui. The app is now mobile-responsive, has a light/dark mode toggle, and includes a shadcn/ui wallet selector.

.changeset/healthy-doors-tickle.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-react": patch
+---
+
+Fixed a bug where `WalletProvider` would not automatically attempt to reconnect the wallet when the `autoConnect` is set to true after the initial render.

.changeset/lovely-impalas-joke.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-react": minor
+---
+
+Added `partitionWallets`, `isInstalledOrLoadable`, `isInstallRequired`, and `truncateAddress` utility functions to make it easier to implement custom wallet selectors.

.changeset/plenty-crews-shake.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-react": minor
+---
+
+Added `WalletItem` headless component for implementing custom wallet selectors.

.changeset/wild-candles-care.md

@@ -0,0 +1,5 @@
+---
+"@aptos-labs/wallet-adapter-core": minor
+---
+
+Added `AnyAptosWallet` union type alias.

.node-version

@@ -1 +1 @@
-v16.14.0
+v20.14.0

apps/nextjs-example/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@aptos-labs/eslint-config-adapter"]
+}

apps/nextjs-example/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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

apps/nextjs-example/README.md

@@ -1,4 +1,53 @@
-# Wallet Adapter Demo app
+# Aptos Wallet Adapter Demo App
 
-a demo nextjs app.
-[https://aptos-labs.github.io/aptos-wallet-adapter](https://aptos-labs.github.io/aptos-wallet-adapter)
+This project is a demo of the Aptos Wallet Selector using [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/).
+
+A live version is hosted at:
+https://aptos-labs.github.io/aptos-wallet-adapter
+
+## Use shadcn/ui wallet selector for your own app
+
+If you want to add the shadcn/ui Aptos wallet selector to your shadcn-based app, follow these steps:
+
+- Follow the [shadcn/ui installation instructions](https://ui.shadcn.com/docs/installation) if you haven't already configured it in your app.
+
+- Run the following command to install all of the shadcn/ui components that the wallet selector depends on:
+
+```bash
+npx shadcn-ui@latest add button collapsible dialog dropdown-menu toast
+```
+
+- Copy the [wallet-selector.tsx](./src/components/WalletSelector.tsx) file from this repo to your `src/components/` directory.
+
+- If you have not already configured `AptosWalletAdapterProvider` for your app, you can also copy the [wallet-provider.tsx](./src/components/WalletProvider.tsx) file from this repo. Be sure to install the `@aptos-labs/wallet-adapter-react` package and the wallet adapter plugins for the wallet options you plan to support.
+
+- Wrap your app with the `WalletProvider` component. See [layout.tsx](./src/app/layout.tsx) for an example.
+
+- Render `<WalletSelector />` in your app where you want to place the "Connect Wallet" button. See [page.tsx](./src/app/page.tsx) as an example.
+
+## Run demo app locally
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun 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.
+
+## 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.
+
+- [shadcn/ui Documentation](https://ui.shadcn.com/docs) - learn about shadcn/ui features and API.

apps/nextjs-example/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}