Skip to content

Commit 034adc9

Browse files
fzavaliafzavalia
committed
fix: Update readme
1 parent 2021869 commit 034adc9

1 file changed

Lines changed: 94 additions & 60 deletions

File tree

‎packages/onboarding-modal/README.md‎

Lines changed: 94 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,107 @@
1-
# React + TypeScript + Vite
1+
# DMe Onboarding Modal Component
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
A React component for seamless user onboarding to Telegram bot notifications, part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo). This component provides a user-friendly interface that allows users to subscribe to wallet notifications with a single click or QR scan, without requiring wallet connection.
44

5-
Currently, two official plugins are available:
5+
## Installation
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
```bash
8+
npm install dme-onboarding-modal
9+
```
910

10-
## React Compiler
11+
## Usage
1112

12-
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13+
### 1. Import the Component and Styles
1314

14-
## Expanding the ESLint configuration
15+
In your main app file (e.g., `App.tsx` or `index.tsx`), import the component's styles:
1516

16-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17+
```tsx
18+
import "dme-onboarding-modal/lib/index.css";
19+
```
1720

18-
```js
19-
export default defineConfig([
20-
globalIgnores(["dist"]),
21-
{
22-
files: ["**/*.{ts,tsx}"],
23-
extends: [
24-
// Other configs...
21+
### 2. Use the Component in Your React App
2522

26-
// Remove tseslint.configs.recommended and replace with this
27-
tseslint.configs.recommendedTypeChecked,
28-
// Alternatively, use this for stricter rules
29-
tseslint.configs.strictTypeChecked,
30-
// Optionally, add this for stylistic rules
31-
tseslint.configs.stylisticTypeChecked,
23+
```tsx
24+
import { OnboardingModal } from "dme-onboarding-modal";
3225

33-
// Other configs...
34-
],
35-
languageOptions: {
36-
parserOptions: {
37-
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
38-
tsconfigRootDir: import.meta.dirname,
39-
},
40-
// other options...
41-
},
42-
},
43-
]);
26+
function Navbar() {
27+
return (
28+
<nav>
29+
<OnboardingModal
30+
botUsername="MyBot"
31+
walletAddress="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
32+
/>
33+
</nav>
34+
);
35+
}
4436
```
4537

46-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47-
48-
```js
49-
// eslint.config.js
50-
import reactX from "eslint-plugin-react-x";
51-
import reactDom from "eslint-plugin-react-dom";
52-
53-
export default defineConfig([
54-
globalIgnores(["dist"]),
55-
{
56-
files: ["**/*.{ts,tsx}"],
57-
extends: [
58-
// Other configs...
59-
// Enable lint rules for React
60-
reactX.configs["recommended-typescript"],
61-
// Enable lint rules for React DOM
62-
reactDom.configs.recommended,
63-
],
64-
languageOptions: {
65-
parserOptions: {
66-
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
67-
tsconfigRootDir: import.meta.dirname,
68-
},
69-
// other options...
70-
},
71-
},
72-
]);
38+
### 3. Get the Wallet Address
39+
40+
The wallet address can be obtained from your dApp's Web3 provider, such as **MetaMask** or **WalletConnect**:
41+
42+
```tsx
43+
import { OnboardingModal } from "dme-onboarding-modal";
44+
import { useAccount } from "wagmi"; // or your Web3 library
45+
46+
function Navbar() {
47+
const { address } = useAccount();
48+
49+
return (
50+
<nav>
51+
{address && (
52+
<OnboardingModal
53+
botUsername="MyBot"
54+
walletAddress={address}
55+
/>
56+
)}
57+
</nav>
58+
);
59+
}
7360
```
61+
62+
## Props
63+
64+
| Prop | Type | Required | Description |
65+
|------|------|----------|-------------|
66+
| `botUsername` | `string` | Yes | Your Telegram bot's username (without the `@` symbol) |
67+
| `walletAddress` | `string` | Yes | The Ethereum wallet address to link with the user's Telegram account |
68+
69+
## How It Works
70+
71+
When clicked, the component opens a modal dialog that displays:
72+
73+
1. **QR Code**: Users can scan with their mobile device to instantly open the Telegram bot and link their wallet
74+
2. **Direct Link**: Alternative option to open Telegram directly in the browser
75+
76+
The modal generates a deep link to your Telegram bot with the wallet address as a start parameter, enabling seamless onboarding in a single action.
77+
78+
## Example
79+
80+
```tsx
81+
import { OnboardingModal } from "dme-onboarding-modal";
82+
import "dme-onboarding-modal/lib/index.css";
83+
84+
function App() {
85+
return (
86+
<div className="app">
87+
<header>
88+
<h1>My DeFi App</h1>
89+
<OnboardingModal
90+
botUsername="MyDeFiBot"
91+
walletAddress="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
92+
/>
93+
</header>
94+
</div>
95+
);
96+
}
97+
98+
export default App;
99+
```
100+
101+
## License
102+
103+
MIT
104+
105+
## Part of DMe Framework
106+
107+
This component is part of the [DMe Framework](https://github.com/BootNodeDev/dme-monorepo), a complete solution for building Telegram bot notification systems for Web3 applications.

0 commit comments

Comments
 (0)