Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@dexhunterio/swaps

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dexhunterio/swaps

### How to use library (with React)

0.0.138
npm

Version published: last month

Weekly downloads: 1K; decreased by-33.53%

Maintainers: 0

Weekly downloads

Created: last year

Source

Dex Hunter - Swap Component

How to use library (with React)

Install package:

npm i @dexhunterio/swaps

Import to your code 2.1. For ReactJS:

  import '@dexhunterio/swaps/lib/assets/style.css'
  import Swap from '@dexhunterio/swaps'
  ...

2.2. Ffor NextJS:

"use client";
import '@dexhunterio/swaps/lib/assets/style.css'
const Swap = dynamic(() => import("@dexhunterio/swaps"), {
    ssr: false,
});
...

Use Swap Component:

function App() {
  return (
    <div>
      <Swap {...settings} />
    </div>
  );
}

How to use library (with VanilaJS)

In head tag

<head>
    ...
    <script
        src="https://unpkg.com/react@18.2/umd/react.production.min.js"
        crossorigin
      ></script>
      <script
        src="https://unpkg.com/react-dom@18.2/umd/react-dom.production.min.js"
        crossorigin
      ></script>
      <script
        type="module"
        src="https://unpkg.com/@dexhunterio/swaps@0.0.95/lib/umd/swaps.umd.js"
      ></script>
      ...
</head>

In body tag:

  ...
  <div id="dexhunter"></div>
    <script type="module">
      ReactDOM.render(
        React.createElement(dexhunterSwap, {
          orderTypes: ["SWAP", "LIMIT", "DCA"],
          theme: "light",
        }),
        document.getElementById("dexhunter")
      );
    </script>
...

Available props:

Prop	Required?	Type	Default	Description
defaultToken	false	string	-	The default token to be selected.
width	false	px\|%	-	The width of the component. Accepts values in pixels or percentage.
height	false	px\|%	-	The height of the component. Accepts values in pixels or percentage.
theme	false	dark \| light	dark	The theme of the component. Can be either 'dark' or 'light'.
orderTypes	false	array	['SWAP', 'LIMIT']	An array of order types supported by the component. Defaults to 'SWAP' and 'LIMIT'.
supportedTokens	false	tokenId[]	-	An array of token IDs that are supported for searching.
partnerName	true	string	-	The name of the partner. This is a required field.
partnerCode	true	string	-	The code of the partner. This is a required field.
colors	false	object	-	Supported colors: `mainText`, `subText`, `background`, `containers`, `buttonText`, `accent`.
className	false	string	-	Custom CSS class for the component.
style	false	object	-	Inline styles for the component.
onSwapSuccess	false	(data: any) => void	-	Callback function on successful swap.
onSwapError	false	(err: any) => void	-	Callback function on swap error.
selectedWallet	false	SelectedWallet	-	The wallet selected by the user. Accepts one of the specified wallet identifiers. Supported wallets: `nami`, `eternl`, `flint`, `gerowallet`, `typhoncip30`, `nufi`, `lace`, `vespr`, `begin`, and `yoroi`.
inputs	false	string[]	-	Input fields for the component.
onWalletConnect	false	(data: any) => void	-	Callback function when a wallet is connected.
onClickWalletConnect	false	() => void	-	Trigger when clicking the wallet connect button
onViewOrder	false	(data: any) => void	-	Trigger when clicking the view order button
displayType	false	'BUTTON' `	`'DEFAULT'`	` 'WIDGET'
buttonText	false	string	Swap	Button text when displayType = 'BUTTON'
orderTypeOnButtonClick	false	'SWAP' `	`'LIMIT'`	` 'DCA'
defaultSettings	false	{ isCustomSlippage?: boolean; isAutomaticSlippage?: boolean; slippage?: number; }	-	Settings default
autoFocus	false	boolean	false	auto focus on sell input when page loads

FAQs

What is @dexhunterio/swaps?

Is @dexhunterio/swaps popular?

Is @dexhunterio/swaps well maintained?

Package last updated on 29 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@dexhunterio/swaps

Dex Hunter - Swap Component

How to use library (with React)

How to use library (with VanilaJS)

Available props:

Related posts

Malicious npm Campaign Targets Ethereum Developers with Fake Hardhat Packages

Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts