0.0.13 • Published 8 months ago
@ondefy/widget v0.0.13
Installation
Installation using npm
npm i @ondefy/widget
import '@ondefy/widget'
Installation from cdn
<script src="https://cdn.jsdelivr.net/npm/@ondefy/widget@0.0.13"></script>
Usage
Usage of Ondefy Widget
<ondefy-widget></ondefy-widget>
Usage of Ondefy Widget with Parameters
All parameters are optional
<ondefy-widget
frame-border-radius="18"
frame-height="500"
network-id="1"
theme="dark"
token-id="ethereum"
color-primary="#4EB9A3"
></ondefy-widget>
Usage of widget in fullscreen mode
Method 1: Use your own component here to launch the widget fullscreen
<!-- Put it wherever you like - in any place where you render html-->
<ondefy-widget-button>
<button>My button</button>
</ondefy-widget-button>
or with optional parameters
<ondefy-widget-button
frame-border-radius="18"
network-id="1"
theme="dark"
token-id="ethereum"
color-primary="#ffee00"
>
<button>My button</button>
</ondefy-widget-button>
Method 2: Dispatch our custom event to launch the widget fullscreen
<button
onclick="document.dispatchEvent(
new CustomEvent('ondefy:launch-ramp-fullscreen')
)">
Launch Widget
</button>
or with optional parameters
<button
onclick="document.dispatchEvent(
new CustomEvent('ondefy:launch-ramp-fullscreen', {
detail: {
frameBorderRadius: '18',
networkId: '1',
theme: 'dark',
tokenId: 'ethereum',
colorPrimary: '#4EB9A3'
},
})
)">
Launch Widget
</button>
Method 3: Use the method of our global object to launch the widget fullscreen
<button
onclick="Ondefy.launchWidgetFullscreen()">
Launch Widget
</button>
or with optional params
<button
onclick="Ondefy.launchWidgetFullscreen({
frameBorderRadius: '18',
networkId: '1',
theme: 'dark',
tokenId: 'ethereum',
colorPrimary: '#4EB9A3'
})">
Launch Widget
</button>
Using with typescript
If you 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;
theme?: string;
tokenId?: string;
networkId?: 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;
'theme'?: string;
'network-id'?: string;
}
interface OndefyButtonParams {
'frame-border-radius'?: string;
'frame-height'?: string;
'color-primary'?: string;
'token-id'?: string;
'theme'?: string;
'network-id'?: string;
class?: string;
}
interface OndefyButton
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
OndefyButtonParams {}
interface OndefyWidget
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
OndefyIframeParams {}
namespace JSX {
interface IntrinsicElements {
'ondefy-button': OndefyButton;
'ondefy-widget': OndefyWidget;
}
}
}