0.0.3 • Published 1 year ago
angular-web3payments-widget v0.0.3
Web3Payments
A library for the Web3Payments token sale widget, helping you to integrate your own Web3Payments-powered token sale into your web app.
Note: This library now fully supports Angular 16 and later versions!
Installation
Install Web3Payments with npm
npm install angular-web3payments-widget --forceAdd installed package to NgModule imports:
import { Web3PaymentsModule } from 'angular-web3payments-widget';
@NgModule({
...
imports: [Web3PaymentsModule,...]
...
})Add component to your page:
<web3Payments-AngularTokenWidget></web3Payments-AngularTokenWidget>You will need to add Web3Payments SCSS and assets: SCSS file directly import in the angular.json file or via styles.SCSS import. You should import assets in angular.json file.
- angular.json
"build": {
"options": {
...
"assets": [
...
{
"glob": "**/*",
"input": "./node_modules/angular-web3payments-widget/src/assets/",
"output": "./assets/"
}
]
...
},
}- style.scss
@import '../node_modules/angular-web3payments-widget/src/styles.scss'Options
| Options | Type | Default | Description |
|---|---|---|---|
| apiKey | string | " " | You should send working API key |
| config | WidgetConfig | Check the below configurations table | You can set custom themes, contents and social links |
Configurations
| Options | Type | Default | Optional | Description |
|---|---|---|---|---|
| theme | ThemeConfig | {"--bg-gradient-primary": "linear-gradient(0deg, #4D9AE3 0%, #1D43AE 100%)", "--bg-widget-primary": "#2856B9", "--text-widget": "#ffffff"} | --bg-gradient-primary | { "--bg-gradient-primary": It will set the banner background colour, "--bg-widget-primary": It will set the buttons background colours, "--text-widget": It will set the button text colour } |
| contents | Contents | Check the below contents table | Yes | You can set custom contents to the Widget |
| socialLinks | SocialLinks | Check the below social links table | Yes | You can set the social links. Those will be available only for mobile view |
Contents
| Config Options | Type | Default | Optional | Description |
|---|---|---|---|---|
| upcoming_tokenSale | ContentSections | { tokenSale_title: Token Sale Coming Soon, presale_subtitle: Please keep your eyes peeled for the launch of our new token sale! } | Yes | You can set custom title and subtitle for the upcoming token sale. |
| token_sale | ContentSections | { tokenSale_title: Token Sale Open - Buy TOKEN Now } | Yes | Set custom token sale title, we are not considering subtitle. |
| upcoming_claim | ContentSections | { tokenSale_title: Token Sale Ended - Claim Launching Soon! } | Yes | Set custom upcoming claim title, we are not considering subtitle. |
| claim | ContentSections | { tokenSale_title: Claim your $TOKEN Now!, presale_subtitle: Please connect your wallet in order to claim your purchased TOKEN. } | Yes | Set title and subtitle for the claim section. |
Social Links
| Config Options | Type | Default | Optional | Description |
|---|---|---|---|---|
string | " " | Yes | Link will open on new tab. | |
string | " " | Yes | Link will open on new tab. | |
string | " " | Yes | Link will open on new tab. | |
| medium | string | " " | Yes | Link will open on new tab. |
| telegram | string | " " | Yes | Link will open on new tab. |
| discord | string | " " | Yes | Link will open on new tab. |