Merge pull request #106 from nightly-labs/refactor_dcs

Refactor docs, describe additional functionality

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](../../solana/solana/start), but you can use it for [Sui](../../sui/sui/start) and [Substrate](../../substrate/substrate/start) 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.
+:::

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<XMLOptions>
+}
+
+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 configuration
+  }
+)
+```
+
+:::info
+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.
+:::

sdk/apps/docs/docs/client/connect.md → sdk/apps/docs/docs/for_wallets/connect.md

@@ -1,6 +1,6 @@
 ---
 title: Build & Connect
-slug: client/connect
+slug: for_wallets/connect
 ---
 
 import Tabs from '@theme/Tabs';

sdk/apps/docs/docs/client/push.md → sdk/apps/docs/docs/for_wallets/push.md

@@ -1,6 +1,6 @@
 ---
 title: Push notifications
-slug: client/push
+slug: for_wallets/push
 ---
 
 :::info

sdk/apps/docs/docs/client/signMessage.md → sdk/apps/docs/docs/for_wallets/sign_message.md

@@ -1,6 +1,6 @@
 ---
 title: Sign Messages
-slug: client/signMessage
+slug: for_wallets/sign_message
 ---
 
 import Tabs from '@theme/Tabs';

sdk/apps/docs/docs/client/sign.md → sdk/apps/docs/docs/for_wallets/sign_transaction.md

@@ -1,6 +1,6 @@
 ---
 title: Sign Transaction
-slug: client/sign
+slug: for_wallets/sign_transaction
 ---
 
 import Tabs from '@theme/Tabs';

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.
-
-<Tabs>
-<TabItem value="Solana" label="Solana">
-
-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
-
-```
-
-</TabItem>
-<TabItem value="SUI" label="SUI">
-
-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
-```
-
-</TabItem>
-
-<TabItem value="Substrate" label="Substrate">
-
-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
-
-```
-
-</TabItem>
-</Tabs>
-
-:::