open-index/open-npm huggingface dataset:
npm package: @mcdevv/use-breadcrumb-dropdown
Description: this is a boilerplate hook currently, do not use. When complete, will render breadcrumbs that show sibling directories/pages upon click or mouseover
Author: mcdevv
Latest version: 0.0.5

# @mcdevv/use-breadcrumb-dropdown

> this is a boilerplate hook currently, do not use. When complete, React Hook will render breadcrumbs that show sibling directories/pages upon click or mouseover

[![NPM](https://img.shields.io/npm/v/@mcdevv/use-breadcrumb-dropdown.svg)](https://www.npmjs.com/package/@mcdevv/use-breadcrumb-dropdown) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install @mcdevv/use-breadcrumb-dropdown
# or
yarn add @mcdevv/use-breadcrumb-dropdown
```

## Usage...

```jsx
import React from 'react'

import { TwilioLogo, useCounter, useDocumentTitle } from '@mcdevv/use-breadcrumb-dropdown'

const App = () => {
  const [count, setCount] = useCounter(4)
  useDocumentTitle(count)
  return (
        <div>
          <TwilioLogo
            height='240px'
            width='520px'
            customStyles={{ border: '1px solid black' }}
        />
        <p>Currently, the count is: {count}</p>
        <button onClick={() => setCount(count + 1)}>Add 1</button>
        <button onClick={() => setCount(count - 1)}>Subtract 1</button>
        </div>
  )
}
```

## License

MIT © [@mcdevv](https://github.com/mcdevv)
npm package: @mcdex/mai2.js
Description: Mai Protocol v2 JavaScript API
Author: Liu Jie
Latest version: 0.4.17

# mai2.js - Mai Protocol v2 JavaScript API

![CoverageStatus](https://github.com/mcdexio/mai2.js/workflows/Coverage/badge.svg)

## Install
```
npm install @mcdex/mai2.js
```

## Quick start

1. Connecting to Ethereum

```
import { ethers } from 'ethers'
const provider = ethers.getDefaultProvider('homestead')
```

2. Get a user's position size

```
import { getContractReader, getAccountStorage } from '@mcdex/mai2.js'
const perpetualAddress = '0x220a9f0DD581cbc58fcFb907De0454cBF3777f76' // NOTE: this is a Perpetual address that may change in the future. Check https://github.com/mcdexio/mai-protocol-v2 for online addresses
const userAddress = '' // Paste your ETH address here
const contractReader = await getContractReader(provider)
const p = await getAccountStorage(contractReader, perpetualAddress, userAddress)
console.log(p.positionSide)
console.log(p.positionSize.toFixed())
```

3. Get a user's margin balance

```
import { getMarginBalance } from '@mcdex/mai2.js'
const m = await getMarginBalance(contractReader, perpetualAddress, userAddress)
console.log(m.toFixed())
```

## Test
```
npm run test
```

### mai2.js devloper only: prepare an env for unit tests

```
ADDRESS_OUTPUT_PATH=/tmp/address.js WRAPPER_OUTPUT_PATH=~/contract/mai2.js/tests/eth_address.ts \
    node_modules/.bin/truffle --network=mai2js_admin migrate --reset --migrations_directory=migrations_mai2js
```
npm package: @mcdex/mai3.js
Description: Mai Protocol v3 JavaScript API
Author: Zhu Tianchi
Latest version: 0.7.0

# mai3.js - Mai Protocol v3 JavaScript API

![CoverageStatus](https://github.com/mcdexio/mai3.js/workflows/Coverage/badge.svg)

## Install
```
npm install @mcdex/mai3.js
```

## Quick start

1. Goto mcdex.io/trade to open some positions.

2. Connect to Arbitrum Testnet:

```js
import { JsonRpcProvider } from '@ethersproject/providers'

const provider = new JsonRpcProvider('https://rinkeby.arbitrum.io/rpc')
const chainId = (await provider.getNetwork()).chainId
```

3. Enum Trader's positions (in all perpetual markets). A perpetual is identified by (liquidityPoolAddress, perpetualIndex):

```js
import { CHAIN_ID_TO_POOL_CREATOR_ADDRESS, PoolCreatorFactory } from '@mcdex/mai3.js'
import { listActivatePerpetualsOfTrader } from '@mcdex/mai3.js'

const traderAddress = '' // Paste your ETH address here
const poolCreator = PoolCreatorFactory.connect(CHAIN_ID_TO_POOL_CREATOR_ADDRESS[chainId], provider)
const positions = await listActivatePerpetualsOfTrader(poolCreator, traderAddress)
positions.forEach(async ({liquidityPoolAddress, perpetualIndex}) => {
  console.log(liquidityPoolAddress, perpetualIndex)
})
```

4. Get the symbol, underlying name and collateral name of a perpetual. The (ticker) symbol is a number assigned to each perpetual. The underlying name is a string. The collateral is a ERC20 token.
```js
import { getReaderContract, getLiquidityPool } from '@mcdex/mai3.js'
import { IERC20Factory, erc20Symbol } from '@mcdex/mai3.js'

const reader = await getReaderContract(provider)
const pool = await getLiquidityPool(reader, liquidityPoolAddress)

const collateralTokenAddress = pool.collateral
const collateral = IERC20Factory.connect(collateralTokenAddress, provider)
const collateralSymbol = await erc20Symbol(collateral)

const perpetual = pool.perpetuals.get(perpetualIndex)
console.log(perpetual.symbol, perpetual.underlyingSymbol, collateralSymbol)
```

5. Get the trader's position size and margin balance. A positive position means buy/long, a negative position means sell/short.
```js
import { BigNumber } from 'bignumber.js'

const account = await reader.callStatic.getAccountStorage(liquidityPoolAddress, perpetualIndex, traderAddress)
console.log(
  'position',
  new BigNumber(account.accountStorage.position.toString()).shiftedBy(-18).toFixed(),
  'margin',
  new BigNumber(account.accountStorage.margin.toString()).shiftedBy(-18).toFixed()
)
```

## Test
```
npm run test
```