@romeblockchain/react-components

Search Bar Token Pair Centric Widget

A react component which fetches token pairs and shows information from various network and its exchanges

Current version is 0.3.33 | version | description |

• | 0.3.33| Update RBL Net URL
• | 0.3.32| Remove autofocus from mobile search input
• | 0.3.31| Improve positioning logic for search bar results menu
• | 0.3.28| Make the search bar query more efficient when finding multiple tokens
• | 0.3.28| Use exchange title instead of exchange name in resultDetail component.
• | 0.3.23| Filter out unsupported pairs
• | 0.3.22| Fix style for long token name ellipsed
• | 0.3.21| Allow duplicated exchanges in networks

Prerequisites

This project requires NodeJS (version 16.13 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
16.13.1
v8.1.2

Table of contents

• Search Bar Token Pair Centric Widget
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Launching the app on development mode
    • Building a distribution version
    • Publishing package into npm repositories
    • How to use the search bar component
  • API
    • Types
    • Props
  • Authors
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See notes on how to publish and deploy the project on a live system.

Installation

$ npm i @romeblockchain/react-components

Or if you prefer using Yarn:

$ yarn add @romeblockchain/react-components

Usage

Launching the app on development mode

$ git clone https://github.com/Rome-Blockchain-Labs/terminal-library.git
$ cd terminal-library
$ npm run dev

Building a distribution version

$ npm run build

This task will create a distribution version of the project inside your local dist/ folder

Publishing package into npm repositories

Before npm publish, it requires that you already logged into npm repository.

$ npm login
$ Username: 
$ Password:
$ Email: (this IS public)

After logging into npm repository, make sure that you update the version in package.json. You can publish different version into npm so that update higher version than current.

$ npm run publish

How to use the search bar component

import { SearchBar } from '@romeblockchain/react-components';

<div>
    <SearchBar {...props} />    
</div>

API

Types

• NetworkId

NetworkId = 'ethereum' | 'avalanche' | 'bsc' | 'moonriver' | 'moonbeam'

• ExchangeName

ExchangeName =
  | 'uniswapv2'
  | 'uniswapv3'
  | 'sushiswap'
  | 'pangolin'
  | 'traderjoe'
  | 'pancakeswap'
  | 'safeswap'
  | 'kyberdmm'
  | 'zeroexchange'
  | 'yetiswap'
  | 'baguette'
  | 'canary'
  | 'lydiafinance'
  | 'elkfinance'
  | 'pandaswap'
  | 'complusnetwork'
  | 'oliveswap'
  | 'mdex'
  | 'ellipsis.finance'
  | 'biswap'
  | 'apeswap'
  | 'knightswap.finance'
  | 'babyswap'
  | 'synapse'
  | 'beamswap'
  | 'solarflare'
  | 'stellaswap'
  | 'zenlink'
  | 'solarbeam'
  | 'shibaswap'
  | 'quickswap'
  | 'solidex'
  | 'spookyswap'
  | 'spiritswap'
  | 'vvs.finance'
  | 'mm.finance'
  | 'cronaswap'
  | 'crodex'
  | 'cyborgswap';

• NetworkType

NetworkType = {
  id: NetworkId;
  name?: string;
  icon?: ReactNode;
  exchanges: ExchangeType[];
}

• ExchangeType

ExchangeType = {
  name: ExchangeName;
  icon?: ReactNode;
}

• CustomWrapperType

CustomWrapperType = {
  backgroundColor?: string;
  borderRadius?: string;
  border?: string;
  button?: {
    borderColor?: string;
    backColor?: string;
    color?: string;
    borderRadius?: string;
    fontSize?: string;
    padding?: string;
    hoverBackColor?: string;
  };
}

• CustomSearchInputType

CustomSearchInputType = {
  input?: {
    width?: string;
    height?: string;
    border?: string;
    color?: string;
    display?: string;
    borderRadius?: string;
    background?: string;
    padding?: string;
    fontSize?: string;
    fontFamily?: string;
  };

  icon?: {
    right?: string;
    top?: string;
    height?: number;
    width?: number;
    color?: string;
    activeColor?: string;
  };

  placeholder?: string;
}

• CustomSearchFilterType

CustomSearchFilterType = {
  wrapper?: {
    backgroundColor?: string;
    borderRadius?: string;
    toggleColor?: string;
    toggleHeight?: string;
    toggleWidth?: string;
    toggleMarginRight?: string;
    toggleLeft?: string;
    toggleTop?: string;
    toggleBorderBottom?: string;
    toggleBorderRight?: string;
    contentBorder?: string;
    contentBorderRadius?: string;
    margin?: string;
  };

  content?: {
    network?: string;
    exchange?: string;
    header?: {
      display?: string;
      justifyContent?: string;
      alignItems?: string;
      width?: string;
      border?: string;
      backgroundColor?: string;
      color?: string;
      padding?: string;
      textAlign?: string;
      margin?: string;
      borderRadius?: string;
      fontSize?: string;
      fontWeight?: string;
      hoverColor?: string;
    };
    wrapper?: {
      justifyContent?: string;
      alignItems?: string;
      padding?: string;
      backgroundColor?: string;
      borderRadius?: string;
    };
    content?: {
      justifyContent?: string;
      alignItems?: string;
      padding?: string;
    };
    description?: {
      textAlign?: string;
      fontSize?: string;
      fontWeight?: string;
      padding?: string;
      backgroundColor?: string;
      color?: string;
    };
  };
}

• CustomResultType

CustomResultType = {
  title?: {
    color?: string;
    fontSize?: string;
    padding?: string;
    margin?: string;
    fontSize2?: string;
  };
  content?: {
    padding?: string;
    background?: string;
    borderRadius?: string;
    width?: string;
    height?: string;
    border?: string;
    color?: string;
    display?: string;
    borderColor?: string;
    borderStyle?: string;
    borderWidth?: string;
    fontSize?: string;
    fontFamily?: string;
  };
}

• CustomSearchFilterType

CustomSearchFilterType = {
  wrapper?: {
    backgroundColor?: string;
    borderRadius?: string;
    toggleColor?: string;
    toggleHeight?: string;
    toggleWidth?: string;
    toggleMarginRight?: string;
    toggleLeft?: string;
    toggleTop?: string;
    toggleBorderBottom?: string;
    toggleBorderRight?: string;
    contentBorder?: string;
    contentBorderRadius?: string;
    margin?: string;
  };

  content?: {
    network?: string;
    exchange?: string;
    header?: {
      display?: string;
      justifyContent?: string;
      alignItems?: string;
      width?: string;
      border?: string;
      backgroundColor?: string;
      color?: string;
      padding?: string;
      textAlign?: string;
      margin?: string;
      borderRadius?: string;
      fontSize?: string;
      fontWeight?: string;
      hoverColor?: string;
    };
    wrapper?: {
      justifyContent?: string;
      alignItems?: string;
      padding?: string;
      backgroundColor?: string;
      borderRadius?: string;
    };
    content?: {
      justifyContent?: string;
      alignItems?: string;
      padding?: string;
    };
    description?: {
      textAlign?: string;
      fontSize?: string;
      fontWeight?: string;
      padding?: string;
      backgroundColor?: string;
      color?: string;
    };
  };
}

• ActionComponentType

ActionComponentType = {
    detail: CustomSearchFilterType
};

• ActionType

ActionType = {
    component?: FC<ActionComponentType>,
    detail?: TokenPair
}

Props

• customWrapper

Type	Default value
CustomWrapperType	null

Example:

• customSearchInput

Type	Default value
CustomSearchInputType	null

Example:

• customSearchFilter

Type	Default value
CustomSearchFilterType	null

Example:

• customChip

Type	Default value
CustomChipType	null

Example:

• customResult

Type	Default value
CustomResultType	null

Example:

• customTokenDetail

Type	Default value
CustomTokenDetailType	null

Example:

• customLoading

Type	Default value
CustomLoadingType	null

Example:

• customActions

Type	Default value
Array	null

Example:

// customActions is the array list which has the index and component
const customActions = [
    actionComponent1
    actionComponent2   
    actionComponent3    
    ...
]

// You can refer the detail for the token pair information from the prop
const actionComponent1 = (props: ActionType) => {  
  const { detail } = props
  const handleClick = () => {
    console.log('Exchange: ', detail)
  }
  return (
    <div onClick={handleClick}>Exchange</div>
  )
}

• networks

Type	Default value
Array	null

Example:

Authors

License

MIT License © Rome Blockchain Labs