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 --force

Add 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 | | ---------------- | ----------------- | ----------------------- | -------- | --------------------------------- | | twitter | string | " " | Yes | Link will open on new tab. | | instagram | string | " " | Yes | Link will open on new tab. | | linkedin | 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. |