Teller Widget

Welcome to the Teller Widget! This widget allows any dapp to integrate Teller's front end into their app and allow users to do cash advances with either the tokens in their wallets or a specified token list.

Documentation

Required packaages

 @tanstack/react-query
 alchemy-sdk
 graphql
 graphql-request
 react
 react-dom
 @teller-protocol/v2-contracts

Installation

Install the widget (and required packages) by using npm or yarn

yarn add @teller-protocol/teller-widget @tanstack/react-query alchemy-sdk graphql graphql-request react react-dom @teller-protocol/v2-contracts

npm i --save @teller-protocol/teller-widget @tanstack/react-query alchemy-sdk graphql graphql-request react react-dom @teller-protocol/v2-contracts

Usage

To use the widget, import the TellerWidget component. None of the props are required.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const App = () => {
  return <TellerWidget />;
};

Props

The widget works out of the box with no configuration. However, you can pass in the following props to customize the widget.

`buttonLabel`

A string to replace the default Cash Advance button label.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const App = () => {
  return <TellerWidget buttonLabel="Get a loan now!" />;
};

`whitelistedTokens`

An object grouped by chainId, made up of a list of token addresses. By default these tokens show on additionally to the ones in the user's wallet.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const whiteListedTokens = {
  [137]: [
    "0x61299774020da444af134c82fa83e3810b309991",
    "0x692ac1e363ae34b6b489148152b12e2785a3d8d6",
  ],
  [1]: ["0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"],
};

const App = () => {
  return <TellerWidget whiteListedTokens={whiteListedTokens} />;
};

`showOnlyWhitelistedTokens`

A boolen to only show the tokens defined in the whitelistedTokens prop. Must be used together with the whitelistedTokens prop.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const whiteListedTokens = {
  [137]: [
    "0x61299774020da444af134c82fa83e3810b309991",
    "0x692ac1e363ae34b6b489148152b12e2785a3d8d6",
  ],
  [1]: ["0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"],
};

const App = () => {
  return <TellerWidget whiteListedTokens={whiteListedTokens} showOnlyWhitelistedTokens />;
};

`buttonClassName`

A string to be passed to the main button for adding a css class. Use this for customizing the button to match your app's design.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const App = () => {
  return <TellerWidget buttonClassName="button-v2" />;
};

`isButtonBare`

A boolean for additional styling control. This resets the buttons's style to the browser's default.

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const App = () => {
  return <TellerWidget buttonClassName="button-v2" />;
};

`whitelistedChains`

An optional array to show desired chains. By default, the widget shows all chains. Available chains:

1 (Ethereum),
137 (Polygon)
42161 (Arbitrum)
8453 (Base)

import { Widget as TellerWidget } from "@teller-protocol/teller-widget";

const App = () => {
  return <TellerWidget whitelistedChains={[1,137]} />;
};

Development

Testing

Run storybook by doing

yarn storybook

teller-protocol / teller-widget Goto Github PK

teller-widget's Introduction

Teller Widget

Documentation

Required packaages

Installation

Usage

Props

buttonLabel

whitelistedTokens

showOnlyWhitelistedTokens

buttonClassName

isButtonBare

whitelistedChains

Development

Testing

teller-widget's People

Contributors

Stargazers

Recommend Projects

Recommend Topics