Privy x Wagmi Demo

This is a demo NextJS app that uses both wagmi and Privy, connecting them with the @privy-io/wagmi package.

To try the demo, go to https://wagmi-app.vercel.app/ and login with Privy. As part of login, you'll either connect an external wallet (e.g. MetaMask) or create an embedded wallet associated with your login method. Once connected, click the buttons in the right sidebar to invoke various wagmi hooks, like useSignMessage, to interface with your connected wallet.

Check out our wagmi integration guide for more guidance!

Setup

1. Fork this repository, clone it, and open it in your terminal.

https://github.com/OwenLu0125/lootex-demo.git

2. Install the necessary dependencies with npm.

npm i

3. Initialize your environment variables by copying the .env.example file to an .env.local file. Then, in .env.local, paste your Privy App ID from the Privy console and an Alchemy API Key.

# In your terminal, create .env.local from .env.local.example
cp .env.local.example .env.local

# Add your Privy App ID to .env.local
NEXT_PUBLIC_PRIVY_APP_ID=<your-privy-app-id>
NEXT_PUBLIC_ALCHEMY_API_KEY=<your-alchemy-api-key>

Building locally

In your project directory, run npm run dev. You can now visit http://localhost:4000 to see your app and login with Privy!

Check out:

• app/page.tsx for how to connect external wallets and create embedded wallets using Privy
• components/providers.tsx for how to wrap your app with the PrivyProvider, WagmiProvider, and QueryClientProvider
• components/*.tsx for examples of calling wagmi hooks. The components are named after hook they call; for example, components/SignMessage.tsx calls the useSignMessage hook.

完成進度:

• 用戶可以透過 Social login 創建錢包帳號（Powered by Privy）

• 至少需支援 Google Login

• [x]用戶可以查看自己的錢包地址

• [x]支援一鍵複製及 QR Code

• [x]用戶可以查看自己各貨幣的餘額

• 需顯示各貨幣的等值美元與加總美元

• [x]用戶可以接收、發送加密貨幣

• 用戶可以在 ETH 和 WETH 之間進行轉換(目前僅可單向轉換)