@xylabs/sdk-react 2.7.10 → 2.7.14

package/dist/components/TokenAmount/TokenAmount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAWrD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgC3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAWrD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6C3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/TokenAmount/TokenAmount.js

@@ -25,11 +25,10 @@ const base10Shift = (bn, places) => {
     }
 };
 const TokenAmount = (_a) => {
-    var { amount, places = -18, logo, label, onButtonClick } = _a, props = __rest(_a, ["amount", "places", "logo", "label", "onButtonClick"]);
+    var { textFontFamily = '"Source Code Pro",monospace', textColor, statusColor, style, amount, places = -18, logo, label, onButtonClick } = _a, props = __rest(_a, ["textFontFamily", "textColor", "statusColor", "style", "amount", "places", "logo", "label", "onButtonClick"]);
     const adjustedAmount = amount ? base10Shift(amount, places).toNumber() : undefined;
     const amountString = adjustedAmount ? Math.trunc(adjustedAmount).toLocaleString() : '-';
-    const fontFamily = '"Source Code Pro",monospace';
-    return (_jsx(FlexRow, Object.assign({ margin: 0.5, padding: 0.5 }, props, { children: _jsx(ButtonEx, Object.assign({ fullWidth: true, variant: "outlined", onClick: onButtonClick }, { children: _jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: !amount, busySize: 16 }, { children: [_jsxs(FlexRow, { children: [logo ? _jsx("img", { src: xyoLogo, height: 24 }, void 0) : null, label ? (_jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: fontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), _jsx(Typography, Object.assign({ noWrap: true, fontFamily: fontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0) }), void 0));
+    return (_jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: _jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: !amount, busySize: 16 }, { children: [_jsxs(FlexRow, { children: [logo ? _jsx("img", { src: xyoLogo, height: 24 }, void 0) : null, label ? (_jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), _jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
 };
 export { TokenAmount };
 //# sourceMappingURL=TokenAmount.js.map

package/dist/components/TokenAmount/TokenAmount.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.js","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,OAAO,MAAM,eAAe,CAAA;AAGnC,MAAM,WAAW,GAAG,CAAC,EAAa,EAAE,MAAc,EAAE,EAAE;IACpD,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IACrE,IAAI,MAAM,GAAG,CAAC,EAAE;QACd,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;KACtB;SAAM;QACL,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;KACtB;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAA+B,CAAC,EAA8D,EAAE,EAAE;QAAlE,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,OAAY,EAAP,KAAK,cAA5D,sDAA8D,CAAF;IAC3G,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAElF,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;IAEvF,MAAM,UAAU,GAAG,6BAA6B,CAAA;IAEhD,OAAO,CACL,KAAC,OAAO,kBAAC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,IAAM,KAAK,cAC3C,KAAC,QAAQ,kBAAC,SAAS,QAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,aAAa,gBAC3D,MAAC,OAAO,kBAAC,cAAc,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAC9E,MAAC,OAAO,eACL,IAAI,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,WAAI,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,UAAU,kBACT,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxB,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAC,SAAS,gBAEhB,KAAK,YACK,CACd,CAAC,CAAC,CAAC,IAAI,YACA,EACV,KAAC,UAAU,kBAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,gBAC/F,YAAY,YACF,aACL,YACD,YACH,CACX,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"TokenAmount.js","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,OAAO,MAAM,eAAe,CAAA;AAGnC,MAAM,WAAW,GAAG,CAAC,EAAa,EAAE,MAAc,EAAE,EAAE;IACpD,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IACrE,IAAI,MAAM,GAAG,CAAC,EAAE;QACd,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;KACtB;SAAM;QACL,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;KACtB;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAA+B,CAAC,EAWhD,EAAE,EAAE;QAX4C,EAC/C,cAAc,GAAG,6BAA6B,EAC9C,SAAS,EACT,WAAW,EACX,KAAK,EACL,MAAM,EACN,MAAM,GAAG,CAAC,EAAE,EACZ,IAAI,EACJ,KAAK,EACL,aAAa,OAEd,EADI,KAAK,cAVuC,6GAWhD,CADS;IAER,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAElF,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;IAEvF,OAAO,CACL,KAAC,QAAQ,kBAAC,KAAK,kBAAI,eAAe,EAAE,WAAW,IAAK,KAAK,GAAI,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,aAAa,IAAM,KAAK,cAC/G,MAAC,OAAO,kBAAC,cAAc,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAC9E,MAAC,OAAO,eACL,IAAI,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,WAAI,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,UAAU,kBACT,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxB,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAC,SAAS,gBAEhB,KAAK,YACK,CACd,CAAC,CAAC,CAAC,IAAI,YACA,EACV,KAAC,UAAU,kBACT,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,gBAE/B,YAAY,YACF,aACL,YACD,CACZ,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/TokenAmount/TokenAmount.stories.d.ts

@@ -3,8 +3,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const StorybookEntry: ComponentMeta<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
 declare const Default: ComponentStory<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
 declare const WithLogo: ComponentStory<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
+declare const WithLogoAndColor: ComponentStory<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
 declare const WithLabel: ComponentStory<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
 declare const WithLogoAndLabel: ComponentStory<import("react").FC<import("./TokenAmountProps").TokenAmountProps>>;
-export { Default, WithLabel, WithLogo, WithLogoAndLabel };
+export { Default, WithLabel, WithLogo, WithLogoAndColor, WithLogoAndLabel };
 export default StorybookEntry;
 //# sourceMappingURL=TokenAmount.stories.d.ts.map

package/dist/components/TokenAmount/TokenAmount.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAKhE,QAAA,MAAM,cAAc,kFASkB,CAAA;AAItC,QAAA,MAAM,OAAO,mFAAoB,CAAA;AAKjC,QAAA,MAAM,QAAQ,mFAAoB,CAAA;AAMlC,QAAA,MAAM,SAAS,mFAAoB,CAAA;AAMnC,QAAA,MAAM,gBAAgB,mFAAoB,CAAA;AAO1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;AAGzD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"TokenAmount.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAKhE,QAAA,MAAM,cAAc,kFASkB,CAAA;AAItC,QAAA,MAAM,OAAO,mFAAoB,CAAA;AAKjC,QAAA,MAAM,QAAQ,mFAAoB,CAAA;AAMlC,QAAA,MAAM,gBAAgB,mFAAoB,CAAA;AAO1C,QAAA,MAAM,SAAS,mFAAoB,CAAA;AAMnC,QAAA,MAAM,gBAAgB,mFAAoB,CAAA;AAO1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAG3E,eAAe,cAAc,CAAA"}

package/dist/components/TokenAmount/TokenAmount.stories.js

@@ -21,6 +21,12 @@ WithLogo.args = {
     amount: new BigNumber('1195c751dbcc90ab4200000', 16),
     logo: true,
 };
+const WithLogoAndColor = Template.bind({});
+WithLogoAndColor.args = {
+    amount: new BigNumber('1195c751dbcc90ab4200000', 16),
+    logo: true,
+    statusColor: '#ff0',
+};
 const WithLabel = Template.bind({});
 WithLabel.args = {
     amount: new BigNumber('1195c751dbcc90ab4200000', 16),
@@ -32,7 +38,7 @@ WithLogoAndLabel.args = {
     label: 'Balance',
     logo: true,
 };
-export { Default, WithLabel, WithLogo, WithLogoAndLabel };
+export { Default, WithLabel, WithLogo, WithLogoAndColor, WithLogoAndLabel };
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry;
 //# sourceMappingURL=TokenAmount.stories.js.map

package/dist/components/TokenAmount/TokenAmount.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.stories.js","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,wBAAwB;CACK,CAAA;AAEtC,MAAM,QAAQ,GAAuC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,UAAgB,CAAA;AAEpG,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;CACrD,CAAA;AAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClC,QAAQ,CAAC,IAAI,GAAG;IACd,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnC,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,gBAAgB,CAAC,IAAI,GAAG;IACtB,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,IAAI;CACX,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;AAEzD,oDAAoD;AACpD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"TokenAmount.stories.js","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmount.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,wBAAwB;CACK,CAAA;AAEtC,MAAM,QAAQ,GAAuC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,WAAW,oBAAK,IAAI,UAAgB,CAAA;AAEpG,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;CACrD,CAAA;AAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClC,QAAQ,CAAC,IAAI,GAAG;IACd,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,gBAAgB,CAAC,IAAI,GAAG;IACtB,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,MAAM;CACpB,CAAA;AAED,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnC,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC1C,gBAAgB,CAAC,IAAI,GAAG;IACtB,MAAM,EAAE,IAAI,SAAS,CAAC,yBAAyB,EAAE,EAAE,CAAC;IACpD,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,IAAI;CACX,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAE3E,oDAAoD;AACpD,eAAe,cAAc,CAAA"}

package/dist/components/TokenAmount/TokenAmountProps.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="bn.js" />
 import { BigNumber } from '@xylabs/sdk-js';
 import { MouseEventHandler } from 'react';
-import { FlexBoxProps } from '../FlexBox';
-interface TokenAmountProps extends FlexBoxProps {
+import { ButtonExProps } from '../ButtonEx';
+interface TokenAmountProps extends ButtonExProps {
     amount?: BigNumber | null;
     label?: string;
     logo?: boolean;
     places?: number;
+    textFontFamily?: string;
+    textColor?: string;
+    statusColor?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 }
 export type { TokenAmountProps };

package/dist/components/TokenAmount/TokenAmountProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmountProps.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmountProps.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAEzC,UAAU,gBAAiB,SAAQ,YAAY;IAC7C,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"TokenAmountProps.d.ts","sourceRoot":"","sources":["../../../src/components/TokenAmount/TokenAmountProps.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,UAAU,gBAAiB,SAAQ,aAAa;IAC9C,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/package.json

@@ -108,5 +108,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.10"
+  "version": "2.7.14"
 }

package/src/components/TokenAmount/TokenAmount.stories.tsx

@@ -27,6 +27,13 @@ WithLogo.args = {
   logo: true,
 }
 
+const WithLogoAndColor = Template.bind({})
+WithLogoAndColor.args = {
+  amount: new BigNumber('1195c751dbcc90ab4200000', 16),
+  logo: true,
+  statusColor: '#ff0',
+}
+
 const WithLabel = Template.bind({})
 WithLabel.args = {
   amount: new BigNumber('1195c751dbcc90ab4200000', 16),
@@ -40,7 +47,7 @@ WithLogoAndLabel.args = {
   logo: true,
 }
 
-export { Default, WithLabel, WithLogo, WithLogoAndLabel }
+export { Default, WithLabel, WithLogo, WithLogoAndColor, WithLogoAndLabel }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/TokenAmount/TokenAmount.tsx

@@ -15,37 +15,50 @@ const base10Shift = (bn: BigNumber, places: number) => {
   }
 }
 
-const TokenAmount: React.FC<TokenAmountProps> = ({ amount, places = -18, logo, label, onButtonClick, ...props }) => {
+const TokenAmount: React.FC<TokenAmountProps> = ({
+  textFontFamily = '"Source Code Pro",monospace',
+  textColor,
+  statusColor,
+  style,
+  amount,
+  places = -18,
+  logo,
+  label,
+  onButtonClick,
+  ...props
+}) => {
   const adjustedAmount = amount ? base10Shift(amount, places).toNumber() : undefined
 
   const amountString = adjustedAmount ? Math.trunc(adjustedAmount).toLocaleString() : '-'
 
-  const fontFamily = '"Source Code Pro",monospace'
-
   return (
-    <FlexRow margin={0.5} padding={0.5} {...props}>
-      <ButtonEx fullWidth variant="outlined" onClick={onButtonClick}>
-        <FlexRow justifyContent="space-between" width="100%" busy={!amount} busySize={16}>
-          <FlexRow>
-            {logo ? <img src={xyoLogo} height={24} /> : null}
-            {label ? (
-              <Typography
-                marginRight={1}
-                marginLeft={logo ? 1 : 0}
-                noWrap={true}
-                fontFamily={fontFamily}
-                variant="caption"
-              >
-                {label}
-              </Typography>
-            ) : null}
-          </FlexRow>
-          <Typography noWrap={true} fontFamily={fontFamily} variant="body1" style={{ textTransform: 'none' }}>
-            {amountString}
-          </Typography>
+    <ButtonEx style={{ backgroundColor: statusColor, ...style }} variant="outlined" onClick={onButtonClick} {...props}>
+      <FlexRow justifyContent="space-between" width="100%" busy={!amount} busySize={16}>
+        <FlexRow>
+          {logo ? <img src={xyoLogo} height={24} /> : null}
+          {label ? (
+            <Typography
+              marginRight={1}
+              marginLeft={logo ? 1 : 0}
+              noWrap={true}
+              fontFamily={textFontFamily}
+              variant="caption"
+            >
+              {label}
+            </Typography>
+          ) : null}
         </FlexRow>
-      </ButtonEx>
-    </FlexRow>
+        <Typography
+          color={textColor}
+          noWrap={true}
+          fontFamily={textFontFamily}
+          variant="body1"
+          style={{ textTransform: 'none' }}
+        >
+          {amountString}
+        </Typography>
+      </FlexRow>
+    </ButtonEx>
   )
 }
 

package/src/components/TokenAmount/TokenAmountProps.tsx

@@ -1,13 +1,16 @@
 import { BigNumber } from '@xylabs/sdk-js'
 import { MouseEventHandler } from 'react'
 
-import { FlexBoxProps } from '../FlexBox'
+import { ButtonExProps } from '../ButtonEx'
 
-interface TokenAmountProps extends FlexBoxProps {
+interface TokenAmountProps extends ButtonExProps {
   amount?: BigNumber | null
   label?: string
   logo?: boolean
   places?: number
+  textFontFamily?: string
+  textColor?: string
+  statusColor?: string
   onButtonClick?: MouseEventHandler<HTMLButtonElement>
 }