Skip to main content

Introduction

Doogly provides an easy-to-integrate widget for any Dapp to be interoperable with 3000+ tokens across 18+ EVM L1, L2's and Solana. For users, its simply selecting the chain and token they want to pay with and Doogly does all swapping and bridging to ensure all funds are bridged to destination chain and token and execute contract calls on user's behalf.

note

The documentation is still WIP and lot of features are being actively updated, so feel free to reach out our support telegram channel incase of any queries.

Getting Started​

Get started by creating a new widget with Doogly widget creator.

What you'll need​

  • React version >=16.0 and ethers >= 6.0.0

Generate a new widget​

  • Generate a new widget by going to Doogly App.
  • Select the destination chain and token
  • Enter the destination address (this address will be used as fallback address to transfer funds incase the contract calls on destination chain fails).
  • Add the contract calls by pasting the contract address, fetching abi and selecting function and adding variables.
  • Click next and your widget is ready that you can customise
  • Copy the generated component

Installation​

Install the Doogly react package

npm i @doogly/react

Import the component​

import { DooglyButton } from "@doogly/react";

Add the component generated in previous step

<DooglyButton
  buttonText="ADD DONATE BUTTON TEXT (OPTIONAL)"
  modalTitle="ADD MODAL HEADING (OPTIONAL)"
  // Api url to fetch token and route details
  apiUrl="https://api.doogly.org"
  // Configure modal
  config={{
    destinationChain: "DESTINATION CHAIN ID",
    destinationAddress: "DESTINATION ADDRESS", // Destination address (Dummy if postSwapHook is used)
    destinationOutputTokenAddress: "OUTPUT TOKEN", // Output token at destination
    initialAmount: "DEFAULT INPUT AMOUNT (OPTIONAL)",
    initialChainId: "DEFAULT SOURCE CHAIN ID (OPTIONAL)",
    initialToken: "DEFAULT SOURCE TOKEN (OPTIONAL)",
  }}
  modalStyles={{
    backgroundColor: "MODAL BACKGROUND (OPTIONAL)",
    headingColor: "MODAL HEADING COLOR (OPTIONAL)",
    buttonColor: "MODAL BUTTON COLOR (OPTIONAL)",
    textColor: "MODAL TEXT COLOR (OPTIONAL)",
  }}
  /* Callback function executes on frontend after user executes transaction
  @type ({
          transactionId: string;
          requestId: string;
          fromChainId: string;
          toChainId: string;
          status: string; // ["success", "partial_success", "needs_gas", "not_found"]
        }) => void;
  **/
  callback={"CALLBACK FUNCTION (OPTIONAL)"}
  /* Webhook Url to post transaction details to backend if any once user confirms transaction
  Body -
  {
    address: string;
    transactionHash: string;
    fromChain: string;
    toChain: string;
    data: additional webhook data
  }
  **/
  webhookUrl="WEBHOOK URL"
  webHookData="ADDITIONAL WEBHOOK DATA"
  /**
  Contract calls to be executed sequentially on destination chain
  @type {
    target: `0x${string}`; // Contract address
    callData: `0x${string}`; // Call data
    callType?: number; // Calltype 0 - Default, 1 - Utilise all the resulting output tokens after bridging + swapping, 2 - Utilize all output native tokens after bridging + swapping
    tokenAddress?: `0x${string}`; // Token address in case calltype is 1
    inputPos?: number; // Input position to dynamically modify with previous call output
  }
   */
  postSwapHook={"HOOKDATA"} // Post swap hook to execute contract calls after swap from bridge itself
  buttonClassName="CHECKOUT BUTTON CLASSNAME"
/>