From 26e157cca875dd8689e58f8f00b80a334feb499b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20S=CC=8Cenk?= Date: Thu, 14 Nov 2024 13:38:28 +0100 Subject: [PATCH 1/3] update nuxt instructions --- build/12-embedded-wallets-integration.md | 47 ++++++++++++++---------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/build/12-embedded-wallets-integration.md b/build/12-embedded-wallets-integration.md index 877ade47..053de2e6 100644 --- a/build/12-embedded-wallets-integration.md +++ b/build/12-embedded-wallets-integration.md @@ -40,16 +40,14 @@ To use the Embedded wallet UI, your Next app has to be in `app router` mode. Whe When using Vite as the build tool, a Vite plugin is required for running and building Nuxt apps with Embedded Wallet. This plugin enables Node API in the browser (eg. buffer, crypto). -::: warning -The Embedded wallet integration includes a style (CSS) file imported through JavaScript. -Nuxt fails to resolve this import by default. -To avoid errors, the Embedded wallet dependency needs to be added to the [build.transpile](https://nuxt.com/docs/api/nuxt-config#transpile) setting. -::: - ```sh npm i -D vite-plugin-node-polyfills ``` +The Embedded wallet integration includes a style (CSS) file imported through JavaScript. +Nuxt fails to resolve this import by default. +To avoid errors, the Embedded wallet dependency needs to be added to the [build.transpile](https://nuxt.com/docs/api/nuxt-config#transpile) setting. + ```ts // nuxt.config.ts import { nodePolyfills } from "vite-plugin-node-polyfills"; @@ -59,12 +57,23 @@ export default defineNuxtConfig({ plugins: [nodePolyfills() /* ... */], }, build: { - transpile: ["@apillon/wallet-vue"], + transpile: [/@apillon[\\/]wallet-vue/], }, /* ... */ }); ``` +Embedded wallet relies on browser APIs and it doesn't make sense to run it server-side. +To avoid errors, wrap the wallet with ``. + +```vue + +``` + ## Installation @@ -117,7 +126,7 @@ import { WalletWidget } from "@apillon/wallet-react"; }, /* ... */ ]} -/> +/>; ``` @@ -158,7 +167,7 @@ EmbeddedWalletUI("#wallet", { explorerUrl: "https://moonbase.moonscan.io", }, /* ... */ - ] + ], }); ``` @@ -167,14 +176,14 @@ EmbeddedWalletUI("#wallet", { ### Parameters -| Field | Type | Required | Description | -| ---------------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| clientId | `string` | Yes | UUID of the integration that you obtain when creating it on the [Apillon embedded wallet dashboard](https://app.apillon.io/dashboard/service/embedded-wallet). | -| defaultNetworkId | `number` | No | Chain ID set as default when opening wallet. | -| networks | `Network[]` | No | Array of network specifications | -| broadcastAfterSign | `boolean` | No | Automatically broadcast with SDK after confirming a transaction. | -| disableDefaultActivatorStyle | `boolean` | No | Remove styles from "open wallet" button | -| authFormPlaceholder | `string` | No | Placeholder displayed in input for username/email | +| Field | Type | Required | Description | +| ---------------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| clientId | `string` | Yes | UUID of the integration that you obtain when creating it on the [Apillon embedded wallet dashboard](https://app.apillon.io/dashboard/service/embedded-wallet). | +| defaultNetworkId | `number` | No | Chain ID set as default when opening wallet. | +| networks | `Network[]` | No | Array of network specifications | +| broadcastAfterSign | `boolean` | No | Automatically broadcast with SDK after confirming a transaction. | +| disableDefaultActivatorStyle | `boolean` | No | Remove styles from "open wallet" button | +| authFormPlaceholder | `string` | No | Placeholder displayed in input for username/email | #### Network Object @@ -185,14 +194,12 @@ To find the information for your desired network, visit [chainlist.org](https:// ::: | Field | Type | Description | -| ----------- | -------- | ----------------------------------------| +| ----------- | -------- | --------------------------------------- | | name | `string` | The name of the network | | id | `number` | The unique Chain ID of the network | | rpcUrl | `string` | The URL to the network's RPC server | | explorerUrl | `string` | The URL to the network's block explorer | - - ## Use wallet To access wallet signer and wallet information we provide core imports (hooks/composables): From 814b34b36218e4ba1202722f8c6815c966f9616e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20S=CC=8Cenk?= Date: Thu, 14 Nov 2024 16:59:57 +0100 Subject: [PATCH 2/3] activator style, unify vue/react hooks --- build/12-embedded-wallets-integration.md | 33 +++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/build/12-embedded-wallets-integration.md b/build/12-embedded-wallets-integration.md index 053de2e6..2c643bcd 100644 --- a/build/12-embedded-wallets-integration.md +++ b/build/12-embedded-wallets-integration.md @@ -34,7 +34,10 @@ export default defineConfig({ ### Next.js -To use the Embedded wallet UI, your Next app has to be in `app router` mode. When in `pages routing` mode, global CSS file imports throw an error. [Github Discussion](https://github.com/vercel/next.js/discussions/27953). +To use the Embedded wallet UI, your Next app has to be in `app router` mode. When in `pages routing` mode, global CSS file imports throw an error. [Github Discussion](https://github.com/vercel/next.js/discussions/27953) + +Embedded wallet relies on browser APIs and it doesn't make sense to run it server-side. +To avoid errors, the component including `` should be marked with `'use client';` ### Nuxt @@ -200,6 +203,18 @@ To find the information for your desired network, visit [chainlist.org](https:// | rpcUrl | `string` | The URL to the network's RPC server | | explorerUrl | `string` | The URL to the network's block explorer | +### Button style + +You can style the activator button by targeting `#oaw-wallet-widget-btn` css ID. +Use `disableDefaultActivatorStyle` option to make the button unstyled. + +You can also hide the activator button (`display: none;`) and open the wallet programmatically, eg. from a menu item or your own button. + +```ts +// const wallet = getEmbeddedWallet(); +wallet.events.emit("open", true); +``` + ## Use wallet To access wallet signer and wallet information we provide core imports (hooks/composables): @@ -211,7 +226,7 @@ To access wallet signer and wallet information we provide core imports (hooks/co import { useAccount, useContract, useWallet } from "@apillon/wallet-react"; export default function Component() { - const { username, address, getBalance } = useAccount(); + const { info, getBalance } = useAccount(); const { wallet, signMessage, sendTransaction } = useWallet(); const { read, write } = useContract({ @@ -229,8 +244,14 @@ export default function Component() { return wallet.userExists(username); }; + // get account info + const getAccountInfo() = async () => { + console.log(info.address); + console.log(await getBalance()); + } + // sign a message - const onSignMessage = await (msg: string) => { + const onSignMessage = async (msg: string) => { await signMessage(msg); }; @@ -273,6 +294,12 @@ function getWalletUserExists(username: string) { return wallet.value.userExists(username); } +// get account info +async function getAccountInfo() { + console.log(info.address); + console.log(await getBalance()); +} + // sign a message async function onSignMessage(msg: string) { await signMessage(msg); From c9aec18195c8ea3c199458145c6199baf27eaca1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20S=CC=8Cenk?= Date: Fri, 15 Nov 2024 14:36:51 +0100 Subject: [PATCH 3/3] ew: https docs --- build/12-embedded-wallets-integration.md | 41 +++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/build/12-embedded-wallets-integration.md b/build/12-embedded-wallets-integration.md index 2c643bcd..203ac26c 100644 --- a/build/12-embedded-wallets-integration.md +++ b/build/12-embedded-wallets-integration.md @@ -22,13 +22,21 @@ A Vite plugin is required for running and building Vite apps with Embedded Walle npm install -D vite-plugin-node-polyfills ``` +HTTPS needs to be configured even for localhost, so that authentication can work accross multiple domains. +This can be achieved with vite-plugin-mkcert Vite plugin. + +```sh +npm i vite-plugin-mkcert -D +``` + ```ts // vite.config.ts import { defineConfig } from "vite"; import { nodePolyfills } from "vite-plugin-node-polyfills"; +import mkcert from "vite-plugin-mkcert"; export default defineConfig({ - plugins: [nodePolyfills() /* ... */], + plugins: [nodePolyfills(), mkcert() /* ... */], }); ``` @@ -39,6 +47,13 @@ To use the Embedded wallet UI, your Next app has to be in `app router` mode. Whe Embedded wallet relies on browser APIs and it doesn't make sense to run it server-side. To avoid errors, the component including `` should be marked with `'use client';` +HTTPS needs to be configured even for localhost, so that authentication can work accross multiple domains. +In Next.js you can do this by adding `--experimental-https` to dev command. + +```sh +next dev --experimental-https +``` + ### Nuxt When using Vite as the build tool, a Vite plugin is required for running and building Nuxt apps with Embedded Wallet. This plugin enables Node API in the browser (eg. buffer, crypto). @@ -77,6 +92,30 @@ To avoid errors, wrap the wallet with ``. ``` +HTTPS needs to be configured even for localhost, so that authentication can work accross multiple domains. +In Nuxt.js you can do this by: + +- add `--https` to dev command + +- install [mkcert](https://github.com/FiloSottile/mkcert) + +- make a localhost certificate in project folder: `mkcert localhost` + +- edit `nuxt.config.ts` to use the certificate for the dev server + +```ts +// nuxt.config.ts +export default defineNuxtConfig({ + // ... + devServer: { + https: { + key: "localhost-key.pem", + cert: "localhost.pem", + }, + }, +}); +``` + ## Installation