@xylabs/sdk-react 2.7.7 → 2.7.8

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

@@ -1 +1 @@
-{"version":3,"file":"EthAccount.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGnD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAMzC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"EthAccount.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDzC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/EthAccount/EthAccount.js

@@ -9,16 +9,38 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { EthAccountBase } from './EthAccountBase';
-import { EthAccountTo } from './EthAccountTo';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, useTheme } from '@mui/material';
+import { useContext } from 'react';
+import { EthersContext } from '../../contexts';
+import { useMediaQuery } from '../../hooks';
+import { ButtonEx } from '../ButtonEx';
+import { FlexGrowRow, FlexRow } from '../FlexBox';
+import { Identicon } from '../Identicon';
 const EthAccount = (_a) => {
-    var { to, toOptions } = _a, props = __rest(_a, ["to", "toOptions"]);
-    if (to || toOptions) {
-        return _jsx(EthAccountTo, Object.assign({ to: to, toOptions: toOptions }, props), void 0);
+    var { address, icon = false, iconSize = 16, iconOnly = false, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconSize", "iconOnly", "addressLength", "fontFamily", "toEtherScan", "onButtonClick"]);
+    const { localAddress } = useContext(EthersContext);
+    const theme = useTheme();
+    const large = useMediaQuery(theme.breakpoints.up('md'));
+    if (address) {
+        const isLocalAddress = (localAddress === null || localAddress === void 0 ? void 0 : localAddress.toString()) === address.toString();
+        const onClickLocal = (event) => {
+            onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event);
+            if (toEtherScan) {
+                window.open(`https://etherscan.io/address/${address.toString()}`, '_blank');
+            }
+        };
+        const testToDisplay = addressLength === 'long'
+            ? address.toString()
+            : addressLength === 'short'
+                ? address.toShortString()
+                : large
+                    ? address.toString()
+                    : address.toShortString();
+        return (_jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: _jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon ? _jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (_jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: testToDisplay }), void 0)), isLocalAddress ? _jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
     }
     else {
-        return _jsx(EthAccountBase, Object.assign({}, props), void 0);
+        return _jsx(ButtonEx, Object.assign({}, props, { children: ' - - ' }), void 0);
     }
 };
 export { EthAccount };

package/dist/components/EthAccount/EthAccount.js.map

@@ -1 +1 @@
-{"version":3,"file":"EthAccount.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,UAAU,GAA8B,CAAC,EAA2B,EAAE,EAAE;QAA/B,EAAE,EAAE,EAAE,SAAS,OAAY,EAAP,KAAK,cAAzB,mBAA2B,CAAF;IACtE,IAAI,EAAE,IAAI,SAAS,EAAE;QACnB,OAAO,KAAC,YAAY,kBAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IAAM,KAAK,UAAI,CAAA;KACjE;SAAM;QACL,OAAO,KAAC,cAAc,oBAAK,KAAK,UAAI,CAAA;KACrC;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"EthAccount.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAGxC,MAAM,UAAU,GAA8B,CAAC,EAU9C,EAAE,EAAE;QAV0C,EAC7C,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,6BAA6B,EAC1C,WAAW,EACX,aAAa,OAEd,EADI,KAAK,cATqC,0GAU9C,CADS;IAER,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEvD,IAAI,OAAO,EAAE;QACX,MAAM,cAAc,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,MAAK,OAAO,CAAC,QAAQ,EAAE,CAAA;QAEtE,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;YAC5D,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,CAAA;YACtB,IAAI,WAAW,EAAE;gBACf,MAAM,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAA;aAC5E;QACH,CAAC,CAAA;QAED,MAAM,aAAa,GACjB,aAAa,KAAK,MAAM;YACtB,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE;YACpB,CAAC,CAAC,aAAa,KAAK,OAAO;gBAC3B,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE;gBACzB,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE;oBACpB,CAAC,CAAC,OAAO,CAAC,aAAa,EAAE,CAAA;QAE7B,OAAO,CACL,KAAC,QAAQ,kBAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,EAAE,IAAM,KAAK,cACxE,MAAC,WAAW,kBAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,iBAC5D,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,WAAI,CAAC,CAAC,CAAC,IAAI,EACpE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,kBAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,UAAU,gBACzE,aAAa,YACH,CACd,EACA,cAAc,CAAC,CAAC,CAAC,KAAC,OAAO,kBAAC,UAAU,EAAE,GAAG,mCAAiB,CAAC,CAAC,CAAC,IAAI,aACtD,YACL,CACZ,CAAA;KACF;SAAM;QACL,OAAO,KAAC,QAAQ,oBAAK,KAAK,cAAG,OAAO,YAAY,CAAA;KACjD;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const StorybookEntry: ComponentMeta<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
-declare const Default: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
-export { Default };
+declare const Long: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const Short: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const Auto: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+export { Auto, Long, Short };
 export default StorybookEntry;
 //# sourceMappingURL=EthAccount.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EthAccount.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAKhE,QAAA,MAAM,cAAc,gFASiB,CAAA;AAIrC,QAAA,MAAM,OAAO,iFAAoB,CAAA;AASjC,OAAO,EAAE,OAAO,EAAE,CAAA;AAGlB,eAAe,cAAc,CAAA"}
+{"version":3,"file":"EthAccount.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAMhE,QAAA,MAAM,cAAc,gFASiB,CAAA;AAQrC,QAAA,MAAM,IAAI,iFAAoB,CAAA;AAS9B,QAAA,MAAM,KAAK,iFAAoB,CAAA;AAS/B,QAAA,MAAM,IAAI,iFAAoB,CAAA;AAS9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;AAG5B,eAAe,cAAc,CAAA"}

package/dist/components/EthAccount/EthAccount.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EthAddress } from '@xylabs/sdk-js';
+import { FlexRow } from '../FlexBox';
 import { EthAccount } from './EthAccount';
 const StorybookEntry = {
     argTypes: {},
@@ -11,16 +12,32 @@ const StorybookEntry = {
     },
     title: 'Components/EthAccount',
 };
