1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/swaps/select-quote-popover
2022-10-04 18:55:05 +02:00
..
__snapshots__ remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
quote-details Add more unit / integration tests for Swaps (#16040) 2022-10-04 18:55:05 +02:00
sort-list Add more unit / integration tests for Swaps (#16040) 2022-10-04 18:55:05 +02:00
index.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
index.scss Update media query instances (#15068) 2022-08-04 09:03:02 -05:00
mock-quote-data.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
mock-quote-data.test.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
README.mdx docs: addition of controls and readme in SelectQuotePopover story (#15187) 2022-08-09 16:48:48 -05:00
select-quote-popover-constants.js remove the ui/app and ui/lib folders (#10911) 2021-04-28 14:53:59 -05:00
select-quote-popover.js docs: addition of controls and readme in SelectQuotePopover story (#15187) 2022-08-09 16:48:48 -05:00
select-quote-popover.stories.js docs: addition of controls and readme in SelectQuotePopover story (#15187) 2022-08-09 16:48:48 -05:00
select-quote-popover.test.js Add hideEstimatedGasFee prop to sort-list and select-quote-popover tests (#14725) 2022-05-19 10:43:31 -07:00

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import Button from '.';
import SelectQuotePopover from '.';

# SelectQuotePopover

`SelectQuotePopover` is a modal that displays information gathered from multiple liquidity sources.

<Canvas>
  <Story id="ui-pages-swaps-select-quote-popover-select-quote-popover-stories-js--default-story" />
</Canvas>

## Component API

<ArgsTable of={SelectQuotePopover} />

## Usage

The following describes the props and example usage for this component.

### onClose

Action called when close button is clicked. It's also called on submit action.

### onSubmit

Action called when Select button is clicked

### swapToSymbol

Name of the receiving symbol

### quoteDataRows

data provided with the following properties:

| type                       | Types     |
| -------------------------- | --------- |
| `aggId`                    | `string`  |
| `amountReceiving`          | `string`  |
| `destinationTokenDecimals` | `number`  |
| `destinationTokenSymbol`   | `string`  |
| `destinationTokenValue`    | `string`  |
| `isBestQuote--primary`     | `boolean` |
| `networkFees`              | `string`  |
| `quoteSource`              | `string`  |
| `rawNetworkFees`           | `string`  |
| `slippage`                 | `string`  |
| `sourceTokenDecimals`      | `number`  |
| `sourceTokenSymbol`        | `string`  |
| `sourceTokenValue`         | `string`  |

### initialAggId

When `initialAggId` is defined, the corresponding quote is pre-selected in sort-list

### onQuoteDetailsIsOpened

Detail opened when click on caret of a specific quote.

### hideEstimatedGasFee

When the `hideEstimatedGasFee` is set to `true` it hides the Estimated network fees column