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