Skip to content

Documentation / @frak-labs/components

Frak Wallet components

Those components are meant to be used to interact with the Frak Wallet.

They are built as Web Components, so you can use them in any web project, no matter the framework you are using.

Checkout our documentation for more information's about the usage:

To have more info about how does it works under the hood, you can check this

Setup

Add the following script tag to your HTML file:

<script type="module" src="https://cdn.jsdelivr.net/npm/@frak-labs/components" defer="defer"></script>

Quick start

Add a minimal configuration:

window.FrakSetup = {
    config: {
        metadata: {
            name: "Your App Name",
        },
    },
};

Sample usage for Share button

Sample code to use share button:

<frak-button-share></frak-button-share>

Button with custom text:

<frak-button-share text="Share and earn!"></frak-button-share>

Button with custom class:

<frak-button-share classname="button button-primary"></frak-button-share>

Sample usage for Wallet button

Sample code to use wallet button:

<frak-button-wallet></frak-button-wallet>

Button with custom class:

<frak-button-wallet classname="button button-primary"></frak-button-wallet>

Sample usage for Open In App button

Sample code to use open in app button:

<frak-open-in-app></frak-open-in-app>

Button with custom text:

<frak-open-in-app text="Get the App"></frak-open-in-app>

Button with custom class:

<frak-open-in-app classname="button button-primary"></frak-open-in-app>

Note: This component only renders on mobile devices. On desktop, it returns null.

Interfaces

Type Aliases

components