From 02fc7799b702a0405b2f0cb4f57bbffa194a5f07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?= Date: Fri, 21 Jun 2024 17:13:36 +1200 Subject: [PATCH] docs: add README --- .prettierrc | 1 + README.md | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+) create mode 100644 README.md diff --git a/.prettierrc b/.prettierrc index f77185c..63a866d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,6 +2,7 @@ "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrderParserPlugins": [ "typescript", + "jsx", "decorators", "decoratorAutoAccessors" ] diff --git a/README.md b/README.md new file mode 100644 index 0000000..af73bcf --- /dev/null +++ b/README.md @@ -0,0 +1,105 @@ +# DOT Connect + +UI components for managing Polkadot wallet connections. + +- Customisable +- FE framework agnostic, work with React, Vue, or any other FE applications +- Built on top of [`reactive-dot`](https://reactivedot.dev/) and [`polkadot-api`](https://polkadot-api.github.io/polkadot-api-docs/) + +## Quick start + +### Installation + +#### First setup a Reactive DOT application + +Follow the guide [here](https://reactivedot.dev/docs/getting-started/setup). + +#### Then add DOT Connect as a dependencies + +```sh +npm add dot-connect +# Or +yarn add dot-connect +# Or +pnpm add dot-connect +``` + +#### Finally add any optional dependencies + +Install any optional dependencies depending on the wallet types you want to support by following this [documentation](https://reactivedot.dev/docs/getting-started/connect-wallets#install-optional-dependencies). + +### Setup + +```ts +import type { Config } from "@reactive-dot/core"; +import { + InjectedAggregator, + WalletConnect, +} from "@reactive-dot/core/wallets.js"; +import { registerDotConnect } from "dot-connect"; + +// ... + +// More information on how to set up your config: https://reactivedot.dev/docs/getting-started/setup#create-config +const config: Config = { + // ... + wallets: [ + new InjectedAggregator(), + new WalletConnect({ + projectId: "WALLET_CONNECT_PROJECT_ID", + providerOptions: { + metadata: { + name: "APP_NAME", + description: "APP_DESCRIPTION", + url: "APP_URL", + icons: ["APP_ICON"], + }, + }, + chainIds: [ + // https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-13.md + "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot + ], + }), + ], +}; + +// Register dot-connect custom elements & configure supported wallets +registerDotConnect({ + wallets: config.wallets, +}); + +export default config; +``` + +### Usage + +With web component, the connection button can be added directly into any HTML markup. + +### As part of JSX + +```tsx +const App = () => ( +
+ +
+); +``` + +### As part of plain HTML + +```html + + + + +``` + +### Account management + +Accounts can then be accessed via Reactive DOT API, an example on how to do this can be found [here](https://reactivedot.dev/docs/getting-started/connect-wallets#display-available-accounts). + +### Theming + +By default the theme will match user system settings 'light' or 'dark'. But you can override it by using the [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) CSS property. + +Further customization can be done via setting CSS variables directly, which can be found [here](./packages/dot-connect/src/elements/components/dc-element.ts#L9-L23).