integrate with web component

Render the Widget with a built-in skeleton loader and efficiently use the Widget fullscreen without writing a line of javascript code.

Web components are framework agnostic and can be used with modern frameworks and even simple HTML websites on any project. Furthermore, you can install our web components using CDN or npm.

Installation

• using npm :

npm i @ondefy/widget

import '@ondefy/widget'

• using CDN

<script src="https://cdn.jsdelivr.net/npm/@ondefy/widget@0.0.12"></script>

Usage

We provide a set of parameters that allows you to preconfigure our widget. In addition, you can use our Ondefy Widget configurator to simplify the generation of this code.

<ondefy-widget
  frame-border-radius="18"
  frame-height="500"
  network-id="1"
  token-id="ethereum"
  color-primary="#4EB9A3"
  theme="dark"
></ondefy-widget>

Parameters (all optional)	Description
frame-border-radius	set the border radius of the Widget
frame-height	set the height of the Widget
network-id	preselected network
token-id	preselected token
color-primary	the primary color of the widget
theme	dark | light

Launch in fullscreen

Widget can be open on site in fullscreen mode.

Method 1: Ondefy widget button

Use your component or any HTML tag inside our custom element.

Just write any HTML tag inside.

<ondefy-widget-button> - makes everything you put inside clickable. And this element will launch our Widget in fullscreen.

You can put into this web component any HTML tag or any component from any framework: react.js, angular.js, vue.js, etc.

<!--  Put it wherever you like - in any place where you render html-->
<ondefy-widget-button>
  <button>My button</button>
</ondefy-widget-button>

You can also preconfigure our Widget with optional parameters.

<ondefy-widget-button
  frame-border-radius="18"
  network-id="1"
  token-id="ethereum"
  color-primary="#ffee00"
  theme="dark"
>
  <button>My button</button>
</ondefy-widget-button>

Method 2: Programmatically launch the Widget fullscreen using Ondefy global service

If you don't want to use our web component, you can use the method from our Ondefy global service method to launch the Widget fullscreen programmatically.

You don't need to import Ondefy anywhere as this variable is global and belongs to window. all the time anywhere in your code if you installed Ondefy Web components properly

<button
  onclick="Ondefy.launchRampFullscreen()">
  Launch Widget
</button>

or with optional params

<button
  onclick="Ondefy.launchRampFullscreen({
     frameBorderRadius: '18',
     networkId: '1',
     tokenId: 'ethereum',
     colorPrimary: '#4EB9A3',
     theme: 'dark'
   })">
  Launch Widget
</button>

Method 3: Programmatically launch the Widget using the Custom Event

If you feel like using Ondefy global service doesn't fit the architecture of your app but still needs a way to launch the Widget programmatically. You can trigger our custom event launch-widget-fullscreen on document.body like this

<button
  onclick="document.body.dispatchEvent(
    new CustomEvent('ondefy:launch-widget-fullscreen')
 )">
  Launch Widget
</button>

or with optional parameters

<button
  onclick="document.body.dispatchEvent(
    new CustomEvent('ondefy:launch-widget-fullscreen', {
      detail: {
       frameBorderRadius: '18',
       networkId: '1',
       tokenId: 'ethereum',
       colorPrimary: '#4EB9A3',
       theme: 'dark'
     },
   })
 )">
  Launch Widget
</button>

Typescript notes

If your compiler complains, try creating react-app-env.d.ts in the root of your project for react.js projects:

/// <reference types="react-scripts" />
import * as React from 'react';

declare global {
  interface OndefyWidgetFullscreenParams {
    frameBorderRadius?: string;
    colorPrimary?: string;
    tokenId?: string;
    theme?: string;
    networkId?: string;
    _serverUrl?: string;
  }

  type TLaunchWidgetFullscreen = (params: OndefyWidgetFullscreenParams) => void;

  interface Window {
    ethereum: any;
    Ondefy: {
      launchWidgetFullscreen: TLaunchWidgetFullscreen;
    };
  }

  interface OndefyWidgetParams {
    'frame-border-radius'?: string;
    'frame-height'?: string;
    'color-primary'?: string;
    'token-id'?: string;
    'network-id'?: string;
    theme?: string;
    '_server-url'?: string;
  }
  interface OndefyButtonParams {
    'frame-border-radius'?: string;
    'frame-height'?: string;
    'color-primary'?: string;
    class?: string;
    theme?: string;
    'token-id'?: string;
    'network-id'?: string;
    '_server-url'?: string;
  }

  interface OndefyButton
    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
      OndefyButtonParams {}

  interface OndefyWidget
    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
      OndefyWidgetParams {}

  namespace JSX {
    interface IntrinsicElements {
      'ondefy-button': OndefyButton;
      'ondefy-widget': OndefyWidget;
    }
  }
}