https://github.com/youfoundron/injected-dao-onboarding
https://github.com/youfoundron/injected-dao-onboarding
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/youfoundron/injected-dao-onboarding
- Owner: youfoundron
- Created: 2023-07-12T21:49:27.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-01T19:01:37.000Z (almost 3 years ago)
- Last Synced: 2026-01-11T00:32:43.889Z (6 months ago)
- Language: TypeScript
- Homepage: https://injected-dao-onboarding.vercel.app
- Size: 347 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💉🎩🔓 Injected Magic + Unlock Onboarding
This script allows you to inject a Web2 friendly onboarding flow into your DAO's website
White-label wallets are supported by [Magic Auth](https://magic.link/docs/auth/overview#magic-auth)
Membership NFT's are supported by [Unlock protocol](https://unlock-protocol.com/)
Try the example live at [https://injected-dao-onboarding-3ctfbjzvl-youfoundron.vercel.app](https://injected-dao-onboarding-3ctfbjzvl-youfoundron.vercel.app/)
## Usage
You can inject the bundled `onboarding.js` script directly into your website.
See the [example](example/index.html) for how to setup the onboarding UI and render on your webpage.
```html
Your DAO's Landing Page
Join DAO
if (typeof window?.Onboarding === "undefined") {
throw new Error("No Onboarding object found!");
}
const onboarding = new Onboarding({
network: 'mainnet',
magicConfig: {
apiKey: "pk_live_..."
},
unlockConfig: {
name: "DAO Membership",
lockAddress: "0x..."
},
});
// Mount onboarding UI to the page
onboarding.render(document.getElementById('onboarding-frame'));
// Setup click handler to show onboarding UI
const ctaElement = document.getElementById('onboarding-cta-btn');
ctaElement.onclick = e => {
e.preventDefault();
onboarding.show();
};
```
## Setup
Clone this repo and create an empty `.env` file.
```
$ git clone git@github.com:eqty/injected-dao-onboarding.git
$ cp ./.env.example .env
```
### Base Url
Set your website base url in the `.env` file.
If you are developing locally, just leave it set as `http://localhost:3000`.
```
BASE_URL="https://website.com"
```
### Magic Auth
Create a Magic account and follow [Magic's Quick-Start guide](https://magic.link/docs/auth/overview#magic-auth) to create a Magic Auth App instance via the dashboard.
In the App dashboard, grab the **Publishable API Key** and set it in your `.env` file.
```
MAGIC_PUBLISHABLE_KEY="pk_live_..."
```
### Unlock Protocol
Create a lock from the [Unlock dashboard](https://magic.link/docs/auth/overview#magic-auth).
Once the lock contract is deployed, copy it's address into your `.env` file.
```
PAYWALL_LOCK_ADDRESS="0x..."
```
## Development
You will need to first install dependencies using npm.
```
$ npm install
```
After dependencies are installed, run the dev npm script and visit `localhost:3000`.
```
$ npm run dev
```
## Running the example
```
$ npm run start
```
## Building for production
To bundle the `onboarding.js` for production simply run the dist script.
```
$ npm run dist
```