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