From 16229e0a844da41997987461534854adfdad2bcb Mon Sep 17 00:00:00 2001 From: LukassF Date: Thu, 29 Feb 2024 16:09:18 +0100 Subject: [PATCH 01/12] add: refactor docs --- .../docs/docs/customization/external_modal.md | 71 ++++++ sdk/apps/docs/docs/home.md | 55 ----- sdk/apps/docs/docs/push.md | 70 ++++++ sdk/apps/docs/docs/solana/connect.md | 216 ++++++++++++++++++ sdk/apps/docs/docs/solana/events.md | 36 +++ sdk/apps/docs/docs/solana/sign_message.md | 21 ++ sdk/apps/docs/docs/solana/sign_transaction.md | 71 ++++++ sdk/apps/docs/docs/start.md | 95 ++++++++ sdk/apps/docs/docs/substrate/connect.md | 177 ++++++++++++++ sdk/apps/docs/docs/substrate/sign_message.md | 8 + .../docs/docs/substrate/sign_transaction.md | 49 ++++ sdk/apps/docs/docs/sui/connect.md | 181 +++++++++++++++ sdk/apps/docs/docs/sui/events.md | 35 +++ sdk/apps/docs/docs/sui/sign_message.md | 38 +++ sdk/apps/docs/docs/sui/sign_transaction.md | 88 +++++++ sdk/apps/docs/docusaurus.config.js | 26 ++- sdk/apps/docs/sidebars.js | 28 ++- 17 files changed, 1199 insertions(+), 66 deletions(-) create mode 100644 sdk/apps/docs/docs/customization/external_modal.md create mode 100644 sdk/apps/docs/docs/push.md create mode 100644 sdk/apps/docs/docs/solana/connect.md create mode 100644 sdk/apps/docs/docs/solana/events.md create mode 100644 sdk/apps/docs/docs/solana/sign_message.md create mode 100644 sdk/apps/docs/docs/solana/sign_transaction.md create mode 100644 sdk/apps/docs/docs/start.md create mode 100644 sdk/apps/docs/docs/substrate/connect.md create mode 100644 sdk/apps/docs/docs/substrate/sign_message.md create mode 100644 sdk/apps/docs/docs/substrate/sign_transaction.md create mode 100644 sdk/apps/docs/docs/sui/connect.md create mode 100644 sdk/apps/docs/docs/sui/events.md create mode 100644 sdk/apps/docs/docs/sui/sign_message.md create mode 100644 sdk/apps/docs/docs/sui/sign_transaction.md diff --git a/sdk/apps/docs/docs/customization/external_modal.md b/sdk/apps/docs/docs/customization/external_modal.md new file mode 100644 index 00000000..04d47187 --- /dev/null +++ b/sdk/apps/docs/docs/customization/external_modal.md @@ -0,0 +1,71 @@ +--- +title: External modal +slug: customization/external_modal +--- + +You may want to use your own design and/or change some logic for the modal. In that case passing all of the overrides to the `build()` or `buildLazy()` function can prove ineffective. Another option therfore is to omit the default modal altogether, by specyfing the `disableModal` option as true insid ethe `connectionOptions`. + +You can then use the modal connect function, instead of using the default one from the adapter. + +:::info +Example below is written for Solana, but you can use it for SUI and Polkadot as well. +::: + +```js +import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-solana' +// You have to import the modal class separately +import { AppInitData, NightlyConnectSelectorModal } from '@nightlylabs/wallet-selector-base' + +const appInitData: AppInitData = { + appMetadata: { + name: 'NCTestSolana', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + } +} + +const adapter = await NightlyConnectAdapter.build( + appInitData, + { disableModal: true } // ensures that the default modal will be disabled +) + +// creates a new modal +const modal = new NightlyConnectSelectorModal( + adapter.walletsList, + appInitData.url ?? 'https://nc2.nightly.app', + { + name: SOLANA_NETWORK, + icon: 'https://assets.coingecko.com/coins/images/4128/small/solana.png' + }, + document.getElementById('modalAnchor') +) + +// we can also use events to determine, +// what the current state of the app and react accordingly +adapter.on('connect', (pk) => { + modal.closeModal() +}) +``` + +The aforedescribed code sets up the adapter and the modal for later use. + +To connect using custom modal, we can run: + +```js +if (modal) + modal.openModal(adapter?.sessionId ?? undefined, async (walletName) => { + try { + modal.setStandardWalletConnectProgress(true) + await adapter?.connectToWallet(walletName) + } catch (err) { + modal.setStandardWalletConnectProgress(false) + console.log('error') + modal.closeModal() + } + }) +``` + +:::info +You may include some additional functionality on top of the basic code. For more customization freedom, visit the source code for any adapter, e.g https://github.com/nightly-labs/connect/blob/main/sdk/packages/selector-solana/src/adapter.ts. +::: diff --git a/sdk/apps/docs/docs/home.md b/sdk/apps/docs/docs/home.md index fc93cd6f..9e7af76c 100644 --- a/sdk/apps/docs/docs/home.md +++ b/sdk/apps/docs/docs/home.md @@ -3,9 +3,6 @@ title: Home slug: / --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - ![Welcome to Nightly](../static/img/connect_landing_narrow.png) ### Nightly created to Connect @@ -15,55 +12,3 @@ import TabItem from '@theme/TabItem'; We built this tool to lighten dApp developers in continuously adding new wallets. Now, after implementing Nightly Connect once, all standard-compliant wallets will be added automatically without any action required from dApp. Our goal is to be compatible with every mobile wallet. Unfortunately, this requires minimal changes on the wallet's side. But it's worth it - after implementing these changes, any mobile application will be able to connect to any dApp through Nightly Connect using QR codes or deep links, and will gain access to tools such as push notifications. - -### Get started - -:::info -Install with code below in your terminal to get started. - - - - -Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-solana - -# Using Yarn -yarn add @nightlylabs/wallet-selector-solana - -``` - - - - -Simply integrate Nightly Connect to your application or wallet with our [Nightly Sui Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-sui). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-sui - -# Using Yarn -yarn add @nightlylabs/wallet-selector-sui -``` - - - - - -Simply integrate Nightly Connect to your application or wallet with our [Nightly Polkadot Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-polkadot). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-polkadot - -# Using Yarn -yarn add @nightlylabs/wallet-selector-polkadot - -``` - - - - -::: diff --git a/sdk/apps/docs/docs/push.md b/sdk/apps/docs/docs/push.md new file mode 100644 index 00000000..ab38466a --- /dev/null +++ b/sdk/apps/docs/docs/push.md @@ -0,0 +1,70 @@ +--- +title: Push notifications +slug: push +--- + +:::info +Post request is send only if client does not have established WS connection. +::: + +Application sends POST request to user Endpoint, which contains data on request. +In order to display the connect push notification on user device `connect()` function required notificationEndpoint and token. + +```js +type Connect = { + publicKeys: string[], + sessionId: string, + notification?: Notification | undefined, // required for notification purposes + device?: Device | undefined, + metadata?: string | undefined +} + +interface Notification { + token: string; + notificationEndpoint: string; +} + +interface NotificationPayload { + token: string + network: Network + sessionId: string + appMetadata: AppMetadata + device: Device + request: string // serialized RequestContent + requestId: string +} + +``` + +Firebase push notification example: + +```js +const firebase = initializeApp(undefined, 'trigger-notification') +export const triggerNotification = onRequest(async (request, response) => { + try { + if (request.method !== 'POST') { + response.status(400).send('Invalid request method') + return + } + const payload = request.body as NotificationPayload + const messaging = getMessaging(firebase) + const requestContent = JSON.parse(payload.request) as RequestContent + await messaging.send({ + token: payload.token, + android: payload.device === 'Android' ? {} : undefined, + notification: { + title: requestContent.type, + body: 'You have a new request' + payload.appMetadata.name, + imageUrl: payload.appMetadata.icon + }, + data: { payload: JSON.stringify(request.body) } + }) + response.status(200).send('OK') + return + } catch (error: any) { + console.log(error) + response.status(400).send(error.toString()) + return + } +}) +``` diff --git a/sdk/apps/docs/docs/solana/connect.md b/sdk/apps/docs/docs/solana/connect.md new file mode 100644 index 00000000..3785dffa --- /dev/null +++ b/sdk/apps/docs/docs/solana/connect.md @@ -0,0 +1,216 @@ +--- +title: Build & Connect +slug: solana/connect +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. + +:::info +We have ready to use templates that you can try here. + +Preview: https://solana-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/solana-web3-template +::: + +If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. + + + + +:::info +This part of documentation is targeted to clients/ wallets that want to enable nightly connect +as way of interaction with external applications. +::: + +To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. + +After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). + +Once client decides to connect and approves the request, call the `connect()` method. + +```js +export interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; + additionalInfo?: string; +} + +interface GetInfoResponse { + responseId: string; + network: Network; + version: Version; // string + appMetadata: AppMetadata; +} + +type Connect = { + publicKeys: string[], + sessionId: string, + notification?: Notification | undefined, // for notification purposes + device?: Device | undefined, + metadata?: string | undefined +} +``` + +### Build & Connect + +```js +import { ClientSolana } from '@nightlylabs/nightly-connect-solana' + +const client: ClientSolana = await ClientSolana.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: [ + '9mtkm594sexac7G6jct3PZqyEVe3eUWMx6SUcEhYBRxr', + '8MtpTNvQfr7iAWYLjJeyMw19vHw7bx7jrmoamkootfvA' + ], + sessionId: sessionId +} +await client.connect(message) +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection.
+Though when it is the client who disconnects, the session will not be terminated.
+Only when application disconnects, the session will be closed. +::: + + + + + +:::info +This part of documentation is targeted to applications that want to implement nightly connect +as wallet interface. +::: + +To get started, we need to connect the user to the application. +In order to do so, application generates the sessionId, a unique id that identifies each connection. + +--- + +This process is initialized by one side displaying a sessionId through QR code (see the screenshot). +The other peer needs just to scan the QR code on its device. Extension wallets are auto detected so you are always up to date and dont need to upgrade your dapp. + +![ConnectImage](../../static/img/connect.png#connectImage) + +### Connect + +Application builds a connection using `build()` or `buildLazy()` function that returns interface to communicated with remote user. It is important to note, that the `buildLazy()` function allows for the modal to appear even when the sessionId is still undefined. App should define `AppMetadata` so wallets will be able to show it to user. + +To start sending request like `signTransaction` user first need to connect to session. +Once user establishes connection, application will get public key and the connection will be confirmed. + +API of application client is fit to match currently existing standards of corresponding blockchains + +```js +interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; // Url of app image + additionalInfo?: string; +} +``` + +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. + +```js +interface ConnectionOptions { + disableModal?: boolean // default: false + // Used for disabling modal in case you want to use your own + initOnConnect?: boolean // default: false + // Ensures that the app is only build upon running the connect function + disableEagerConnect?: boolean // default: false + // Do not connect eagerly, even if the previous session is saved +} +``` + +You can implement nightly connect as full selector or use it with popular solana adapter https://github.com/solana-labs/wallet-adapter + +```js +import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-solana' +import { WalletAdapterNetwork } from '@solana/wallet-adapter-base' +import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react' +import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui' +import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets' +import { clusterApiUrl } from '@solana/web3.js' +import type { FC, ReactNode } from 'react' +import React, { useMemo } from 'react' +export const App: FC = () => { + return ( + + + + ) +} +const Context: FC<{ children: ReactNode }> = ({ children }) => { + // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'. + const network = WalletAdapterNetwork.Devnet + // You can also provide a custom RPC endpoint. + const endpoint = useMemo(() => clusterApiUrl(network), [network]) + const wallets = useMemo( + () => [ + /** + * Wallets that implement either of these standards will be available automatically. + * + * - Solana Mobile Stack Mobile Wallet Adapter Protocol + * (https://github.com/solana-mobile/mobile-wallet-adapter) + * - Solana Wallet Standard + * (https://github.com/solana-labs/wallet-standard) + * + * If you wish to support a wallet that supports neither of those standards, + * instantiate its legacy wallet adapter here. Common legacy adapters can be found + * in the npm package `@solana/wallet-adapter-wallets`. + */ + new UnsafeBurnerWalletAdapter(), + NightlyConnectAdapter.buildLazy( + { + appMetadata: { + name: 'SolanaAdapter', + description: 'Solana Adapter Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + } + // persistent: false - Add this if you want to make the session non-persistent + } + // { initOnConnect: true, disableModal: true, disableEagerConnect: true } - You may specify the connection options object here + // document.getElementById("modalAnchor") - You can pass an optional anchor element for the modal here + ) + ], + // eslint-disable-next-line react-hooks/exhaustive-deps + [network] + ) + return ( + + + {children} + + + ) +} +const Content: FC = () => { + return +} +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection. +User can force session termination in case of abuse. +Only when application disconnects and session is not persistent, session is completely removed. +::: + + + diff --git a/sdk/apps/docs/docs/solana/events.md b/sdk/apps/docs/docs/solana/events.md new file mode 100644 index 00000000..db13b357 --- /dev/null +++ b/sdk/apps/docs/docs/solana/events.md @@ -0,0 +1,36 @@ +--- +title: Listening for events +slug: solana/events +--- + +An app can listen to events, subscribe to them and run some code whenever the particular event occurs. + +If you have created a connection you can listen for events using the `on()` function. + +```js +const adapter = NightlyConnectAdapter.buildLazy({ + appMetadata: { + name: 'NCTestSolana', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + }, + url: 'https://nc2.nightly.app' +}) + +adapter.on('connect', (public_key) => { + ... +}) + +adapter.on('change', (adapter) => { + ... +}) + +adapter.on('disconnect', () => { + ... +}) + +adapter.on('error', (error) => { + ... +}) +``` diff --git a/sdk/apps/docs/docs/solana/sign_message.md b/sdk/apps/docs/docs/solana/sign_message.md new file mode 100644 index 00000000..fcf3a62c --- /dev/null +++ b/sdk/apps/docs/docs/solana/sign_message.md @@ -0,0 +1,21 @@ +--- +title: Sign Message +slug: solana/sign_message +--- + +Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. + +```js +import nacl from 'tweetnacl' + +client.on('signMessages', async (e) => { + const msg = e.messages[0].message + const encoded = Uint8Array.from(sha256.array(msg)) + const signature = nacl.sign.detached(encoded, alice_keypair.secretKey) + // resolve + await client.resolveSignMessage({ + requestId: e.responseId, + signature: signature + }) +}) +``` diff --git a/sdk/apps/docs/docs/solana/sign_transaction.md b/sdk/apps/docs/docs/solana/sign_transaction.md new file mode 100644 index 00000000..aadcc517 --- /dev/null +++ b/sdk/apps/docs/docs/solana/sign_transaction.md @@ -0,0 +1,71 @@ +--- +title: Sign Transaction +slug: solana/sign_transaction +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. + +When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. +To resolve the transaction client needs to pass in requestId and signed transaction. + +```js +import { Keypair, Transaction } from '@solana/web3.js' + +interface SignSolanaTransactionEvent { + requestId: string + transactions: Array + sessionId: string +} + +const alice_keypair = Keypair.generate() + +client.on('signTransactions', async (e) => { + const tx = e.transactions[0] + tx.sign([alice_keypair]) + // resolve + await client.resolveSignTransaction({ + requestId: e.requestId, + signedTransactions: [tx] + }) +}) + +``` + + + + + +Sending a signTransaction requires established connection with user wallet. + +Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransaction()` method returns resolved promise with Signed Transaction. + +```js +import { + Keypair, + LAMPORTS_PER_SOL, + SystemProgram, + Transaction, + VersionedTransaction +} from '@solana/web3.js' + +const RECEIVER = Keypair.generate() +const ix = SystemProgram.transfer({ + fromPubkey: alice_keypair.publicKey, + lamports: LAMPORTS_PER_SOL, + toPubkey: RECEIVER.publicKey +}) +const tx = new Transaction().add(ix) +tx.feePayer = alice_keypair.publicKey +tx.recentBlockhash = recentBlockhash + +const signed: VersionedTransaction = await app.signTransaction(tx) +``` + + + diff --git a/sdk/apps/docs/docs/start.md b/sdk/apps/docs/docs/start.md new file mode 100644 index 00000000..d036544b --- /dev/null +++ b/sdk/apps/docs/docs/start.md @@ -0,0 +1,95 @@ +--- +title: Getting started +slug: /start +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +To get started, we recommend using the instructions in the source code of the template for each supported chain. + + + + +:::info +Web template + +Preview: https://solana-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/solana-web3-template +::: + +If you want to opt for greater flexibility, install the package, as described below, and than visit the [Solana Build & Connect](./solana/connect.md). + +:::info +Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-solana + +# Using Yarn +yarn add @nightlylabs/wallet-selector-solana + +``` + +::: + + + + + +:::info +Web template + +Preview: https://sui-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/sui-web3-template +::: + +If you want to opt for greater flexibility, install the package, as described below, and than visit the [SUI Build & Connect](./sui/sui/connect). + +:::info +Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-sui + +# Using Yarn +yarn add @nightlylabs/wallet-selector-sui +``` + +::: + + + + + +:::info +Web template + +Preview: https://aleph-zero-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/aleph-zero-web3-template +::: + +If you want to opt for greater flexibility, install the package, as described below, and than visit the [Substrate Build & Connect](./substrate/substrate/connect). + +:::info +Simply integrate Nightly Connect to your application or wallet with our [Nightly Polkadot Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-polkadot). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-polkadot + +# Using Yarn +yarn add @nightlylabs/wallet-selector-polkadot + +``` + +::: + + + + diff --git a/sdk/apps/docs/docs/substrate/connect.md b/sdk/apps/docs/docs/substrate/connect.md new file mode 100644 index 00000000..7b0a7d3d --- /dev/null +++ b/sdk/apps/docs/docs/substrate/connect.md @@ -0,0 +1,177 @@ +--- +title: Build & Connect +slug: substrate/connect +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. + +:::info +We have ready to use templates that you can try here. + +Preview: https://aleph-zero-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/aleph-zero-web3-template +::: + +If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. + + + + +:::info +This part of documentation is targeted to clients/ wallets that want to enable nightly connect +as way of interaction with external applications. +::: + +To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. + +After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). + +Once client decides to connect and approves the request, call the `connect()` method. + +```js +export interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; + additionalInfo?: string; +} + +interface GetInfoResponse { + responseId: string; + network: Network; + version: Version; // string + appMetadata: AppMetadata; +} + +type Connect = { + publicKeys: string[], + sessionId: string, + notification?: Notification | undefined, // for notification purposes + device?: Device | undefined, + metadata?: string | undefined +} +``` + +### Build & Connect + +```js +import { ClientPolkadot } from '@nightlylabs/nightly-connect-polkadot' + +const client: ClientPolkadot = await ClientPolkadot.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: ['5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH'], + sessionId: sessionId, + walletsMetadata: [ + { + address: '5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH', + name: 'Alice', + type: 'ed25519' + } + ] +} +await client.connect(message) +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection.
+Though when it is the client who disconnects, the session will not be terminated.
+Only when application disconnects, the session will be closed. +::: + + + + + +:::info +This part of documentation is targeted to applications that want to implement nightly connect +as wallet interface. +::: + +To get started, we need to connect the user to the application. +In order to do so, application generates the sessionId, a unique id that identifies each connection. + +--- + +This process is initialized by one side displaying a sessionId through QR code (see the screenshot). +The other peer needs just to scan the QR code on its device. Extension wallets are auto detected so you are always up to date and dont need to upgrade your dapp. + +![ConnectImage](../../static/img/connect.png#connectImage) + +### Connect + +Application builds a connection using `build()` or `buildLazy()` function that returns interface to communicated with remote user. It is important to note, that the `buildLazy()` function allows for the modal to appear even when the sessionId is still undefined. App should define `AppMetadata` so wallets will be able to show it to user. + +To start sending request like `signTransaction` user first need to connect to session. +Once user establishes connection, application will get public key and the connection will be confirmed. + +API of application client is fit to match currently existing standards of corresponding blockchains + +```js +interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; // Url of app image + additionalInfo?: string; +} +``` + +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. + +```js +interface ConnectionOptions { + disableModal?: boolean // default: false + // Used for disabling modal in case you want to use your own + initOnConnect?: boolean // default: false + // Ensures that the app is only build upon running the connect function + disableEagerConnect?: boolean // default: false + // Do not connect eagerly, even if the previous session is saved +} +``` + +You can find example usage of this addapter here: https://github.com/nightly-labs/connect/blob/main/sdk/apps/modal-example/src/routes/aleph.tsx + +```js +import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot' +const adapter = await NightlyConnectAdapter.build( + { + appMetadata: { + name: 'NC TEST AlephZero', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + }, + network: 'AlephZero' + }, + true // should session be persisted +) +// Trigger connection +await adapter.connect() +// After connection adapter turns into remote signer +// Sign transaction +await payload.signAsync(publicKey, { signer: adapter.signer }) +// Disconnect client if you want to end session +await adapter.disconnect() +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection. +User can force session termination in case of abuse. +Only when application disconnects and session is not persistent, session is completely removed. +::: + + + diff --git a/sdk/apps/docs/docs/substrate/sign_message.md b/sdk/apps/docs/docs/substrate/sign_message.md new file mode 100644 index 00000000..24a1734f --- /dev/null +++ b/sdk/apps/docs/docs/substrate/sign_message.md @@ -0,0 +1,8 @@ +--- +title: Sign Message +slug: substrate/sign_message +--- + +Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. + +Signing messages on Substrate works the same way as signing transactions diff --git a/sdk/apps/docs/docs/substrate/sign_transaction.md b/sdk/apps/docs/docs/substrate/sign_transaction.md new file mode 100644 index 00000000..d8cbf75c --- /dev/null +++ b/sdk/apps/docs/docs/substrate/sign_transaction.md @@ -0,0 +1,49 @@ +--- +title: Sign Transaction +slug: substrate/sign_transaction +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. + +When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. +To resolve the transaction client needs to pass in requestId and signed transaction. + +```js +const alice_keypair = new Keyring() +alice_keypair.setSS58Format(42) +const aliceKeyringPair = alice_keypair.createFromUri('//Alice') + +client.on('signTransactions', async (e) => { + const payload = e.transactions[0] as SignerPayloadRaw + const signature = aliceKeyringPair.sign(payload.data, { withType: true }) + await client.resolveSignTransaction({ + requestId: e.requestId, + signedTransactions: [{ signature: u8aToHex(signature), id: new Date().getTime() }] + }) +}) +``` + + + + + +Nightly connect automatically turns into remote signer after connection from client (Mobile/Extension). +Signing transaction is as simple as passing `signer` object + +```js +// Create transaction +const payload = api.tx.balances.transfer(RECEIVER, 50000) +// Sign transaction using adapter +const signed = await payload.signAsync(SENDER, { signer: adapter.signer }) +// Send transaction +await signed.send() +``` + + + diff --git a/sdk/apps/docs/docs/sui/connect.md b/sdk/apps/docs/docs/sui/connect.md new file mode 100644 index 00000000..2060b1cf --- /dev/null +++ b/sdk/apps/docs/docs/sui/connect.md @@ -0,0 +1,181 @@ +--- +title: Build & Connect +slug: sui/connect +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. + +:::info +We have ready to use templates that you can try here. + +Preview: https://sui-web3-template.nightly.app/ + +Source code: https://github.com/nightly-labs/sui-web3-template +::: + +If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. + + + + +:::info +This part of documentation is targeted to clients/ wallets that want to enable nightly connect +as way of interaction with external applications. +::: + +To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. + +After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). + +Once client decides to connect and approves the request, call the `connect()` method. + +```js +export interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; + additionalInfo?: string; +} + +interface GetInfoResponse { + responseId: string; + network: Network; + version: Version; // string + appMetadata: AppMetadata; +} + +type Connect = { + publicKeys: string[], + sessionId: string, + notification?: Notification | undefined, // for notification purposes + device?: Device | undefined, + metadata?: string | undefined +} +``` + +### Build & Connect + +```js +import { ClientSui } from '@nightlylabs/nightly-connect-sui' + +const client: ClientSui = await ClientSui.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: [ + '0x9353aa5322295a6542b69a05e873177b2594373a5ac58efa5055562630434a9e', + '0x46f4dba3f180b8237119989d798c108f5d4c87b6aea02e6a093dd402a07083bd' + ], + sessionId: sessionId +} +await client.connect(message) +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection.
+Though when it is the client who disconnects, the session will not be terminated.
+Only when application disconnects, the session will be closed. +::: + + + + + +:::info +This part of documentation is targeted to applications that want to implement nightly connect +as wallet interface. +::: + +To get started, we need to connect the user to the application. +In order to do so, application generates the sessionId, a unique id that identifies each connection. + +--- + +This process is initialized by one side displaying a sessionId through QR code (see the screenshot). +The other peer needs just to scan the QR code on its device. Extension wallets are auto detected so you are always up to date and dont need to upgrade your dapp. + +![ConnectImage](../../static/img/connect.png#connectImage) + +### Connect + +Application builds a connection using `build()` or `buildLazy()` function that returns interface to communicated with remote user. It is important to note, that the `buildLazy()` function allows for the modal to appear even when the sessionId is still undefined. App should define `AppMetadata` so wallets will be able to show it to user. + +To start sending request like `signTransaction` user first need to connect to session. +Once user establishes connection, application will get public key and the connection will be confirmed. + +API of application client is fit to match currently existing standards of corresponding blockchains + +```js +interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; // Url of app image + additionalInfo?: string; +} +``` + +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. + +```js +interface ConnectionOptions { + disableModal?: boolean // default: false + // Used for disabling modal in case you want to use your own + initOnConnect?: boolean // default: false + // Ensures that the app is only build upon running the connect function + disableEagerConnect?: boolean // default: false + // Do not connect eagerly, even if the previous session is saved +} +``` + +```js +import { WalletStandardAdapterProvider } from '@mysten/wallet-adapter-wallet-standard' +import { WalletKitProvider } from '@mysten/wallet-kit' +import { NightlyConnectSuiAdapter } from '@nightlylabs/wallet-selector-sui' +import dynamic from 'next/dynamic' +export const SuiProvider = ({ children }: any) => { + return ( + + {children} + + ) +} +export default dynamic(() => Promise.resolve(SuiProvider), { + ssr: false +}) +``` + +### Disconnect + +:::info +Both client and application can initiate disconnection. +User can force session termination in case of abuse. +Only when application disconnects and session is not persistent, session is completely removed. +::: + + + diff --git a/sdk/apps/docs/docs/sui/events.md b/sdk/apps/docs/docs/sui/events.md new file mode 100644 index 00000000..4ef4be5a --- /dev/null +++ b/sdk/apps/docs/docs/sui/events.md @@ -0,0 +1,35 @@ +--- +title: Listening for events +slug: sui/events +--- + +An app can listen to events, subscribe to them and run some code whenever the particular event occurs. + +If you have created a connection you can listen for events using the `on()` function. + +```js +const adapter = NightlyConnectAdapter.buildLazy({ + appMetadata: { + name: 'NCTestSolana', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + } +}) + +adapter.on('connect', (accounts) => { + ... +}) + +adapter.on('change', (adapter) => { + ... +}) + +adapter.on('disconnect', () => { + ... +}) + +adapter.on('error', (error) => { + ... +}) +``` diff --git a/sdk/apps/docs/docs/sui/sign_message.md b/sdk/apps/docs/docs/sui/sign_message.md new file mode 100644 index 00000000..3f9ed957 --- /dev/null +++ b/sdk/apps/docs/docs/sui/sign_message.md @@ -0,0 +1,38 @@ +--- +title: Sign Message +slug: sui/sign_message +--- + +Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. + +```js +import { + fromB64, + IntentScope, + messageWithIntent, + toB64, + toSerializedSignature +} from '@mysten/sui.js' +import { blake2b } from '@noble/hashes/blake2b' + +client.on('signMessages', async (e) => { + const msg = e.messages[0].message + const msgTo64 = toB64(new TextEncoder().encode(msg)) + const intentMessage = messageWithIntent(IntentScope.PersonalMessage, fromB64(msgTo64)) + const digest = blake2b(intentMessage, { dkLen: 32 }) + const signature = alice_keypair.signData(digest) + const signedMessage = { + messageBytes: msg, + signature: toSerializedSignature({ + signature, + signatureScheme: 'ED25519', + pubKey: alice_keypair.getPublicKey() + }) + } + // resolve + await client.resolveSignMessage({ + responseId: e.responseId, + signature: signedMessage + }) +}) +``` diff --git a/sdk/apps/docs/docs/sui/sign_transaction.md b/sdk/apps/docs/docs/sui/sign_transaction.md new file mode 100644 index 00000000..f09adf4b --- /dev/null +++ b/sdk/apps/docs/docs/sui/sign_transaction.md @@ -0,0 +1,88 @@ +--- +title: Sign Transaction +slug: sui/sign_transaction +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. + +When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. +To resolve the transaction client needs to pass in requestId and signed transaction. + +```js +import { + Ed25519Keypair, + messageWithIntent, + toB64, + toSerializedSignature, + TransactionBlock, +} from '@mysten/sui.js' +import { blake2b } from '@noble/hashes/blake2b' + +interface SignSuiTransactionEvent { + sessionId: string + requestId: string + transactions: Array +} + +const alice_keypair: Ed25519Keypair = Ed25519Keypair.fromSecretKey(hexToBytes(ALICE_PRIVE_KEY)) + +client.on('signTransactions', async (e) => { + const tx = e.transactions[0].transaction + const transactionBlockBytes = await TransactionBlock.from(tx).build({ + provider: suiConnection, + onlyTransactionKind: true + }) + + const intentMessage = messageWithIntent(IntentScope.TransactionData, transactionBlockBytes) + const digest = blake2b(intentMessage, { dkLen: 32 }) + const signatureArray = alice_keypair.signData(digest) + const signature = toSerializedSignature({ + signature: signatureArray, // Uint8Array + signatureScheme: 'ED25519', // SignatureScheme + pubKey: alice_keypair.getPublicKey() // PublicKey + }) + + // resolve + await client.resolveSignTransaction({ + responseId: e.requestId, + signedTransactions: [ + { + transactionBlockBytes: toB64(transactionBlockBytes), + signature: signature + } + ] + }) +}) +``` + + + + + +Sending a signTransaction requires established connection with user wallet. + +Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransactionBlock()` method returns resolved promise with Signed Transaction. + +```js +import { TransactionBlock } from '@mysten/sui.js' + +const tx = new TransactionBlock() +const coin = tx.splitCoins(tx.gas, [tx.pure(100)]) +tx.transferObjects([coin], tx.pure(RECEIVER_SUI_ADDRESS)) +tx.setSenderIfNotSet(RECEIVER_SUI_ADDRESS) + +const signedTx: SignedTransaction = await app.signTransactionBlock({ + transactionBlock: tx, // TransactionBlock + account: aliceWalletAccount, // WalletAccount + chain: 'sui:testnet' // IdentifierString +}) +``` + + + diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index 66ae8537..a2c9e9f4 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -58,15 +58,33 @@ const config = { position: 'left' }, { - to: 'docs/application/application/connect', + to: 'docs/start/', activeBasePath: 'connect', - label: 'Application', + label: 'Getting started', position: 'left' }, { - to: 'docs/client/client/connect', + to: 'docs/solana/solana/connect', activeBasePath: 'connect', - label: 'Client', + label: 'Solana', + position: 'left' + }, + { + to: 'docs/sui/sui/connect', + activeBasePath: 'connect', + label: 'SUI', + position: 'left' + }, + { + to: 'docs/substrate/substrate/connect', + activeBasePath: 'connect', + label: 'Substrate', + position: 'left' + }, + { + to: 'docs/push/', + activeBasePath: 'connect', + label: 'Push', position: 'left' }, { diff --git a/sdk/apps/docs/sidebars.js b/sdk/apps/docs/sidebars.js index dfcad782..ca22a970 100644 --- a/sdk/apps/docs/sidebars.js +++ b/sdk/apps/docs/sidebars.js @@ -16,18 +16,32 @@ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure docs: [ 'home', + 'start', { type: 'category', - label: '💻 Application', - collapsed: false, - items: ['application/connect', 'application/sign_transaction'] + label: 'Solana', + collapsed: true, + items: ['solana/connect', 'solana/events', 'solana/sign_transaction', 'solana/sign_message'] }, { type: 'category', - label: '📱 Client', - collapsed: false, - items: ['client/connect', 'client/sign', 'client/signMessage', 'client/push'] - } + label: 'SUI', + collapsed: true, + items: ['sui/connect', 'sui/events', 'sui/sign_transaction', 'sui/sign_message'] + }, + { + type: 'category', + label: 'Substrate', + collapsed: true, + items: ['substrate/connect', 'substrate/sign_transaction', 'substrate/sign_message'] + }, + { + type: 'category', + label: 'Customization', + collapsed: true, + items: ['customization/external_modal'] + }, + 'push' ] // But you can create a sidebar manually From d73a6a1349e8bfb0f82da720379436615aa0643d Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 09:01:10 +0100 Subject: [PATCH 02/12] add: ui overrides page and fixes --- .../docs/docs/customization/external_modal.md | 2 +- .../docs/docs/customization/ui_overrides.md | 124 ++++++++++++++++++ sdk/apps/docs/docs/home.md | 2 +- sdk/apps/docs/docs/solana/connect.md | 2 +- sdk/apps/docs/docs/start.md | 6 +- sdk/apps/docs/docs/substrate/connect.md | 8 +- sdk/apps/docs/docs/sui/connect.md | 2 +- sdk/apps/docs/docs/sui/events.md | 2 +- sdk/apps/docs/docusaurus.config.js | 23 ++-- sdk/apps/docs/sidebars.js | 10 +- 10 files changed, 157 insertions(+), 24 deletions(-) create mode 100644 sdk/apps/docs/docs/customization/ui_overrides.md diff --git a/sdk/apps/docs/docs/customization/external_modal.md b/sdk/apps/docs/docs/customization/external_modal.md index 04d47187..188edc93 100644 --- a/sdk/apps/docs/docs/customization/external_modal.md +++ b/sdk/apps/docs/docs/customization/external_modal.md @@ -8,7 +8,7 @@ You may want to use your own design and/or change some logic for the modal. In t You can then use the modal connect function, instead of using the default one from the adapter. :::info -Example below is written for Solana, but you can use it for SUI and Polkadot as well. +Example below is written for [Solana](../../solana/solana/connect), but you can use it for [SUI](../../sui/sui/connect) and [Substrate](../../substrate/substrate/connect) as well. ::: ```js diff --git a/sdk/apps/docs/docs/customization/ui_overrides.md b/sdk/apps/docs/docs/customization/ui_overrides.md new file mode 100644 index 00000000..93224452 --- /dev/null +++ b/sdk/apps/docs/docs/customization/ui_overrides.md @@ -0,0 +1,124 @@ +--- +title: Modal UI overrides +slug: customization/ui_overrides +--- + +Nightly connect offers a default modal that comes along with the adapter, so that you don't have to put any additional work into implementing it yourself. Nevertheless, if you wish to do so, you can. + +There are two ways of customizing the modal, one of which is UI overrides and the other is implementing an [external modal](./external_modal). + +### UI overrides + +Customizing with the use of UI overrides is easier than creating the external modal, but it guarantees only limited freedom in the customization options. + +The overrides is a set of properties, that make up an object, which then is optionally passed into the `build()` or `buildLazy()` functions. The properties look like this. + +```js +interface UIOverrides { + variablesOverride?: object + stylesOverride?: string + qrConfigOverride?: Partial +} + +interface XMLOptions { + image?: string; + imageWidth?: number; + imageHeight?: number; + width: number; + height: number; + margin: number; + data: string; + qrOptions: { + typeNumber: TypeNum; + mode?: Mode; + errorCorrectionLevel: ErrorCorrectionLevel; + }; + imageOptions: { + hideBackgroundDots: boolean; + imageSize: number; + crossOrigin?: string; + margin: number; + }; + dotsOptions: { + color: string; + }; + cornersDotOptions: { + color: string; + }; + cornersSquareOptions: { + color: string; + }; + backgroundOptions: { + color: string; + }; +} + +type TypeNum = Range<0, 41>; + +enum Mode { + Numeric = "Numeric", + Alphanumeric = "Alphanumeric", + Byte = "Byte", + Kanji = "Kanji" +} + +enum ErrorCorrectionLevel { + L = "L", + M = "M", + Q = "Q", + H = "H" +} +``` + +:::info +The `XMLOptions` interface, specifies the override object for the QR code, which is displayed on the modal. +::: + +As you can see, the options are plentiful and allow for great flexibility in customizing the appearance of the modal. +Below is the example of implementing the overrides. + +```js +const adapter = NightlyConnectAdapter.buildLazy( + { + appMetadata: { + name: 'NC TEST AlephZero', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + }, + network: 'AlephZero' + }, + { + variablesOverride: { + '--nc-color-primary': 'green', + '--nc-img-logo': 'url(https://alephzero.org/aleph-design/brand-elements/logo-day.svg)' + }, // override the CSS variables + stylesOverride: ` + .nc_headerWrapper { + background-color: red; + } + + .nc_headerLogo { + width: 200px; + } + + .nc_modalContent { + border-radius: 0; + border: 3px dashed var(--nc-color-primary); + } + `, + // override the styles manually + qrConfigOverride: { + image: customFennecXml, + dotsOptions: { + color: 'gold' + } + } + // override the qr code cinfiguration + } +) +``` + +:::info +The example is built using [Substrate](../../substrate/substrate/connect), but can be implemented using [Solana](../../solana/solana/connect) and [SUI](../../sui/sui/connect) as well. +::: diff --git a/sdk/apps/docs/docs/home.md b/sdk/apps/docs/docs/home.md index 9e7af76c..3bb54c72 100644 --- a/sdk/apps/docs/docs/home.md +++ b/sdk/apps/docs/docs/home.md @@ -1,6 +1,6 @@ --- title: Home -slug: / +slug: /home --- ![Welcome to Nightly](../static/img/connect_landing_narrow.png) diff --git a/sdk/apps/docs/docs/solana/connect.md b/sdk/apps/docs/docs/solana/connect.md index 3785dffa..9434bc22 100644 --- a/sdk/apps/docs/docs/solana/connect.md +++ b/sdk/apps/docs/docs/solana/connect.md @@ -123,7 +123,7 @@ interface AppMetadata { } ``` -You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. Note, that the `disableModal` property can be used for implementing a custom [External modal](../../customization/customization/external_modal). ```js interface ConnectionOptions { diff --git a/sdk/apps/docs/docs/start.md b/sdk/apps/docs/docs/start.md index d036544b..36e74e24 100644 --- a/sdk/apps/docs/docs/start.md +++ b/sdk/apps/docs/docs/start.md @@ -19,7 +19,7 @@ Preview: https://solana-web3-template.nightly.app/ Source code: https://github.com/nightly-labs/solana-web3-template ::: -If you want to opt for greater flexibility, install the package, as described below, and than visit the [Solana Build & Connect](./solana/connect.md). +If you want to opt for greater flexibility, install the package, as described below and then visit the [Solana Build & Connect](./solana/connect.md). :::info Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). @@ -47,7 +47,7 @@ Preview: https://sui-web3-template.nightly.app/ Source code: https://github.com/nightly-labs/sui-web3-template ::: -If you want to opt for greater flexibility, install the package, as described below, and than visit the [SUI Build & Connect](./sui/sui/connect). +If you want to opt for greater flexibility, install the package, as described below and then visit the [SUI Build & Connect](./sui/sui/connect). :::info Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). @@ -74,7 +74,7 @@ Preview: https://aleph-zero-web3-template.nightly.app/ Source code: https://github.com/nightly-labs/aleph-zero-web3-template ::: -If you want to opt for greater flexibility, install the package, as described below, and than visit the [Substrate Build & Connect](./substrate/substrate/connect). +If you want to opt for greater flexibility, install the package, as described below and then visit the [Substrate Build & Connect](./substrate/substrate/connect). :::info Simply integrate Nightly Connect to your application or wallet with our [Nightly Polkadot Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-polkadot). diff --git a/sdk/apps/docs/docs/substrate/connect.md b/sdk/apps/docs/docs/substrate/connect.md index 7b0a7d3d..3e7ec6bf 100644 --- a/sdk/apps/docs/docs/substrate/connect.md +++ b/sdk/apps/docs/docs/substrate/connect.md @@ -127,7 +127,7 @@ interface AppMetadata { } ``` -You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. Note, that the `disableModal` property can be used for implementing a custom [External modal](../../customization/customization/external_modal). ```js interface ConnectionOptions { @@ -153,8 +153,10 @@ const adapter = await NightlyConnectAdapter.build( additionalInfo: 'Courtesy of Nightly Connect team' }, network: 'AlephZero' - }, - true // should session be persisted + // persistent: false - Add this if you want to make the session non-persistent + } + // { initOnConnect: true, disableModal: true, disableEagerConnect: true } - You may specify the connection options object here + // document.getElementById("modalAnchor") - You can pass an optional anchor element for the modal here ) // Trigger connection await adapter.connect() diff --git a/sdk/apps/docs/docs/sui/connect.md b/sdk/apps/docs/docs/sui/connect.md index 2060b1cf..61c8c710 100644 --- a/sdk/apps/docs/docs/sui/connect.md +++ b/sdk/apps/docs/docs/sui/connect.md @@ -123,7 +123,7 @@ interface AppMetadata { } ``` -You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. +You may also want to specify some additional connection options. This can be achieved by creating an object that implements the below interface, and using it inside the `build()` or `buildLazy()` function. Note, that the `disableModal` property can be used for implementing a custom [External modal](../../customization/customization/external_modal). ```js interface ConnectionOptions { diff --git a/sdk/apps/docs/docs/sui/events.md b/sdk/apps/docs/docs/sui/events.md index 4ef4be5a..83fa4999 100644 --- a/sdk/apps/docs/docs/sui/events.md +++ b/sdk/apps/docs/docs/sui/events.md @@ -10,7 +10,7 @@ If you have created a connection you can listen for events using the `on()` func ```js const adapter = NightlyConnectAdapter.buildLazy({ appMetadata: { - name: 'NCTestSolana', + name: 'NCTestSui', description: 'Nightly Connect Test', icon: 'https://docs.nightly.app/img/logo.png', additionalInfo: 'Courtesy of Nightly Connect team' diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index a2c9e9f4..bfad3221 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -48,42 +48,49 @@ const config = { title: 'Nightly Connect', logo: { alt: 'Nightly Logo', - src: 'img/logo.png' + src: 'img/logo.png', + href: 'docs/home' }, items: [ { - to: 'docs/', - activeBasePath: 'docs', + to: 'docs/home', + activeBasePath: 'docs/home', label: 'Docs', position: 'left' }, { to: 'docs/start/', - activeBasePath: 'connect', + activeBasePath: 'docs/start', label: 'Getting started', position: 'left' }, { to: 'docs/solana/solana/connect', - activeBasePath: 'connect', + activeBasePath: 'docs/solana/solana/connect', label: 'Solana', position: 'left' }, { to: 'docs/sui/sui/connect', - activeBasePath: 'connect', + activeBasePath: 'docs/sui/sui/connect', label: 'SUI', position: 'left' }, { to: 'docs/substrate/substrate/connect', - activeBasePath: 'connect', + activeBasePath: 'docs/substrate/substrate/connect', label: 'Substrate', position: 'left' }, + { + to: 'docs/customization/customization/ui_overrides', + activeBasePath: 'docs/customization/customization/ui_overrides', + label: 'Customization', + position: 'left' + }, { to: 'docs/push/', - activeBasePath: 'connect', + activeBasePath: 'docs/push/', label: 'Push', position: 'left' }, diff --git a/sdk/apps/docs/sidebars.js b/sdk/apps/docs/sidebars.js index ca22a970..1092fdc1 100644 --- a/sdk/apps/docs/sidebars.js +++ b/sdk/apps/docs/sidebars.js @@ -20,26 +20,26 @@ const sidebars = { { type: 'category', label: 'Solana', - collapsed: true, + collapsed: false, items: ['solana/connect', 'solana/events', 'solana/sign_transaction', 'solana/sign_message'] }, { type: 'category', label: 'SUI', - collapsed: true, + collapsed: false, items: ['sui/connect', 'sui/events', 'sui/sign_transaction', 'sui/sign_message'] }, { type: 'category', label: 'Substrate', - collapsed: true, + collapsed: false, items: ['substrate/connect', 'substrate/sign_transaction', 'substrate/sign_message'] }, { type: 'category', label: 'Customization', - collapsed: true, - items: ['customization/external_modal'] + collapsed: false, + items: ['customization/ui_overrides', 'customization/external_modal'] }, 'push' ] From 9c58aa32fa424030614f51011aa537d80c546eb2 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 09:06:16 +0100 Subject: [PATCH 03/12] remove redundant files and rewrite some sentences --- sdk/apps/docs/docs/application/connect.md | 210 ------------------ .../docs/docs/application/sign_transaction.md | 75 ------- sdk/apps/docs/docs/client/connect.md | 124 ----------- sdk/apps/docs/docs/client/push.md | 70 ------ sdk/apps/docs/docs/client/sign.md | 112 ---------- sdk/apps/docs/docs/client/signMessage.md | 70 ------ sdk/apps/docs/docs/solana/connect.md | 2 +- sdk/apps/docs/docs/substrate/connect.md | 2 +- sdk/apps/docs/docs/sui/connect.md | 2 +- 9 files changed, 3 insertions(+), 664 deletions(-) delete mode 100644 sdk/apps/docs/docs/application/connect.md delete mode 100644 sdk/apps/docs/docs/application/sign_transaction.md delete mode 100644 sdk/apps/docs/docs/client/connect.md delete mode 100644 sdk/apps/docs/docs/client/push.md delete mode 100644 sdk/apps/docs/docs/client/sign.md delete mode 100644 sdk/apps/docs/docs/client/signMessage.md diff --git a/sdk/apps/docs/docs/application/connect.md b/sdk/apps/docs/docs/application/connect.md deleted file mode 100644 index 2bf76e7a..00000000 --- a/sdk/apps/docs/docs/application/connect.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Establishing a Connection -slug: application/connect ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -:::info -This part of documentation is targeted to applications that want to implement nightly connect -as wallet interface. -::: - -To get started, we need to connect the user to the application. -In order to do so, application generates the sessionId, a unique id that identifies each connection. - ---- - -This process is initialized by one side displaying a sessionId through QR code (see the screenshot). -The other peer needs just to scan the QR code on its device. Extension wallets are auto detected so you are always up to date and dont need to upgrade your dapp. - -![ConnectImage](../../static/img/connect.png#connectImage) - -### Connect - -Application builds a connection using `build()` or `buildLazy()` function that returns interface to communicated with remote user. App should define `AppMetadata` so wallets will be able to show it to user. - -To start sending request like `signTransaction` user first need to connect to session. -Once user establishes connection, application will get public key and the connection will be confirmed. - -API of application client is fit to match currently existing standards of corresponding blockchains - -```js -interface AppMetadata { - name: string; - url?: string; - description?: string; - icon?: string; // Url of app image - additionalInfo?: string; -} -``` - - - - -:::info -We have ready to use templates that you can try here. - -Preview: https://solana-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/solana-web3-template -::: - -You can implement nightly connect as full selector or use it with popular solana adapter https://github.com/solana-labs/wallet-adapter - -```js -import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-solana' -import { WalletAdapterNetwork } from '@solana/wallet-adapter-base' -import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react' -import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui' -import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets' -import { clusterApiUrl } from '@solana/web3.js' -import type { FC, ReactNode } from 'react' -import React, { useMemo } from 'react' -export const App: FC = () => { - return ( - - - - ) -} -const Context: FC<{ children: ReactNode }> = ({ children }) => { - // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'. - const network = WalletAdapterNetwork.Devnet - // You can also provide a custom RPC endpoint. - const endpoint = useMemo(() => clusterApiUrl(network), [network]) - const wallets = useMemo( - () => [ - /** - * Wallets that implement either of these standards will be available automatically. - * - * - Solana Mobile Stack Mobile Wallet Adapter Protocol - * (https://github.com/solana-mobile/mobile-wallet-adapter) - * - Solana Wallet Standard - * (https://github.com/solana-labs/wallet-standard) - * - * If you wish to support a wallet that supports neither of those standards, - * instantiate its legacy wallet adapter here. Common legacy adapters can be found - * in the npm package `@solana/wallet-adapter-wallets`. - */ - new UnsafeBurnerWalletAdapter(), - NightlyConnectAdapter.buildLazy( - { - appMetadata: { - name: 'SolanaAdapter', - description: 'Solana Adapter Test', - icon: 'https://docs.nightly.app/img/logo.png', - additionalInfo: 'Courtesy of Nightly Connect team' - } - }, - true - ) - ], - // eslint-disable-next-line react-hooks/exhaustive-deps - [network] - ) - return ( - - - {children} - - - ) -} -const Content: FC = () => { - return -} -``` - - - - - -:::info -We have ready to use templates that you can try here. - -Preview: https://sui-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/sui-web3-template -::: - -You can implement nightly connect as full selector or use it with popular sui adapter https://github.com/MystenLabs/sui/tree/main/sdk/wallet-adapter - -```js -import { WalletStandardAdapterProvider } from '@mysten/wallet-adapter-wallet-standard' -import { WalletKitProvider } from '@mysten/wallet-kit' -import { NightlyConnectSuiAdapter } from '@nightlylabs/wallet-selector-sui' -import dynamic from 'next/dynamic' -export const SuiProvider = ({ children }: any) => { - return ( - - {children} - - ) -} -export default dynamic(() => Promise.resolve(SuiProvider), { - ssr: false -}) -``` - - - - -:::info -We have ready to use templates that you can try here. - -Preview: https://aleph-zero-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/aleph-zero-web3-template -::: - -You can find example usage of this addapter here: https://github.com/nightly-labs/connect/blob/main/sdk/apps/modal-example/src/routes/aleph.tsx - -```js -import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot' -const adapter = await NightlyConnectAdapter.build( - { - appMetadata: { - name: 'NC TEST AlephZero', - description: 'Nightly Connect Test', - icon: 'https://docs.nightly.app/img/logo.png', - additionalInfo: 'Courtesy of Nightly Connect team' - }, - network: 'AlephZero' - }, - true // should session be persisted -) -// Trigger connection -await adapter.connect() -// After connection adapter turns into remote signer -// Sign transaction -await payload.signAsync(publicKey, { signer: adapter.signer }) -// Disconnect client if you want to end session -await adapter.disconnect() -``` - - - - -### Disconnect - -:::info -Both client and application can initiate disconnection. -User can force session termination in case of abuse. -Only when application disconnects and session is not persistent, session is completely removed. -::: diff --git a/sdk/apps/docs/docs/application/sign_transaction.md b/sdk/apps/docs/docs/application/sign_transaction.md deleted file mode 100644 index 9dea9007..00000000 --- a/sdk/apps/docs/docs/application/sign_transaction.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Sign Transaction -slug: application/send ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - - -Sending a signTransaction requires established connection with user wallet. - -Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransaction()` method returns resolved promise with Signed Transaction. - -```js -import { - Keypair, - LAMPORTS_PER_SOL, - SystemProgram, - Transaction, - VersionedTransaction -} from '@solana/web3.js' - -const RECEIVER = Keypair.generate() -const ix = SystemProgram.transfer({ - fromPubkey: alice_keypair.publicKey, - lamports: LAMPORTS_PER_SOL, - toPubkey: RECEIVER.publicKey -}) -const tx = new Transaction().add(ix) -tx.feePayer = alice_keypair.publicKey -tx.recentBlockhash = recentBlockhash - -const signed: VersionedTransaction = await app.signTransaction(tx) -``` - - - - -Sending a signTransaction requires established connection with user wallet. - -Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransactionBlock()` method returns resolved promise with Signed Transaction. - -```js -import { TransactionBlock } from '@mysten/sui.js' - -const tx = new TransactionBlock() -const coin = tx.splitCoins(tx.gas, [tx.pure(100)]) -tx.transferObjects([coin], tx.pure(RECEIVER_SUI_ADDRESS)) -tx.setSenderIfNotSet(RECEIVER_SUI_ADDRESS) - -const signedTx: SignedTransaction = await app.signTransactionBlock({ - transactionBlock: tx, // TransactionBlock - account: aliceWalletAccount, // WalletAccount - chain: 'sui:testnet' // IdentifierString -}) -``` - - - - -Nightly connect automatically turns into remote signer after connection from client (Mobile/Extension). -Signing transaction is as simple as passing `signer` object - -```js -// Create transaction -const payload = api.tx.balances.transfer(RECEIVER, 50000) -// Sign transaction using adapter -const signed = await payload.signAsync(SENDER, { signer: adapter.signer }) -// Send transaction -await signed.send() -``` - - - diff --git a/sdk/apps/docs/docs/client/connect.md b/sdk/apps/docs/docs/client/connect.md deleted file mode 100644 index 80153431..00000000 --- a/sdk/apps/docs/docs/client/connect.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Build & Connect -slug: client/connect ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -:::info -This part of documentation is targeted to clients/wallets that want to enable nightly connect -as way of interaction with external applications. -::: - -To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. - -After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). - -Once client decides to connect and approves the request, call the `connect()` method. - -```js -export interface AppMetadata { - name: string; - url?: string; - description?: string; - icon?: string; - additionalInfo?: string; -} - -interface GetInfoResponse { - responseId: string; - network: Network; - version: Version; // string - appMetadata: AppMetadata; -} - -type Connect = { - publicKeys: string[], - sessionId: string, - notification?: Notification | undefined, // for notification purposes - device?: Device | undefined, - metadata?: string | undefined -} -``` - -### Build & Connect - - - - -```js -import { ClientSolana } from '@nightlylabs/nightly-connect-solana' - -const client: ClientSolana = await ClientSolana.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: [ - '9mtkm594sexac7G6jct3PZqyEVe3eUWMx6SUcEhYBRxr', - '8MtpTNvQfr7iAWYLjJeyMw19vHw7bx7jrmoamkootfvA' - ], - sessionId: sessionId -} -await client.connect(message) -``` - - - - - -```js -import { ClientSui } from '@nightlylabs/nightly-connect-sui' - -const client: ClientSui = await ClientSui.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: [ - '0x9353aa5322295a6542b69a05e873177b2594373a5ac58efa5055562630434a9e', - '0x46f4dba3f180b8237119989d798c108f5d4c87b6aea02e6a093dd402a07083bd' - ], - sessionId: sessionId -} -await client.connect(message) -``` - - - - -```js -import { ClientPolkadot } from '@nightlylabs/nightly-connect-polkadot' - -const client: ClientPolkadot = await ClientPolkadot.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: ['5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH'], - sessionId: sessionId, - walletsMetadata: [ - { - address: '5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH', - name: 'Alice', - type: 'ed25519' - } - ] -} -await client.connect(message) -``` - - - - -### Disconnect - -:::info -Both client and application can initiate disconnection.
-Though when it is the client who disconnects, the session will not be terminated.
-Only when application disconnects, the session will be closed. -::: diff --git a/sdk/apps/docs/docs/client/push.md b/sdk/apps/docs/docs/client/push.md deleted file mode 100644 index 3bcb1130..00000000 --- a/sdk/apps/docs/docs/client/push.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Push notifications -slug: client/push ---- - -:::info -Post request is send only if client does not have established WS connection. -::: - -Application sends POST request to user Endpoint, which contains data on request. -In order to display the connect push notification on user device `connect()` function required notificationEndpoint and token. - -```js -type Connect = { - publicKeys: string[], - sessionId: string, - notification?: Notification | undefined, // required for notification purposes - device?: Device | undefined, - metadata?: string | undefined -} - -interface Notification { - token: string; - notificationEndpoint: string; -} - -interface NotificationPayload { - token: string - network: Network - sessionId: string - appMetadata: AppMetadata - device: Device - request: string // serialized RequestContent - requestId: string -} - -``` - -Firebase push notification example: - -```js -const firebase = initializeApp(undefined, 'trigger-notification') -export const triggerNotification = onRequest(async (request, response) => { - try { - if (request.method !== 'POST') { - response.status(400).send('Invalid request method') - return - } - const payload = request.body as NotificationPayload - const messaging = getMessaging(firebase) - const requestContent = JSON.parse(payload.request) as RequestContent - await messaging.send({ - token: payload.token, - android: payload.device === 'Android' ? {} : undefined, - notification: { - title: requestContent.type, - body: 'You have a new request' + payload.appMetadata.name, - imageUrl: payload.appMetadata.icon - }, - data: { payload: JSON.stringify(request.body) } - }) - response.status(200).send('OK') - return - } catch (error: any) { - console.log(error) - response.status(400).send(error.toString()) - return - } -}) -``` diff --git a/sdk/apps/docs/docs/client/sign.md b/sdk/apps/docs/docs/client/sign.md deleted file mode 100644 index 6dc185c1..00000000 --- a/sdk/apps/docs/docs/client/sign.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Sign Transaction -slug: client/sign ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. - -When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. -To resolve the transaction client needs to pass in requestId and signed transaction. - - - - - -```js -import { Keypair, Transaction } from '@solana/web3.js' - -interface SignSolanaTransactionEvent { - requestId: string - transactions: Array - sessionId: string -} - -const alice_keypair = Keypair.generate() - -client.on('signTransactions', async (e) => { - const tx = e.transactions[0] - tx.sign([alice_keypair]) - // resolve - await client.resolveSignTransaction({ - requestId: e.requestId, - signedTransactions: [tx] - }) -}) - -``` - - - - - -```js -import { - Ed25519Keypair, - messageWithIntent, - toB64, - toSerializedSignature, - TransactionBlock, -} from '@mysten/sui.js' -import { blake2b } from '@noble/hashes/blake2b' - -interface SignSuiTransactionEvent { - sessionId: string - requestId: string - transactions: Array -} - -const alice_keypair: Ed25519Keypair = Ed25519Keypair.fromSecretKey(hexToBytes(ALICE_PRIVE_KEY)) - -client.on('signTransactions', async (e) => { - const tx = e.transactions[0].transaction - const transactionBlockBytes = await TransactionBlock.from(tx).build({ - provider: suiConnection, - onlyTransactionKind: true - }) - - const intentMessage = messageWithIntent(IntentScope.TransactionData, transactionBlockBytes) - const digest = blake2b(intentMessage, { dkLen: 32 }) - const signatureArray = alice_keypair.signData(digest) - const signature = toSerializedSignature({ - signature: signatureArray, // Uint8Array - signatureScheme: 'ED25519', // SignatureScheme - pubKey: alice_keypair.getPublicKey() // PublicKey - }) - - // resolve - await client.resolveSignTransaction({ - responseId: e.requestId, - signedTransactions: [ - { - transactionBlockBytes: toB64(transactionBlockBytes), - signature: signature - } - ] - }) -}) -``` - - - - -```js - -const alice_keypair = new Keyring() -alice_keypair.setSS58Format(42) -const aliceKeyringPair = alice_keypair.createFromUri('//Alice') - -client.on('signTransactions', async (e) => { - const payload = e.transactions[0] as SignerPayloadRaw - const signature = aliceKeyringPair.sign(payload.data, { withType: true }) - await client.resolveSignTransaction({ - requestId: e.requestId, - signedTransactions: [{ signature: u8aToHex(signature), id: new Date().getTime() }] - }) -}) -``` - - - diff --git a/sdk/apps/docs/docs/client/signMessage.md b/sdk/apps/docs/docs/client/signMessage.md deleted file mode 100644 index 69058e15..00000000 --- a/sdk/apps/docs/docs/client/signMessage.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Sign Messages -slug: client/signMessage ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. - - - - - -```js -import nacl from 'tweetnacl' - -client.on('signMessages', async (e) => { - const msg = e.messages[0].message - const encoded = Uint8Array.from(sha256.array(msg)) - const signature = nacl.sign.detached(encoded, alice_keypair.secretKey) - // resolve - await client.resolveSignMessage({ - requestId: e.responseId, - signature: signature - }) -}) -``` - - - - - -```js -import { - fromB64, - IntentScope, - messageWithIntent, - toB64, - toSerializedSignature -} from '@mysten/sui.js' -import { blake2b } from '@noble/hashes/blake2b' - -client.on('signMessages', async (e) => { - const msg = e.messages[0].message - const msgTo64 = toB64(new TextEncoder().encode(msg)) - const intentMessage = messageWithIntent(IntentScope.PersonalMessage, fromB64(msgTo64)) - const digest = blake2b(intentMessage, { dkLen: 32 }) - const signature = alice_keypair.signData(digest) - const signedMessage = { - messageBytes: msg, - signature: toSerializedSignature({ - signature, - signatureScheme: 'ED25519', - pubKey: alice_keypair.getPublicKey() - }) - } - // resolve - await client.resolveSignMessage({ - responseId: e.responseId, - signature: signedMessage - }) -}) -``` - - - -Signing messages on Substrate works the same way as signing transactions - - diff --git a/sdk/apps/docs/docs/solana/connect.md b/sdk/apps/docs/docs/solana/connect.md index 9434bc22..6462ed07 100644 --- a/sdk/apps/docs/docs/solana/connect.md +++ b/sdk/apps/docs/docs/solana/connect.md @@ -6,7 +6,7 @@ slug: solana/connect import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. +To try Nightly Connect easily, just go to the Solana Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. :::info We have ready to use templates that you can try here. diff --git a/sdk/apps/docs/docs/substrate/connect.md b/sdk/apps/docs/docs/substrate/connect.md index 3e7ec6bf..b12a2138 100644 --- a/sdk/apps/docs/docs/substrate/connect.md +++ b/sdk/apps/docs/docs/substrate/connect.md @@ -6,7 +6,7 @@ slug: substrate/connect import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. +To try Nightly Connect easily, just go to the Aleph Zero Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. :::info We have ready to use templates that you can try here. diff --git a/sdk/apps/docs/docs/sui/connect.md b/sdk/apps/docs/docs/sui/connect.md index 61c8c710..dfaa5942 100644 --- a/sdk/apps/docs/docs/sui/connect.md +++ b/sdk/apps/docs/docs/sui/connect.md @@ -6,7 +6,7 @@ slug: sui/connect import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -The easiest way of trying nightly connect is by visiting the source code of the template web app for Solana, and following the implementation instructions. +To try Nightly Connect easily, just go to the Sui Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. :::info We have ready to use templates that you can try here. From abbf58ed42bc0b2ce15b648806ac452931b326a2 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 09:53:09 +0100 Subject: [PATCH 04/12] fix: path --- sdk/apps/docs/docs/home.md | 2 +- sdk/apps/docs/docusaurus.config.js | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/sdk/apps/docs/docs/home.md b/sdk/apps/docs/docs/home.md index 3bb54c72..9e7af76c 100644 --- a/sdk/apps/docs/docs/home.md +++ b/sdk/apps/docs/docs/home.md @@ -1,6 +1,6 @@ --- title: Home -slug: /home +slug: / --- ![Welcome to Nightly](../static/img/connect_landing_narrow.png) diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index bfad3221..18e4f20a 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -48,13 +48,12 @@ const config = { title: 'Nightly Connect', logo: { alt: 'Nightly Logo', - src: 'img/logo.png', - href: 'docs/home' + src: 'img/logo.png' }, items: [ { - to: 'docs/home', - activeBasePath: 'docs/home', + to: 'docs/', + activeBasePath: 'docs', label: 'Docs', position: 'left' }, From 45200c03ce82da1238b2967d09fb46cc63e45f83 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 09:58:59 +0100 Subject: [PATCH 05/12] fix: case discrepancies --- sdk/apps/docs/docs/customization/external_modal.md | 2 +- sdk/apps/docs/docs/customization/ui_overrides.md | 2 +- sdk/apps/docs/docs/start.md | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/sdk/apps/docs/docs/customization/external_modal.md b/sdk/apps/docs/docs/customization/external_modal.md index 188edc93..3aeb4a34 100644 --- a/sdk/apps/docs/docs/customization/external_modal.md +++ b/sdk/apps/docs/docs/customization/external_modal.md @@ -8,7 +8,7 @@ You may want to use your own design and/or change some logic for the modal. In t You can then use the modal connect function, instead of using the default one from the adapter. :::info -Example below is written for [Solana](../../solana/solana/connect), but you can use it for [SUI](../../sui/sui/connect) and [Substrate](../../substrate/substrate/connect) as well. +Example below is written for [Solana](../../solana/solana/connect), but you can use it for [Sui](../../sui/sui/connect) and [Substrate](../../substrate/substrate/connect) as well. ::: ```js diff --git a/sdk/apps/docs/docs/customization/ui_overrides.md b/sdk/apps/docs/docs/customization/ui_overrides.md index 93224452..52f0efde 100644 --- a/sdk/apps/docs/docs/customization/ui_overrides.md +++ b/sdk/apps/docs/docs/customization/ui_overrides.md @@ -120,5 +120,5 @@ const adapter = NightlyConnectAdapter.buildLazy( ``` :::info -The example is built using [Substrate](../../substrate/substrate/connect), but can be implemented using [Solana](../../solana/solana/connect) and [SUI](../../sui/sui/connect) as well. +The example is built using [Substrate](../../substrate/substrate/connect), but can be implemented using [Solana](../../solana/solana/connect) and [Sui](../../sui/sui/connect) as well. ::: diff --git a/sdk/apps/docs/docs/start.md b/sdk/apps/docs/docs/start.md index 36e74e24..67a2d075 100644 --- a/sdk/apps/docs/docs/start.md +++ b/sdk/apps/docs/docs/start.md @@ -37,7 +37,7 @@ yarn add @nightlylabs/wallet-selector-solana - + :::info Web template @@ -47,10 +47,10 @@ Preview: https://sui-web3-template.nightly.app/ Source code: https://github.com/nightly-labs/sui-web3-template ::: -If you want to opt for greater flexibility, install the package, as described below and then visit the [SUI Build & Connect](./sui/sui/connect). +If you want to opt for greater flexibility, install the package, as described below and then visit the [Sui Build & Connect](./sui/sui/connect). :::info -Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). +Simply integrate Nightly Connect to your application or wallet with our [Nightly Sui Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-sui). ```bash # Using NPM From 667020789aef1580a2b614627e9ddfd101f7f162 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 10:00:01 +0100 Subject: [PATCH 06/12] fix:typos --- sdk/apps/docs/docs/customization/ui_overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/apps/docs/docs/customization/ui_overrides.md b/sdk/apps/docs/docs/customization/ui_overrides.md index 52f0efde..a003c2fa 100644 --- a/sdk/apps/docs/docs/customization/ui_overrides.md +++ b/sdk/apps/docs/docs/customization/ui_overrides.md @@ -114,7 +114,7 @@ const adapter = NightlyConnectAdapter.buildLazy( color: 'gold' } } - // override the qr code cinfiguration + // override the qr code configuration } ) ``` From 5f8489650919df5b4640b0d730dd540136387844 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 10:03:26 +0100 Subject: [PATCH 07/12] remove unnecessary space --- sdk/apps/docs/docs/start.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/sdk/apps/docs/docs/start.md b/sdk/apps/docs/docs/start.md index 67a2d075..3f6ee7a6 100644 --- a/sdk/apps/docs/docs/start.md +++ b/sdk/apps/docs/docs/start.md @@ -27,10 +27,8 @@ Simply integrate Nightly Connect to your application or wallet with our [Nightly ```bash # Using NPM npm i @nightlylabs/wallet-selector-solana - # Using Yarn yarn add @nightlylabs/wallet-selector-solana - ``` ::: @@ -55,7 +53,6 @@ Simply integrate Nightly Connect to your application or wallet with our [Nightly ```bash # Using NPM npm i @nightlylabs/wallet-selector-sui - # Using Yarn yarn add @nightlylabs/wallet-selector-sui ``` @@ -82,10 +79,8 @@ Simply integrate Nightly Connect to your application or wallet with our [Nightly ```bash # Using NPM npm i @nightlylabs/wallet-selector-polkadot - # Using Yarn yarn add @nightlylabs/wallet-selector-polkadot - ``` ::: From af596659282aaba5eed7bd365e26476bdb0b1a07 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 13:03:12 +0100 Subject: [PATCH 08/12] fix: get started page and add: more ui features --- .../docs/docs/customization/external_modal.md | 2 +- .../docs/docs/customization/ui_overrides.md | 2 +- sdk/apps/docs/docs/solana/start.md | 38 ++++++ sdk/apps/docs/docs/start.md | 99 ++------------ sdk/apps/docs/docs/substrate/start.md | 38 ++++++ sdk/apps/docs/docs/sui/start.md | 37 ++++++ sdk/apps/docs/docusaurus.config.js | 14 +- sdk/apps/docs/sidebars.js | 25 +++- sdk/apps/docs/src/css/custom.css | 122 ++++++++++++++++-- 9 files changed, 268 insertions(+), 109 deletions(-) create mode 100644 sdk/apps/docs/docs/solana/start.md create mode 100644 sdk/apps/docs/docs/substrate/start.md create mode 100644 sdk/apps/docs/docs/sui/start.md diff --git a/sdk/apps/docs/docs/customization/external_modal.md b/sdk/apps/docs/docs/customization/external_modal.md index 3aeb4a34..9dc36f3c 100644 --- a/sdk/apps/docs/docs/customization/external_modal.md +++ b/sdk/apps/docs/docs/customization/external_modal.md @@ -8,7 +8,7 @@ You may want to use your own design and/or change some logic for the modal. In t You can then use the modal connect function, instead of using the default one from the adapter. :::info -Example below is written for [Solana](../../solana/solana/connect), but you can use it for [Sui](../../sui/sui/connect) and [Substrate](../../substrate/substrate/connect) as well. +Example below is written for [Solana](../../solana/solana/start), but you can use it for [Sui](../../sui/sui/start) and [Substrate](../../substrate/substrate/start) as well. ::: ```js diff --git a/sdk/apps/docs/docs/customization/ui_overrides.md b/sdk/apps/docs/docs/customization/ui_overrides.md index a003c2fa..d837ac62 100644 --- a/sdk/apps/docs/docs/customization/ui_overrides.md +++ b/sdk/apps/docs/docs/customization/ui_overrides.md @@ -120,5 +120,5 @@ const adapter = NightlyConnectAdapter.buildLazy( ``` :::info -The example is built using [Substrate](../../substrate/substrate/connect), but can be implemented using [Solana](../../solana/solana/connect) and [Sui](../../sui/sui/connect) as well. +The example is built using [Substrate](../../substrate/substrate/start), but can be implemented using [Solana](../../solana/solana/start) and [Sui](../../sui/sui/start) as well. ::: diff --git a/sdk/apps/docs/docs/solana/start.md b/sdk/apps/docs/docs/solana/start.md new file mode 100644 index 00000000..f25058bd --- /dev/null +++ b/sdk/apps/docs/docs/solana/start.md @@ -0,0 +1,38 @@ +--- +title: Get started with Solana +slug: solana/start +--- + +### Web template + +
+ +**To get started with solana, use the source code of the template below, and follow the installation instructions.** + +
+ +> #### Preview: https://solana-web3-template.nightly.app + +
+ +> #### Source code: https://github.com/nightly-labs/solana-web3-template + +
+ +
+ +### Manual installation + +If you want to opt for greater flexibility, install the package, as described below and then visit the [Solana Build & Connect](./connect). + +:::note +Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-solana +# Using Yarn +yarn add @nightlylabs/wallet-selector-solana +``` + +::: diff --git a/sdk/apps/docs/docs/start.md b/sdk/apps/docs/docs/start.md index 3f6ee7a6..3a390a7c 100644 --- a/sdk/apps/docs/docs/start.md +++ b/sdk/apps/docs/docs/start.md @@ -3,88 +3,17 @@ title: Getting started slug: /start --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -To get started, we recommend using the instructions in the source code of the template for each supported chain. - - - - -:::info -Web template - -Preview: https://solana-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/solana-web3-template -::: - -If you want to opt for greater flexibility, install the package, as described below and then visit the [Solana Build & Connect](./solana/connect.md). - -:::info -Simply integrate Nightly Connect to your application or wallet with our [Nightly Solana Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-solana). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-solana -# Using Yarn -yarn add @nightlylabs/wallet-selector-solana -``` - -::: - - - - - -:::info -Web template - -Preview: https://sui-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/sui-web3-template -::: - -If you want to opt for greater flexibility, install the package, as described below and then visit the [Sui Build & Connect](./sui/sui/connect). - -:::info -Simply integrate Nightly Connect to your application or wallet with our [Nightly Sui Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-sui). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-sui -# Using Yarn -yarn add @nightlylabs/wallet-selector-sui -``` - -::: - - - - - -:::info -Web template - -Preview: https://aleph-zero-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/aleph-zero-web3-template -::: - -If you want to opt for greater flexibility, install the package, as described below and then visit the [Substrate Build & Connect](./substrate/substrate/connect). - -:::info -Simply integrate Nightly Connect to your application or wallet with our [Nightly Polkadot Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-polkadot). - -```bash -# Using NPM -npm i @nightlylabs/wallet-selector-polkadot -# Using Yarn -yarn add @nightlylabs/wallet-selector-polkadot -``` - -::: - - - - +
+ + + Solana + + + + Sui + + + + Substrate + +
diff --git a/sdk/apps/docs/docs/substrate/start.md b/sdk/apps/docs/docs/substrate/start.md new file mode 100644 index 00000000..b6598e14 --- /dev/null +++ b/sdk/apps/docs/docs/substrate/start.md @@ -0,0 +1,38 @@ +--- +title: Get started with Substrate +slug: substrate/start +--- + +### Web template + +
+ +**To get started with substrate, use the source code of the template below, and follow the installation instructions.** + +
+ +> #### Preview: https://aleph-zero-web3-template.nightly.app + +
+ +> #### Source code: https://github.com/nightly-labs/aleph-zero-web3-template + +
+ +
+ +### Manual installation + +If you want to opt for greater flexibility, install the package, as described below and then visit the [Substrate Build & Connect](./connect). + +:::note +Simply integrate Nightly Connect to your application or wallet with our [Nightly Polkadot Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-polkadot). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-polkadot +# Using Yarn +yarn add @nightlylabs/wallet-selector-polkadot +``` + +::: diff --git a/sdk/apps/docs/docs/sui/start.md b/sdk/apps/docs/docs/sui/start.md new file mode 100644 index 00000000..1d6d74bd --- /dev/null +++ b/sdk/apps/docs/docs/sui/start.md @@ -0,0 +1,37 @@ +--- +title: Get started with Sui +slug: sui/start +--- + +### Web template + +
+ +**To get started with substrate, use the source code of the template below, and follow the installation instructions.** + +
+ +> #### Preview: https://sui-web3-template.nightly.app + +
+ +> #### Source code: https://github.com/nightly-labs/sui-web3-template + +
+
+ +### Manual installation + +If you want to opt for greater flexibility, install the package, as described below and then visit the [Sui Build & Connect](./connect). + +:::note +Simply integrate Nightly Connect to your application or wallet with our [Nightly Sui Connect package](https://www.npmjs.com/package/@nightlylabs/wallet-selector-sui). + +```bash +# Using NPM +npm i @nightlylabs/wallet-selector-sui +# Using Yarn +yarn add @nightlylabs/wallet-selector-sui +``` + +::: diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index 18e4f20a..666c15d7 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -64,20 +64,20 @@ const config = { position: 'left' }, { - to: 'docs/solana/solana/connect', - activeBasePath: 'docs/solana/solana/connect', + to: 'docs/solana/solana/start', + activeBasePath: 'docs/solana/solana/start', label: 'Solana', position: 'left' }, { - to: 'docs/sui/sui/connect', - activeBasePath: 'docs/sui/sui/connect', - label: 'SUI', + to: 'docs/sui/sui/start', + activeBasePath: 'docs/sui/sui/start', + label: 'Sui', position: 'left' }, { - to: 'docs/substrate/substrate/connect', - activeBasePath: 'docs/substrate/substrate/connect', + to: 'docs/substrate/substrate/start', + activeBasePath: 'docs/substrate/substrate/start', label: 'Substrate', position: 'left' }, diff --git a/sdk/apps/docs/sidebars.js b/sdk/apps/docs/sidebars.js index 1092fdc1..3a57729b 100644 --- a/sdk/apps/docs/sidebars.js +++ b/sdk/apps/docs/sidebars.js @@ -19,24 +19,39 @@ const sidebars = { 'start', { type: 'category', - label: 'Solana', + className: 'drop solana-dropdown', + label: ' Solana', collapsed: false, - items: ['solana/connect', 'solana/events', 'solana/sign_transaction', 'solana/sign_message'] + items: [ + 'solana/start', + 'solana/connect', + 'solana/events', + 'solana/sign_transaction', + 'solana/sign_message' + ] }, { type: 'category', - label: 'SUI', + className: 'drop sui-dropdown', + label: 'Sui', collapsed: false, - items: ['sui/connect', 'sui/events', 'sui/sign_transaction', 'sui/sign_message'] + items: ['sui/start', 'sui/connect', 'sui/events', 'sui/sign_transaction', 'sui/sign_message'] }, { type: 'category', + className: 'drop substrate-dropdown', label: 'Substrate', collapsed: false, - items: ['substrate/connect', 'substrate/sign_transaction', 'substrate/sign_message'] + items: [ + 'substrate/start', + 'substrate/connect', + 'substrate/sign_transaction', + 'substrate/sign_message' + ] }, { type: 'category', + // className: 'customization-dropdown', label: 'Customization', collapsed: false, items: ['customization/ui_overrides', 'customization/external_modal'] diff --git a/sdk/apps/docs/src/css/custom.css b/sdk/apps/docs/src/css/custom.css index 374bc0c5..922d18ac 100644 --- a/sdk/apps/docs/src/css/custom.css +++ b/sdk/apps/docs/src/css/custom.css @@ -7,11 +7,11 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #6067F9; - --ifm-color-white: #F7F7F7; - --ifm-color-black : #17182B; - --ifm-color-background : #343551; - --ifm-code-font-size: 95%; + --ifm-color-primary: #6067f9; + --ifm-color-white: #f7f7f7; + --ifm-color-black: #17182b; + --ifm-color-background: #343551; + --ifm-code-font-size: 95%; } .docusaurus-highlight-code-line { @@ -23,12 +23,12 @@ [data-theme='dark'] { background-color: var(--ifm-color-black); - color: var(--ifm-color-white) + color: var(--ifm-color-white); } [data-theme='light'] { background-color: var(--ifm-color-white); - color: var(--ifm-color-black) + color: var(--ifm-color-black); } .theme-admonition { @@ -40,17 +40,119 @@ .theme-admonition a { color: var(--ifm-color-primary); - text-decoration: none + text-decoration: none; } -[data-theme='dark'] .navbar{ +[data-theme='dark'] .navbar { background-color: #202137; } -img[src*="#connectImage"] { +img[src*='#connectImage'] { margin-left: 30%; width: 360px; height: 260px; border-radius: 8px; } +.start_card_container { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 20px; +} + +@media screen and (max-width: 1300px) and (min-width: 996px) { + .start_card_container { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + } +} + +@media screen and (max-width: 996px) and (min-width: 800px) { + .start_card_container { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + } +} + +@media screen and (max-width: 800px) { + .start_card_container { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + } +} + +.card { + min-height: 200px; + border: solid var(--ifm-color-background) 2px; + background: linear-gradient(45deg, rgba(96, 103, 249, 0.07), transparent); + background-size: 200%; + background-position: 100%; + text-decoration: none; + color: var(--ifm-color-white); + padding: 20px; + padding-left: 50px; + display: flex; + flex-direction: row; + gap: 30px; + justify-content: flex-start; + align-items: center; + font-size: 2em; + transition: all 250ms; +} +.card > img { + width: 80px; +} +.card:hover { + background-position: 0%; + text-decoration: none; + color: var(--ifm-color-white); +} + +@media screen and (max-width: 500px) { + .card { + font-size: 1.5em; + gap: 20px; + padding-left: 30px; + min-height: 150px; + } + + .card > img { + width: 70px; + } +} +.drop > div { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.drop > div::before { + content: ''; + background-size: cover; + height: 22px; + margin-left: 10px; + margin-right: -5px; + aspect-ratio: 1/1; + border-radius: 50%; +} + +.solana-dropdown > div::before { + background-image: url('https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png'); +} + +.sui-dropdown > div::before { + background-image: url('https://registry.nightly.app/networks/sui.png'); +} + +.substrate-dropdown > div::before { + background-image: url('https://registry.nightly.app/networks/polkadot.png'); +} + +.highlight-template { + padding: 30px; + border-radius: 10px; + border: solid var(--ifm-color-primary) 2px; + background: linear-gradient(45deg, rgba(96, 103, 249, 0.1), transparent); +} From a67d471e20afb6d0d7d9537a4ce51974a572f1e7 Mon Sep 17 00:00:00 2001 From: LukassF Date: Fri, 1 Mar 2024 13:10:17 +0100 Subject: [PATCH 09/12] fix: light mode color --- sdk/apps/docs/src/css/custom.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/sdk/apps/docs/src/css/custom.css b/sdk/apps/docs/src/css/custom.css index 922d18ac..99ca46e5 100644 --- a/sdk/apps/docs/src/css/custom.css +++ b/sdk/apps/docs/src/css/custom.css @@ -110,6 +110,10 @@ img[src*='#connectImage'] { color: var(--ifm-color-white); } +[data-theme='light'] .card { + color: black !important; +} + @media screen and (max-width: 500px) { .card { font-size: 1.5em; From bba95269546fe2e27f51109e503e568774b75896 Mon Sep 17 00:00:00 2001 From: LukassF Date: Mon, 4 Mar 2024 15:46:47 +0100 Subject: [PATCH 10/12] fix: move client to seperate tab --- sdk/apps/docs/docs/for_wallets/connect.md | 124 +++++++++++++++ sdk/apps/docs/docs/{ => for_wallets}/push.md | 2 +- .../docs/{sui => for_wallets}/sign_message.md | 36 ++++- .../docs/docs/for_wallets/sign_transaction.md | 112 ++++++++++++++ sdk/apps/docs/docs/solana/connect.md | 89 ----------- sdk/apps/docs/docs/solana/sign_message.md | 21 --- sdk/apps/docs/docs/solana/sign_transaction.md | 41 ----- sdk/apps/docs/docs/substrate/connect.md | 93 ------------ sdk/apps/docs/docs/substrate/sign_message.md | 8 - .../docs/docs/substrate/sign_transaction.md | 33 ---- sdk/apps/docs/docs/sui/connect.md | 142 +++--------------- sdk/apps/docs/docs/sui/sign_transaction.md | 65 -------- sdk/apps/docs/docusaurus.config.js | 6 +- sdk/apps/docs/sidebars.js | 32 ++-- 14 files changed, 313 insertions(+), 491 deletions(-) create mode 100644 sdk/apps/docs/docs/for_wallets/connect.md rename sdk/apps/docs/docs/{ => for_wallets}/push.md (98%) rename sdk/apps/docs/docs/{sui => for_wallets}/sign_message.md (58%) create mode 100644 sdk/apps/docs/docs/for_wallets/sign_transaction.md delete mode 100644 sdk/apps/docs/docs/solana/sign_message.md delete mode 100644 sdk/apps/docs/docs/substrate/sign_message.md diff --git a/sdk/apps/docs/docs/for_wallets/connect.md b/sdk/apps/docs/docs/for_wallets/connect.md new file mode 100644 index 00000000..4d65390b --- /dev/null +++ b/sdk/apps/docs/docs/for_wallets/connect.md @@ -0,0 +1,124 @@ +--- +title: Build & Connect +slug: for_wallets/connect +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +:::info +This part of documentation is targeted to clients/wallets that want to enable nightly connect +as way of interaction with external applications. +::: + +To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. + +After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). + +Once client decides to connect and approves the request, call the `connect()` method. + +```js +export interface AppMetadata { + name: string; + url?: string; + description?: string; + icon?: string; + additionalInfo?: string; +} + +interface GetInfoResponse { + responseId: string; + network: Network; + version: Version; // string + appMetadata: AppMetadata; +} + +type Connect = { + publicKeys: string[], + sessionId: string, + notification?: Notification | undefined, // for notification purposes + device?: Device | undefined, + metadata?: string | undefined +} +``` + +### Build & Connect + + + + +```js +import { ClientSolana } from '@nightlylabs/nightly-connect-solana' + +const client: ClientSolana = await ClientSolana.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: [ + '9mtkm594sexac7G6jct3PZqyEVe3eUWMx6SUcEhYBRxr', + '8MtpTNvQfr7iAWYLjJeyMw19vHw7bx7jrmoamkootfvA' + ], + sessionId: sessionId +} +await client.connect(message) +``` + + + + + +```js +import { ClientSui } from '@nightlylabs/nightly-connect-sui' + +const client: ClientSui = await ClientSui.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: [ + '0x9353aa5322295a6542b69a05e873177b2594373a5ac58efa5055562630434a9e', + '0x46f4dba3f180b8237119989d798c108f5d4c87b6aea02e6a093dd402a07083bd' + ], + sessionId: sessionId +} +await client.connect(message) +``` + + + + +```js +import { ClientPolkadot } from '@nightlylabs/nightly-connect-polkadot' + +const client: ClientPolkadot = await ClientPolkadot.create({ + url: RELAY_ENDPOINT // default: https://nc2.nightly.app +}) +const info: GetInfoResponse = await client.getInfo(sessionId) + +const message: Connect = { + publicKeys: ['5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH'], + sessionId: sessionId, + walletsMetadata: [ + { + address: '5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH', + name: 'Alice', + type: 'ed25519' + } + ] +} +await client.connect(message) +``` + + + + +### Disconnect + +:::info +Both client and application can initiate disconnection.
+Though when it is the client who disconnects, the session will not be terminated.
+Only when application disconnects, the session will be closed. +::: diff --git a/sdk/apps/docs/docs/push.md b/sdk/apps/docs/docs/for_wallets/push.md similarity index 98% rename from sdk/apps/docs/docs/push.md rename to sdk/apps/docs/docs/for_wallets/push.md index ab38466a..b88c6201 100644 --- a/sdk/apps/docs/docs/push.md +++ b/sdk/apps/docs/docs/for_wallets/push.md @@ -1,6 +1,6 @@ --- title: Push notifications -slug: push +slug: for_wallets/push --- :::info diff --git a/sdk/apps/docs/docs/sui/sign_message.md b/sdk/apps/docs/docs/for_wallets/sign_message.md similarity index 58% rename from sdk/apps/docs/docs/sui/sign_message.md rename to sdk/apps/docs/docs/for_wallets/sign_message.md index 3f9ed957..4275ca65 100644 --- a/sdk/apps/docs/docs/sui/sign_message.md +++ b/sdk/apps/docs/docs/for_wallets/sign_message.md @@ -1,10 +1,36 @@ --- -title: Sign Message -slug: sui/sign_message +title: Sign Messages +slug: for_wallets/sign_message --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. + + + + +```js +import nacl from 'tweetnacl' + +client.on('signMessages', async (e) => { + const msg = e.messages[0].message + const encoded = Uint8Array.from(sha256.array(msg)) + const signature = nacl.sign.detached(encoded, alice_keypair.secretKey) + // resolve + await client.resolveSignMessage({ + requestId: e.responseId, + signature: signature + }) +}) +``` + + + + + ```js import { fromB64, @@ -36,3 +62,9 @@ client.on('signMessages', async (e) => { }) }) ``` + + + +Signing messages on Substrate works the same way as signing transactions + + diff --git a/sdk/apps/docs/docs/for_wallets/sign_transaction.md b/sdk/apps/docs/docs/for_wallets/sign_transaction.md new file mode 100644 index 00000000..52a2cbaf --- /dev/null +++ b/sdk/apps/docs/docs/for_wallets/sign_transaction.md @@ -0,0 +1,112 @@ +--- +title: Sign Transaction +slug: for_wallets/sign_transaction +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. + +When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. +To resolve the transaction client needs to pass in requestId and signed transaction. + + + + + +```js +import { Keypair, Transaction } from '@solana/web3.js' + +interface SignSolanaTransactionEvent { + requestId: string + transactions: Array + sessionId: string +} + +const alice_keypair = Keypair.generate() + +client.on('signTransactions', async (e) => { + const tx = e.transactions[0] + tx.sign([alice_keypair]) + // resolve + await client.resolveSignTransaction({ + requestId: e.requestId, + signedTransactions: [tx] + }) +}) + +``` + + + + + +```js +import { + Ed25519Keypair, + messageWithIntent, + toB64, + toSerializedSignature, + TransactionBlock, +} from '@mysten/sui.js' +import { blake2b } from '@noble/hashes/blake2b' + +interface SignSuiTransactionEvent { + sessionId: string + requestId: string + transactions: Array +} + +const alice_keypair: Ed25519Keypair = Ed25519Keypair.fromSecretKey(hexToBytes(ALICE_PRIVE_KEY)) + +client.on('signTransactions', async (e) => { + const tx = e.transactions[0].transaction + const transactionBlockBytes = await TransactionBlock.from(tx).build({ + provider: suiConnection, + onlyTransactionKind: true + }) + + const intentMessage = messageWithIntent(IntentScope.TransactionData, transactionBlockBytes) + const digest = blake2b(intentMessage, { dkLen: 32 }) + const signatureArray = alice_keypair.signData(digest) + const signature = toSerializedSignature({ + signature: signatureArray, // Uint8Array + signatureScheme: 'ED25519', // SignatureScheme + pubKey: alice_keypair.getPublicKey() // PublicKey + }) + + // resolve + await client.resolveSignTransaction({ + responseId: e.requestId, + signedTransactions: [ + { + transactionBlockBytes: toB64(transactionBlockBytes), + signature: signature + } + ] + }) +}) +``` + + + + +```js + +const alice_keypair = new Keyring() +alice_keypair.setSS58Format(42) +const aliceKeyringPair = alice_keypair.createFromUri('//Alice') + +client.on('signTransactions', async (e) => { + const payload = e.transactions[0] as SignerPayloadRaw + const signature = aliceKeyringPair.sign(payload.data, { withType: true }) + await client.resolveSignTransaction({ + requestId: e.requestId, + signedTransactions: [{ signature: u8aToHex(signature), id: new Date().getTime() }] + }) +}) +``` + + + diff --git a/sdk/apps/docs/docs/solana/connect.md b/sdk/apps/docs/docs/solana/connect.md index 6462ed07..1b6bf11f 100644 --- a/sdk/apps/docs/docs/solana/connect.md +++ b/sdk/apps/docs/docs/solana/connect.md @@ -3,92 +3,6 @@ title: Build & Connect slug: solana/connect --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -To try Nightly Connect easily, just go to the Solana Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. - -:::info -We have ready to use templates that you can try here. - -Preview: https://solana-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/solana-web3-template -::: - -If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. - - - - -:::info -This part of documentation is targeted to clients/ wallets that want to enable nightly connect -as way of interaction with external applications. -::: - -To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. - -After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). - -Once client decides to connect and approves the request, call the `connect()` method. - -```js -export interface AppMetadata { - name: string; - url?: string; - description?: string; - icon?: string; - additionalInfo?: string; -} - -interface GetInfoResponse { - responseId: string; - network: Network; - version: Version; // string - appMetadata: AppMetadata; -} - -type Connect = { - publicKeys: string[], - sessionId: string, - notification?: Notification | undefined, // for notification purposes - device?: Device | undefined, - metadata?: string | undefined -} -``` - -### Build & Connect - -```js -import { ClientSolana } from '@nightlylabs/nightly-connect-solana' - -const client: ClientSolana = await ClientSolana.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: [ - '9mtkm594sexac7G6jct3PZqyEVe3eUWMx6SUcEhYBRxr', - '8MtpTNvQfr7iAWYLjJeyMw19vHw7bx7jrmoamkootfvA' - ], - sessionId: sessionId -} -await client.connect(message) -``` - -### Disconnect - -:::info -Both client and application can initiate disconnection.
-Though when it is the client who disconnects, the session will not be terminated.
-Only when application disconnects, the session will be closed. -::: - - - - - :::info This part of documentation is targeted to applications that want to implement nightly connect as wallet interface. @@ -211,6 +125,3 @@ Both client and application can initiate disconnection. User can force session termination in case of abuse. Only when application disconnects and session is not persistent, session is completely removed. ::: - - - diff --git a/sdk/apps/docs/docs/solana/sign_message.md b/sdk/apps/docs/docs/solana/sign_message.md deleted file mode 100644 index fcf3a62c..00000000 --- a/sdk/apps/docs/docs/solana/sign_message.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Sign Message -slug: solana/sign_message ---- - -Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. - -```js -import nacl from 'tweetnacl' - -client.on('signMessages', async (e) => { - const msg = e.messages[0].message - const encoded = Uint8Array.from(sha256.array(msg)) - const signature = nacl.sign.detached(encoded, alice_keypair.secretKey) - // resolve - await client.resolveSignMessage({ - requestId: e.responseId, - signature: signature - }) -}) -``` diff --git a/sdk/apps/docs/docs/solana/sign_transaction.md b/sdk/apps/docs/docs/solana/sign_transaction.md index aadcc517..d3edd3a4 100644 --- a/sdk/apps/docs/docs/solana/sign_transaction.md +++ b/sdk/apps/docs/docs/solana/sign_transaction.md @@ -3,44 +3,6 @@ title: Sign Transaction slug: solana/sign_transaction --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - - - -Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. - -When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. -To resolve the transaction client needs to pass in requestId and signed transaction. - -```js -import { Keypair, Transaction } from '@solana/web3.js' - -interface SignSolanaTransactionEvent { - requestId: string - transactions: Array - sessionId: string -} - -const alice_keypair = Keypair.generate() - -client.on('signTransactions', async (e) => { - const tx = e.transactions[0] - tx.sign([alice_keypair]) - // resolve - await client.resolveSignTransaction({ - requestId: e.requestId, - signedTransactions: [tx] - }) -}) - -``` - - - - - Sending a signTransaction requires established connection with user wallet. Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransaction()` method returns resolved promise with Signed Transaction. @@ -66,6 +28,3 @@ tx.recentBlockhash = recentBlockhash const signed: VersionedTransaction = await app.signTransaction(tx) ``` - - - diff --git a/sdk/apps/docs/docs/substrate/connect.md b/sdk/apps/docs/docs/substrate/connect.md index b12a2138..b4014f42 100644 --- a/sdk/apps/docs/docs/substrate/connect.md +++ b/sdk/apps/docs/docs/substrate/connect.md @@ -3,96 +3,6 @@ title: Build & Connect slug: substrate/connect --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -To try Nightly Connect easily, just go to the Aleph Zero Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. - -:::info -We have ready to use templates that you can try here. - -Preview: https://aleph-zero-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/aleph-zero-web3-template -::: - -If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. - - - - -:::info -This part of documentation is targeted to clients/ wallets that want to enable nightly connect -as way of interaction with external applications. -::: - -To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. - -After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). - -Once client decides to connect and approves the request, call the `connect()` method. - -```js -export interface AppMetadata { - name: string; - url?: string; - description?: string; - icon?: string; - additionalInfo?: string; -} - -interface GetInfoResponse { - responseId: string; - network: Network; - version: Version; // string - appMetadata: AppMetadata; -} - -type Connect = { - publicKeys: string[], - sessionId: string, - notification?: Notification | undefined, // for notification purposes - device?: Device | undefined, - metadata?: string | undefined -} -``` - -### Build & Connect - -```js -import { ClientPolkadot } from '@nightlylabs/nightly-connect-polkadot' - -const client: ClientPolkadot = await ClientPolkadot.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: ['5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH'], - sessionId: sessionId, - walletsMetadata: [ - { - address: '5EnRWxJwqLuexBZtbJVTmfAzzc6Fwpw2Gv9AYs1gYHsgvzfH', - name: 'Alice', - type: 'ed25519' - } - ] -} -await client.connect(message) -``` - -### Disconnect - -:::info -Both client and application can initiate disconnection.
-Though when it is the client who disconnects, the session will not be terminated.
-Only when application disconnects, the session will be closed. -::: - - - - - :::info This part of documentation is targeted to applications that want to implement nightly connect as wallet interface. @@ -174,6 +84,3 @@ Both client and application can initiate disconnection. User can force session termination in case of abuse. Only when application disconnects and session is not persistent, session is completely removed. ::: - - - diff --git a/sdk/apps/docs/docs/substrate/sign_message.md b/sdk/apps/docs/docs/substrate/sign_message.md deleted file mode 100644 index 24a1734f..00000000 --- a/sdk/apps/docs/docs/substrate/sign_message.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Sign Message -slug: substrate/sign_message ---- - -Client can listen to the event `client.on('signMessages')`, which will returns user requests to sign messages. To resolve the transaction client needs to pass in requestId and signed message. - -Signing messages on Substrate works the same way as signing transactions diff --git a/sdk/apps/docs/docs/substrate/sign_transaction.md b/sdk/apps/docs/docs/substrate/sign_transaction.md index d8cbf75c..e43e5808 100644 --- a/sdk/apps/docs/docs/substrate/sign_transaction.md +++ b/sdk/apps/docs/docs/substrate/sign_transaction.md @@ -3,36 +3,6 @@ title: Sign Transaction slug: substrate/sign_transaction --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - - - -Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. - -When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. -To resolve the transaction client needs to pass in requestId and signed transaction. - -```js -const alice_keypair = new Keyring() -alice_keypair.setSS58Format(42) -const aliceKeyringPair = alice_keypair.createFromUri('//Alice') - -client.on('signTransactions', async (e) => { - const payload = e.transactions[0] as SignerPayloadRaw - const signature = aliceKeyringPair.sign(payload.data, { withType: true }) - await client.resolveSignTransaction({ - requestId: e.requestId, - signedTransactions: [{ signature: u8aToHex(signature), id: new Date().getTime() }] - }) -}) -``` - - - - - Nightly connect automatically turns into remote signer after connection from client (Mobile/Extension). Signing transaction is as simple as passing `signer` object @@ -44,6 +14,3 @@ const signed = await payload.signAsync(SENDER, { signer: adapter.signer }) // Send transaction await signed.send() ``` - - - diff --git a/sdk/apps/docs/docs/sui/connect.md b/sdk/apps/docs/docs/sui/connect.md index dfaa5942..086a0472 100644 --- a/sdk/apps/docs/docs/sui/connect.md +++ b/sdk/apps/docs/docs/sui/connect.md @@ -3,92 +3,6 @@ title: Build & Connect slug: sui/connect --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -To try Nightly Connect easily, just go to the Sui Web3 template app's source code and follow the instructions there. It's the quickest way to get started and explore its features. - -:::info -We have ready to use templates that you can try here. - -Preview: https://sui-web3-template.nightly.app/ - -Source code: https://github.com/nightly-labs/sui-web3-template -::: - -If you wish to enable nightly connect as a way of interacting with external applications, or to implement it as a wallet interface, use one of the ways below. - - - - -:::info -This part of documentation is targeted to clients/ wallets that want to enable nightly connect -as way of interaction with external applications. -::: - -To get started, first we establish Connection with server `create()`. This enables use interactions with our sessions. - -After that we can query session info with `getInfo()`, which requires 1 argument, sessionId (the one from the QR code). - -Once client decides to connect and approves the request, call the `connect()` method. - -```js -export interface AppMetadata { - name: string; - url?: string; - description?: string; - icon?: string; - additionalInfo?: string; -} - -interface GetInfoResponse { - responseId: string; - network: Network; - version: Version; // string - appMetadata: AppMetadata; -} - -type Connect = { - publicKeys: string[], - sessionId: string, - notification?: Notification | undefined, // for notification purposes - device?: Device | undefined, - metadata?: string | undefined -} -``` - -### Build & Connect - -```js -import { ClientSui } from '@nightlylabs/nightly-connect-sui' - -const client: ClientSui = await ClientSui.create({ - url: RELAY_ENDPOINT // default: https://nc2.nightly.app -}) -const info: GetInfoResponse = await client.getInfo(sessionId) - -const message: Connect = { - publicKeys: [ - '0x9353aa5322295a6542b69a05e873177b2594373a5ac58efa5055562630434a9e', - '0x46f4dba3f180b8237119989d798c108f5d4c87b6aea02e6a093dd402a07083bd' - ], - sessionId: sessionId -} -await client.connect(message) -``` - -### Disconnect - -:::info -Both client and application can initiate disconnection.
-Though when it is the client who disconnects, the session will not be terminated.
-Only when application disconnects, the session will be closed. -::: - - - - - :::info This part of documentation is targeted to applications that want to implement nightly connect as wallet interface. @@ -137,36 +51,31 @@ interface ConnectionOptions { ``` ```js -import { WalletStandardAdapterProvider } from '@mysten/wallet-adapter-wallet-standard' -import { WalletKitProvider } from '@mysten/wallet-kit' import { NightlyConnectSuiAdapter } from '@nightlylabs/wallet-selector-sui' -import dynamic from 'next/dynamic' -export const SuiProvider = ({ children }: any) => { - return ( - - {children} - - ) -} -export default dynamic(() => Promise.resolve(SuiProvider), { - ssr: false -}) + +const adapter = NightlyConnectSuiAdapter.buildLazy( + { + appMetadata: { + name: 'NCTestSui', + description: 'Nightly Connect Test', + icon: 'https://docs.nightly.app/img/logo.png', + additionalInfo: 'Courtesy of Nightly Connect team' + } + // persistent: false - Add this if you want to make the session non-persistent + } + // { initOnConnect: true, disableModal: true, disableEagerConnect: true } - You may specify the connection options object here + // document.getElementById("modalAnchor") - You can pass an optional anchor element for the modal here +) + +// Trigger connection +await adapter.connect() +// After connection adapter turns into remote signer + +// Sign transaction +await adapter.signAndExecuteTransactionBlock() + +// Disconnect client if you want to end session +await adapter.disconnect() ``` ### Disconnect @@ -176,6 +85,3 @@ Both client and application can initiate disconnection. User can force session termination in case of abuse. Only when application disconnects and session is not persistent, session is completely removed. ::: - - - diff --git a/sdk/apps/docs/docs/sui/sign_transaction.md b/sdk/apps/docs/docs/sui/sign_transaction.md index f09adf4b..e86bf854 100644 --- a/sdk/apps/docs/docs/sui/sign_transaction.md +++ b/sdk/apps/docs/docs/sui/sign_transaction.md @@ -3,68 +3,6 @@ title: Sign Transaction slug: sui/sign_transaction --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - - - -Client is listening to the event `client.on('signTransactions')`, which returns data about transactions that are being requested. - -When user accepts and signs a transaction with keyPair, the transaction is approved and sent to the blockchain. -To resolve the transaction client needs to pass in requestId and signed transaction. - -```js -import { - Ed25519Keypair, - messageWithIntent, - toB64, - toSerializedSignature, - TransactionBlock, -} from '@mysten/sui.js' -import { blake2b } from '@noble/hashes/blake2b' - -interface SignSuiTransactionEvent { - sessionId: string - requestId: string - transactions: Array -} - -const alice_keypair: Ed25519Keypair = Ed25519Keypair.fromSecretKey(hexToBytes(ALICE_PRIVE_KEY)) - -client.on('signTransactions', async (e) => { - const tx = e.transactions[0].transaction - const transactionBlockBytes = await TransactionBlock.from(tx).build({ - provider: suiConnection, - onlyTransactionKind: true - }) - - const intentMessage = messageWithIntent(IntentScope.TransactionData, transactionBlockBytes) - const digest = blake2b(intentMessage, { dkLen: 32 }) - const signatureArray = alice_keypair.signData(digest) - const signature = toSerializedSignature({ - signature: signatureArray, // Uint8Array - signatureScheme: 'ED25519', // SignatureScheme - pubKey: alice_keypair.getPublicKey() // PublicKey - }) - - // resolve - await client.resolveSignTransaction({ - responseId: e.requestId, - signedTransactions: [ - { - transactionBlockBytes: toB64(transactionBlockBytes), - signature: signature - } - ] - }) -}) -``` - - - - - Sending a signTransaction requires established connection with user wallet. Transaction are sent to the client via wallet interface. Client can accept or reject the request. Once client signs transaction, `signTransactionBlock()` method returns resolved promise with Signed Transaction. @@ -83,6 +21,3 @@ const signedTx: SignedTransaction = await app.signTransactionBlock({ chain: 'sui:testnet' // IdentifierString }) ``` - - - diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index 666c15d7..9029839b 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -88,9 +88,9 @@ const config = { position: 'left' }, { - to: 'docs/push/', - activeBasePath: 'docs/push/', - label: 'Push', + to: 'docs/for_wallets/for_wallets/connect', + activeBasePath: 'docs/for_wallets/for_wallets/connect', + label: 'For wallets', position: 'left' }, { diff --git a/sdk/apps/docs/sidebars.js b/sdk/apps/docs/sidebars.js index 3a57729b..995ce1f6 100644 --- a/sdk/apps/docs/sidebars.js +++ b/sdk/apps/docs/sidebars.js @@ -22,41 +22,39 @@ const sidebars = { className: 'drop solana-dropdown', label: ' Solana', collapsed: false, - items: [ - 'solana/start', - 'solana/connect', - 'solana/events', - 'solana/sign_transaction', - 'solana/sign_message' - ] + items: ['solana/start', 'solana/connect', 'solana/events', 'solana/sign_transaction'] }, { type: 'category', className: 'drop sui-dropdown', label: 'Sui', collapsed: false, - items: ['sui/start', 'sui/connect', 'sui/events', 'sui/sign_transaction', 'sui/sign_message'] + items: ['sui/start', 'sui/connect', 'sui/events', 'sui/sign_transaction'] }, { type: 'category', className: 'drop substrate-dropdown', label: 'Substrate', collapsed: false, - items: [ - 'substrate/start', - 'substrate/connect', - 'substrate/sign_transaction', - 'substrate/sign_message' - ] + items: ['substrate/start', 'substrate/connect', 'substrate/sign_transaction'] }, { type: 'category', - // className: 'customization-dropdown', label: 'Customization', - collapsed: false, + collapsed: true, items: ['customization/ui_overrides', 'customization/external_modal'] }, - 'push' + { + type: 'category', + label: 'For wallets', + collapsed: true, + items: [ + 'for_wallets/connect', + 'for_wallets/sign_transaction', + 'for_wallets/sign_message', + 'for_wallets/push' + ] + } ] // But you can create a sidebar manually From e4566afeb7ff3686671138af492e88f1eb197bc0 Mon Sep 17 00:00:00 2001 From: LukassF Date: Mon, 4 Mar 2024 15:53:58 +0100 Subject: [PATCH 11/12] fix: signTransactionBlock --- sdk/apps/docs/docs/sui/connect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/apps/docs/docs/sui/connect.md b/sdk/apps/docs/docs/sui/connect.md index 086a0472..04294b8e 100644 --- a/sdk/apps/docs/docs/sui/connect.md +++ b/sdk/apps/docs/docs/sui/connect.md @@ -72,7 +72,7 @@ await adapter.connect() // After connection adapter turns into remote signer // Sign transaction -await adapter.signAndExecuteTransactionBlock() +await adapter.signTransactionBlock() // Disconnect client if you want to end session await adapter.disconnect() From feb155a10a11e9cf05e58bad9a858998fcca4692 Mon Sep 17 00:00:00 2001 From: LukassF Date: Mon, 4 Mar 2024 16:30:17 +0100 Subject: [PATCH 12/12] add: demo links and navbar images --- sdk/apps/docs/docs/demo.md | 0 sdk/apps/docs/docusaurus.config.js | 15 +++++++++--- sdk/apps/docs/src/css/custom.css | 39 ++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 sdk/apps/docs/docs/demo.md diff --git a/sdk/apps/docs/docs/demo.md b/sdk/apps/docs/docs/demo.md new file mode 100644 index 00000000..e69de29b diff --git a/sdk/apps/docs/docusaurus.config.js b/sdk/apps/docs/docusaurus.config.js index 9029839b..81b9c255 100644 --- a/sdk/apps/docs/docusaurus.config.js +++ b/sdk/apps/docs/docusaurus.config.js @@ -65,18 +65,21 @@ const config = { }, { to: 'docs/solana/solana/start', + className: 'solana_navlink navlink', activeBasePath: 'docs/solana/solana/start', label: 'Solana', position: 'left' }, { to: 'docs/sui/sui/start', + className: 'sui_navlink navlink', activeBasePath: 'docs/sui/sui/start', label: 'Sui', position: 'left' }, { to: 'docs/substrate/substrate/start', + className: 'substrate_navlink navlink', activeBasePath: 'docs/substrate/substrate/start', label: 'Substrate', position: 'left' @@ -94,9 +97,14 @@ const config = { position: 'left' }, { - href: 'https://example.connect.nightly.app/', + type: 'dropdown', label: 'Demo', - position: 'right' + position: 'right', + items: [ + { href: 'https://solana-web3-template.nightly.app', label: 'Solana template' }, + { href: 'https://sui-web3-template.nightly.app', label: 'Sui template' }, + { href: 'https://aleph-zero-web3-template.nightly.app', label: 'Substrate template' } + ] }, { href: 'https://twitter.com/NightlyConnect', @@ -128,7 +136,7 @@ const config = { title: 'Docs', items: [ { - label: 'home', + label: 'Home', to: 'docs/' } ] @@ -156,6 +164,7 @@ const config = { ] } ], + copyright: `Copyright © ${new Date().getFullYear()} Nightly | Built with Docusaurus.` }, prism: { diff --git a/sdk/apps/docs/src/css/custom.css b/sdk/apps/docs/src/css/custom.css index 99ca46e5..8aeaa7bf 100644 --- a/sdk/apps/docs/src/css/custom.css +++ b/sdk/apps/docs/src/css/custom.css @@ -160,3 +160,42 @@ img[src*='#connectImage'] { border: solid var(--ifm-color-primary) 2px; background: linear-gradient(45deg, rgba(96, 103, 249, 0.1), transparent); } + +.navbar__items a { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.navbar__items > .navlink { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; +} + +.navbar__items > .navlink::before { + content: ''; + background-size: cover; + height: 20px; + aspect-ratio: 1/1; + border-radius: 50%; +} + +.navbar__items > .solana_navlink::before { + background-image: url('https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png'); +} + +.navbar__items > .sui_navlink::before { + background-image: url('https://registry.nightly.app/networks/sui.png'); +} + +.navbar__items > .substrate_navlink::before { + background-image: url('https://registry.nightly.app/networks/polkadot.png'); +} + +@media screen and (max-width: 996px) { + .navlink { + display: none !important; + } +}