-const Template = (args) => _jsx(EthAccount, Object.assign({}, args), void 0);
-const Default = Template.bind({});
-Default.args = {
+const Template = (args) => (_jsx(FlexRow, { children: _jsx(EthAccount, Object.assign({ variant: "outlined" }, args), void 0) }, void 0));
+const Long = Template.bind({});
+Long.args = {
     address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-    auto: true,
+    addressLength: 'long',
     icon: true,
     title: 'Sample EthAccount',
     toEtherScan: true,
 };
-export { Default };
+const Short = Template.bind({});
+Short.args = {
+    address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
+    addressLength: 'short',
+    icon: true,
+    title: 'Sample EthAccount',
+    toEtherScan: true,
+};
+const Auto = Template.bind({});
+Auto.args = {
+    address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
+    addressLength: 'auto',
+    icon: true,
+    title: 'Sample EthAccount',
+    toEtherScan: true,
+};
+export { Auto, Long, Short };
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry;
 //# sourceMappingURL=EthAccount.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EthAccount.stories.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,uBAAuB;CACK,CAAA;AAErC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,UAAU,oBAAK,IAAI,UAAe,CAAA;AAEjG,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,4CAA4C,CAAC;IAC5E,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,oDAAoD;AACpD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"EthAccount.stories.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,uBAAuB;CACK,CAAA;AAErC,MAAM,QAAQ,GAAsC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5D,KAAC,OAAO,cACN,KAAC,UAAU,kBAAC,OAAO,EAAC,UAAU,IAAK,IAAI,UAAe,WAC9C,CACX,CAAA;AAED,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9B,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,4CAA4C,CAAC;IAC5E,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/B,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,4CAA4C,CAAC;IAC5E,aAAa,EAAE,OAAO;IACtB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9B,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,4CAA4C,CAAC;IAC5E,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;AAE5B,oDAAoD;AACpD,eAAe,cAAc,CAAA"}

package/dist/components/EthAccount/EthAccountProps.d.ts

@@ -1,19 +1,17 @@
-import { BoxProps } from '@mui/material';
 import { EthAddress } from '@xylabs/sdk-js';
 import { MouseEventHandler } from 'react';
-import { NavigateOptions, To } from 'react-router-dom';
-interface EthAccountProps extends BoxProps {
+import { ButtonExProps } from '../ButtonEx';
+interface EthAccountProps extends ButtonExProps {
     address?: EthAddress | null;
-    auto?: boolean;
+    addressLength?: 'auto' | 'short' | 'long';
     full?: boolean;
     icon?: boolean;
+    iconSize?: number;
     iconOnly?: boolean;
-    size?: number;
     text?: boolean;
-    to?: To;
-    toOptions?: NavigateOptions;
     page?: string;
     toEtherScan?: boolean;
+    fontFamily?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 }
 export type { EthAccountProps };

package/dist/components/EthAccount/EthAccountProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EthAccountProps.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAEtD,UAAU,eAAgB,SAAQ,QAAQ;IACxC,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,eAAe,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAED,YAAY,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"EthAccountProps.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,UAAU,eAAgB,SAAQ,aAAa;IAC7C,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;IACzC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACrD;AAED,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/package.json

@@ -26,16 +26,16 @@
     "@emotion/styled": "^11.6.0",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.1",
-    "@mui/icons-material": "^5.2.0",
-    "@mui/material": "^5.2.2",
-    "@mui/styles": "^5.2.2",
-    "@storybook/addon-actions": "^6.4.7",
-    "@storybook/addon-docs": "^6.4.7",
-    "@storybook/addon-essentials": "^6.4.7",
-    "@storybook/addon-links": "^6.4.7",
-    "@storybook/components": "^6.4.7",
-    "@storybook/core-events": "^6.4.7",
-    "@storybook/react": "^6.4.7",
+    "@mui/icons-material": "^5.2.1",
+    "@mui/material": "^5.2.3",
+    "@mui/styles": "^5.2.3",
+    "@storybook/addon-actions": "^6.4.8",
+    "@storybook/addon-docs": "^6.4.8",
+    "@storybook/addon-essentials": "^6.4.8",
+    "@storybook/addon-links": "^6.4.8",
+    "@storybook/components": "^6.4.8",
+    "@storybook/core-events": "^6.4.8",
+    "@storybook/react": "^6.4.8",
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.177",
     "@types/md5": "^2.3.1",
@@ -108,5 +108,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.7"
+  "version": "2.7.8"
 }

package/src/components/EthAccount/EthAccount.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { EthAddress } from '@xylabs/sdk-js'
 
+import { FlexRow } from '../FlexBox'
 import { EthAccount } from './EthAccount'
 
 const StorybookEntry = {
@@ -14,18 +15,40 @@ const StorybookEntry = {
   title: 'Components/EthAccount',
 } as ComponentMeta<typeof EthAccount>
 
-const Template: ComponentStory<typeof EthAccount> = (args) => <EthAccount {...args}></EthAccount>
+const Template: ComponentStory<typeof EthAccount> = (args) => (
+  <FlexRow>
+    <EthAccount variant="outlined" {...args}></EthAccount>
+  </FlexRow>
+)
 
-const Default = Template.bind({})
-Default.args = {
+const Long = Template.bind({})
+Long.args = {
   address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
-  auto: true,
+  addressLength: 'long',
   icon: true,
   title: 'Sample EthAccount',
   toEtherScan: true,
 }
 
-export { Default }
+const Short = Template.bind({})
+Short.args = {
+  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
+  addressLength: 'short',
+  icon: true,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
+const Auto = Template.bind({})
+Auto.args = {
+  address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
+  addressLength: 'auto',
+  icon: true,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
+export { Auto, Long, Short }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/EthAccount/EthAccount.tsx

@@ -1,12 +1,63 @@
-import { EthAccountBase } from './EthAccountBase'
+import { Typography, useTheme } from '@mui/material'
+import { MouseEvent, useContext } from 'react'
+
+import { EthersContext } from '../../contexts'
+import { useMediaQuery } from '../../hooks'
+import { ButtonEx } from '../ButtonEx'
+import { FlexGrowRow, FlexRow } from '../FlexBox'
+import { Identicon } from '../Identicon'
 import { EthAccountProps } from './EthAccountProps'
-import { EthAccountTo } from './EthAccountTo'
 
-const EthAccount: React.FC<EthAccountProps> = ({ to, toOptions, ...props }) => {
-  if (to || toOptions) {
-    return <EthAccountTo to={to} toOptions={toOptions} {...props} />
+const EthAccount: React.FC<EthAccountProps> = ({
+  address,
+  icon = false,
+  iconSize = 16,
+  iconOnly = false,
+  addressLength = 'auto',
+  fontFamily = '"Source Code Pro",monospace',
+  toEtherScan,
+  onButtonClick,
+  ...props
+}) => {
+  const { localAddress } = useContext(EthersContext)
+  const theme = useTheme()
+
+  const large = useMediaQuery(theme.breakpoints.up('md'))
+
+  if (address) {
+    const isLocalAddress = localAddress?.toString() === address.toString()
+
+    const onClickLocal = (event: MouseEvent<HTMLButtonElement>) => {
+      onButtonClick?.(event)
+      if (toEtherScan) {
+        window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
+      }
+    }
+
+    const testToDisplay =
+      addressLength === 'long'
+        ? address.toString()
+        : addressLength === 'short'
+        ? address.toShortString()
+        : large
+        ? address.toString()
+        : address.toShortString()
+
+    return (
+      <ButtonEx onClick={onClickLocal} title={`0x${address?.toHex()}`} {...props}>
+        <FlexGrowRow justifyContent="space-between" alignItems="center">
+          {icon ? <Identicon size={iconSize} value={address?.toHex()} /> : null}
+          {iconOnly ? null : (
+            <Typography marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily}>
+              {testToDisplay}
+            </Typography>
+          )}
+          {isLocalAddress ? <FlexRow marginLeft={0.5}>(You)</FlexRow> : null}
+        </FlexGrowRow>
+      </ButtonEx>
+    )
   } else {
-    return <EthAccountBase {...props} />
+    return <ButtonEx {...props}>{' - - '}</ButtonEx>
   }
 }
 

package/src/components/EthAccount/EthAccountProps.tsx

@@ -1,20 +1,19 @@
-import { BoxProps } from '@mui/material'
 import { EthAddress } from '@xylabs/sdk-js'
 import { MouseEventHandler } from 'react'
-import { NavigateOptions, To } from 'react-router-dom'
 
-interface EthAccountProps extends BoxProps {
+import { ButtonExProps } from '../ButtonEx'
+
+interface EthAccountProps extends ButtonExProps {
   address?: EthAddress | null
-  auto?: boolean
+  addressLength?: 'auto' | 'short' | 'long'
   full?: boolean
   icon?: boolean
+  iconSize?: number
   iconOnly?: boolean
-  size?: number
   text?: boolean
-  to?: To
-  toOptions?: NavigateOptions
   page?: string
   toEtherScan?: boolean
+  fontFamily?: string
   onButtonClick?: MouseEventHandler<HTMLButtonElement>
 }
 

package/dist/components/EthAccount/EthAccountBase.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { EthAccountProps } from './EthAccountProps';
-declare const EthAccountBase: React.FC<EthAccountProps>;
-export { EthAccountBase };
-//# sourceMappingURL=EthAccountBase.d.ts.map

package/dist/components/EthAccount/EthAccountBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EthAccountBase.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountBase.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+C7C,CAAA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/EthAccount/EthAccountBase.js

@@ -1,42 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, useTheme } from '@mui/material';
-import { useContext } from 'react';
-import { EthersContext } from '../../contexts';
-import { useMediaQuery } from '../../hooks';
-import { ButtonEx } from '../ButtonEx';
-import { FlexGrowRow, FlexRow } from '../FlexBox';
-import { Identicon } from '../Identicon';
-const EthAccountBase = (_a) => {
-    var { address, icon = false, iconOnly = false, full = false, auto, size = 16, toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconOnly", "full", "auto", "size", "toEtherScan", "onButtonClick"]);
-    const { localAddress } = useContext(EthersContext);
-    const theme = useTheme();
-    const large = useMediaQuery(theme.breakpoints.up('md'));
-    const fontFamily = '"Source Code Pro",monospace';
-    if (address) {
-        const isLocalAddress = (localAddress === null || localAddress === void 0 ? void 0 : localAddress.toString()) === address.toString();
-        const onClickLocal = (event) => {
-            onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event);
-            if (toEtherScan) {
-                window.open(`https://etherscan.io/address/${address.toString()}`, '_blank');
-            }
-        };
-        const testToDisplay = full || !auto ? address.toString() : large ? address.toString() : address.toShortString();
-        return (_jsx(FlexRow, Object.assign({ margin: 0.5, padding: 0.5, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: _jsx(ButtonEx, Object.assign({ fullWidth: true, onClick: onClickLocal, variant: "outlined" }, { children: _jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon ? _jsx(Identicon, { size: size, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (_jsx(Typography, Object.assign({ variant: "body1", fontFamily: fontFamily, style: { textTransform: 'none' } }, { children: testToDisplay }), void 0)), isLocalAddress ? _jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0) }), void 0));
-    }
-    else {
-        return _jsx(FlexRow, Object.assign({}, props, { children: ' - - ' }), void 0);
-    }
-};
-export { EthAccountBase };
-//# sourceMappingURL=EthAccountBase.js.map

package/dist/components/EthAccount/EthAccountBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EthAccountBase.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountBase.tsx"],"names":[],"mappings":"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"}

package/dist/components/EthAccount/EthAccountTo.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { EthAccountProps } from './EthAccountProps';
-declare const EthAccountTo: React.FC<EthAccountProps>;
-export { EthAccountTo };
-//# sourceMappingURL=EthAccountTo.d.ts.map

package/dist/components/EthAccount/EthAccountTo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EthAccountTo.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountTo.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqB3C,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/EthAccount/EthAccountTo.js

@@ -1,30 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useNavigateToEthAddress } from '../../hooks';
-import { EthAccountBase } from './EthAccountBase';
-const EthAccountTo = (_a) => {
-    var { address, to, page, toOptions, toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "to", "page", "toOptions", "toEtherScan", "onButtonClick"]);
-    const { navigateToEthAddress } = useNavigateToEthAddress();
-    if (address) {
-        const localOnClick = (event) => {
-            onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event);
-            if (to) {
-                navigateToEthAddress(address, event, page, to, toOptions, toEtherScan);
-            }
-        };
-        return _jsx(EthAccountBase, Object.assign({ onButtonClick: localOnClick }, props), void 0);
-    }
-    return null;
-};
-export { EthAccountTo };
-//# sourceMappingURL=EthAccountTo.js.map

package/dist/components/EthAccount/EthAccountTo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EthAccountTo.js","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccountTo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAGjD,MAAM,YAAY,GAA8B,CAAC,EAQhD,EAAE,EAAE;QAR4C,EAC/C,OAAO,EACP,EAAE,EACF,IAAI,EACJ,SAAS,EACT,WAAW,EACX,aAAa,OAEd,EADI,KAAK,cAPuC,sEAQhD,CADS;IAER,MAAM,EAAE,oBAAoB,EAAE,GAAG,uBAAuB,EAAE,CAAA;IAC1D,IAAI,OAAO,EAAE;QACX,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;YAC5D,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,CAAA;YACtB,IAAI,EAAE,EAAE;gBACN,oBAAoB,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;aACvE;QACH,CAAC,CAAA;QAED,OAAO,KAAC,cAAc,kBAAC,aAAa,EAAE,YAAY,IAAM,KAAK,UAAI,CAAA;KAClE;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/src/components/EthAccount/EthAccountBase.tsx

@@ -1,60 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import { MouseEvent, useContext } from 'react'
-
-import { EthersContext } from '../../contexts'
-import { useMediaQuery } from '../../hooks'
-import { ButtonEx } from '../ButtonEx'
-import { FlexGrowRow, FlexRow } from '../FlexBox'
-import { Identicon } from '../Identicon'
-import { EthAccountProps } from './EthAccountProps'
-
-const EthAccountBase: React.FC<EthAccountProps> = ({
-  address,
-  icon = false,
-  iconOnly = false,
-  full = false,
-  auto,
-  size = 16,
-  toEtherScan,
-  onButtonClick,
-  ...props
-}) => {
-  const { localAddress } = useContext(EthersContext)
-  const theme = useTheme()
-
-  const large = useMediaQuery(theme.breakpoints.up('md'))
-  const fontFamily = '"Source Code Pro",monospace'
-
-  if (address) {
-    const isLocalAddress = localAddress?.toString() === address.toString()
-
-    const onClickLocal = (event: MouseEvent<HTMLButtonElement>) => {
-      onButtonClick?.(event)
-      if (toEtherScan) {
-        window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
-      }
-    }
-
-    const testToDisplay = full || !auto ? address.toString() : large ? address.toString() : address.toShortString()
-
-    return (
-      <FlexRow margin={0.5} padding={0.5} title={`0x${address?.toHex()}`} {...props}>
-        <ButtonEx fullWidth onClick={onClickLocal} variant="outlined">
-          <FlexGrowRow justifyContent="space-between" alignItems="center">
-            {icon ? <Identicon size={size} value={address?.toHex()} /> : null}
-            {iconOnly ? null : (
-              <Typography variant="body1" fontFamily={fontFamily} style={{ textTransform: 'none' }}>
-                {testToDisplay}
-              </Typography>
-            )}
-            {isLocalAddress ? <FlexRow marginLeft={0.5}>(You)</FlexRow> : null}
-          </FlexGrowRow>
-        </ButtonEx>
-      </FlexRow>
-    )
-  } else {
-    return <FlexRow {...props}>{' - - '}</FlexRow>
-  }
-}
-
-export { EthAccountBase }

package/src/components/EthAccount/EthAccountTo.tsx

@@ -1,30 +0,0 @@
-import { MouseEvent } from 'react'
-
-import { useNavigateToEthAddress } from '../../hooks'
-import { EthAccountBase } from './EthAccountBase'
-import { EthAccountProps } from './EthAccountProps'
-
-const EthAccountTo: React.FC<EthAccountProps> = ({
-  address,
-  to,
-  page,
-  toOptions,
-  toEtherScan,
-  onButtonClick,
-  ...props
-}) => {
-  const { navigateToEthAddress } = useNavigateToEthAddress()
-  if (address) {
-    const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-      onButtonClick?.(event)
-      if (to) {
-        navigateToEthAddress(address, event, page, to, toOptions, toEtherScan)
-      }
-    }
-
-    return <EthAccountBase onButtonClick={localOnClick} {...props} />
-  }
-  return null
-}
-
-export { EthAccountTo }