ui-components

The ui-components submodule is a part of the monorepo Dexknot.

Contains presentational UI components that are used across different applications.

These components are designed to be reusable, customizable, and easy to integrate into any application.

Install

• yarn

yarn add --dev @dexknot/ui-components

or

• npm

npm install --dev @dexknot/ui-components

Usage

import React, { Component } from 'react';

import { AddTokenButton } from '@dexknot/ui-components';

export default function App() {
  return <AddTokenButton onClick={() => console.log('AddTokenButton')} walletIsConnected={true} />;
}

Importing

Individual components can be imported:

import {
  //Boxes
  GetBox,
  SendBox,

  //Buttons
  AddTokenButton,
  AuxButton,
  BackButton,
  CloseButton,
  LinkButton,
  MainButton,
  MaxFeeButton,
  MoreProtocolsButton,
  PinButton,
  RefreshQuoteButton,
  ResetSettingsButton,
  RouteButton,
  SelectTokenButton,
  SettingsButton,
  SlippageButtonsGroup,
  SwitchNetworkButton,
  SwitchTokensButton,
  ToggleButtonsGroup,

  //Fields
  CustomGasPriceField,
  InputAmount,
  RecipientField,
  SearchTokenField,
  StyledSearchField,
  StyledCheckboxField,
  StyledTextField,

  //Icons
  CustomTokensIcon,
  GasStation,
  LockerIcon,
  MetamaskIcon,
  NoLogoURI,
  NoTokenFoundIcon,
  PinIcon,
  UnpinIcon,
  RouteArrow,
  RouteIcon,
  RouteModalDivider,
  RouteStepArrow,
  SearchIcon,
  SelectDownArrowButton,
  SentArray,
  SlippageWaves,
  StarIcon,
  SwitchTokensIcon,
  TooltipIcon,
  TxFailedIcon,
  WalletConnectIcon,
  WalletIcon,
  WarningIcon,
  ArbitrumLogo,
  AvalancheLogo,
  BinanceSmartChainLogo,
  EthereumLogo,
  FantomLogo,
  GnosisLogo,
  OptimismLogo,
  PolygonLogo,

  //Messages
  ConfirmSwapModalErrorMsg,
  LightTooltip,
  RefreshRateWarningMsg,
  SlippageWarningMsg,

  //Modals
  AddTokenModal,
  AlertModal,
  AllProtocolsModal,
  ConfirmSwapModal,
  ConnectionModal,
  CustomTokensModal,
  Modal,
  RouteModal,
  SelectTokenModal,
  SettingsModal,
  SignTxModal,
  SwapTokenBox,
  TxSentModal,

  //Other
  GasPriceOptions,
  PinnedToken,
  RadioGroup,
  RateSection,
  RouteContent,
  SettingsMode,
  VirtualizedTokenList,

  //Swap
  SwapOptionItem,
  SwapOptionItemLabel,
  SwapOptionsContainer,

  //Text
  DexknotTypography,
  SkeletonText,

  //Types
  MainButtonType,
  ModalHeaderType,
} from '@dexknot/ui-components';