diff --git a/ui/pages/swaps/main-quote-summary/README.mdx b/ui/pages/swaps/main-quote-summary/README.mdx
new file mode 100644
index 000000000..75a8f89ba
--- /dev/null
+++ b/ui/pages/swaps/main-quote-summary/README.mdx
@@ -0,0 +1,14 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import MainQuoteSummary from '.';
+
+# MainQuoteSummary
+
+MainQuoteSummary displays the quote of a swap.
+
+
+
+## Component API
+
+
\ No newline at end of file
diff --git a/ui/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
index ceab8ef75..990a9276f 100644
--- a/ui/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
@@ -129,21 +129,54 @@ export default function MainQuoteSummary({
}
MainQuoteSummary.propTypes = {
+ /**
+ * The amount that will be sent in the smallest denomination.
+ * For example, wei is the smallest denomination for ether.
+ */
sourceValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(BigNumber),
]).isRequired,
+
+ /**
+ * Maximum number of decimal places for the source token.
+ */
sourceDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+ /**
+ * The ticker symbol for the source token.
+ */
sourceSymbol: PropTypes.string.isRequired,
+
+ /**
+ * The amount that will be received in the smallest denomination.
+ * For example, wei is the smallest denomination for ether.
+ */
destinationValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(BigNumber),
]).isRequired,
+
+ /**
+ * Maximum number of decimal places for the destination token.
+ */
destinationDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
+
+ /**
+ * The ticker symbol for the destination token.
+ */
destinationSymbol: PropTypes.string.isRequired,
+
+ /**
+ * The location of the source token icon file.
+ */
sourceIconUrl: PropTypes.string,
+
+ /**
+ * The location of the destination token icon file.
+ */
destinationIconUrl: PropTypes.string,
};
diff --git a/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js b/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js
index 51dd38182..7648e3e0c 100644
--- a/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js
+++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.stories.js
@@ -1,13 +1,55 @@
import React from 'react';
-import { text, number } from '@storybook/addon-knobs';
+import README from './README.mdx';
import MainQuoteSummary from './main-quote-summary';
export default {
title: 'Pages/Swaps/MainQuoteSummary',
id: __filename,
+ component: MainQuoteSummary,
+ parameters: {
+ docs: {
+ page: README,
+ },
+ },
+ argTypes: {
+ sourceValue: {
+ control: 'text',
+ },
+ sourceDecimals: {
+ control: 'number',
+ },
+ sourceSymbol: {
+ control: 'text',
+ },
+ destinationValue: {
+ control: 'text',
+ },
+ destinationDecimals: {
+ control: 'number',
+ },
+ destinationSymbol: {
+ control: 'text',
+ },
+ sourceIconUrl: {
+ control: 'text',
+ },
+ destinationIconUrl: {
+ control: 'text',
+ },
+ },
+ args: {
+ sourceValue: '2000000000000000000',
+ sourceDecimals: 18,
+ sourceSymbol: 'ETH',
+ destinationValue: '200000000000000000',
+ destinationDecimals: 18,
+ destinationSymbol: 'ABC',
+ sourceIconUrl: '.storybook/images/metamark.svg',
+ destinationIconUrl: '.storybook/images/sai.svg',
+ },
};
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
return (
{
padding: '24px',
}}
>
-
+
);
};