@xylabs/sdk-react 2.7.8 → 2.7.9

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":";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"}
+{"version":3,"file":"EthAccount.d.ts","sourceRoot":"","sources":["../../../src/components/EthAccount/EthAccount.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+DzC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/EthAccount/EthAccount.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography, useTheme } from '@mui/material';
+import { assertEx, EthAddress } from '@xylabs/sdk-js';
 import { useContext } from 'react';
 import { EthersContext } from '../../contexts';
 import { useMediaQuery } from '../../hooks';
@@ -22,26 +23,23 @@ const EthAccount = (_a) => {
     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(ButtonEx, Object.assign({}, props, { children: ' - - ' }), void 0);
-    }
+    const isLocalAddress = address ? (localAddress === null || localAddress === void 0 ? void 0 : localAddress.toString()) === address.toString() : false;
+    const onClickLocal = (event) => {
+        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event);
+        if (toEtherScan && address) {
+            window.open(`https://etherscan.io/address/${address.toString()}`, '_blank');
+        }
+    };
+    const addressToDisplay = assertEx(address !== null && address !== void 0 ? address : EthAddress.fromString('0x00'), 'Bad Eth Address');
+    const testToDisplay = addressLength === 'long'
+        ? addressToDisplay.toString()
+        : addressLength === 'short'
+            ? addressToDisplay.toShortString()
+            : large
+                ? addressToDisplay.toString()
+                : addressToDisplay.toShortString();
+    // Note: We use the all zero address for spacing in case it is
+    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 : (_jsxs(FlexRow, { children: [_jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay }), void 0), address ? null : (_jsx(Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" }), void 0))] }, void 0)), isLocalAddress ? _jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
 };
 export { EthAccount };
 //# sourceMappingURL=EthAccount.js.map

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

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

@@ -2,8 +2,11 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const StorybookEntry: ComponentMeta<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Long: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const LongEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Short: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const ShortEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Auto: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
-export { Auto, Long, Short };
+declare const AutoEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+export { Auto, AutoEmpty, Long, LongEmpty, Short, ShortEmpty };
 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;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"}
+{"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,SAAS,iFAAoB,CAAA;AAQnC,QAAA,MAAM,KAAK,iFAAoB,CAAA;AAS/B,QAAA,MAAM,UAAU,iFAAoB,CAAA;AAQpC,QAAA,MAAM,IAAI,iFAAoB,CAAA;AAS9B,QAAA,MAAM,SAAS,iFAAoB,CAAA;AAQnC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,CAAA;AAG9D,eAAe,cAAc,CAAA"}

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

@@ -21,6 +21,13 @@ Long.args = {
     title: 'Sample EthAccount',
     toEtherScan: true,
 };
+const LongEmpty = Template.bind({});
+LongEmpty.args = {
+    addressLength: 'long',
+    icon: true,
+    title: 'Sample EthAccount',
+    toEtherScan: true,
+};
 const Short = Template.bind({});
 Short.args = {
     address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
@@ -29,6 +36,13 @@ Short.args = {
     title: 'Sample EthAccount',
     toEtherScan: true,
 };
+const ShortEmpty = Template.bind({});
+ShortEmpty.args = {
+    addressLength: 'short',
+    icon: true,
+    title: 'Sample EthAccount',
+    toEtherScan: true,
+};
 const Auto = Template.bind({});
 Auto.args = {
     address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
@@ -37,7 +51,14 @@ Auto.args = {
     title: 'Sample EthAccount',
     toEtherScan: true,
 };
-export { Auto, Long, Short };
+const AutoEmpty = Template.bind({});
+AutoEmpty.args = {
+    addressLength: 'auto',
+    icon: true,
+    title: 'Sample EthAccount',
+    toEtherScan: true,
+};
+export { Auto, AutoEmpty, Long, LongEmpty, Short, ShortEmpty };
 // 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,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"}
+{"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,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnC,SAAS,CAAC,IAAI,GAAG;IACf,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,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACpC,UAAU,CAAC,IAAI,GAAG;IAChB,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,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACnC,SAAS,CAAC,IAAI,GAAG;IACf,aAAa,EAAE,MAAM;IACrB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,CAAA;AAE9D,oDAAoD;AACpD,eAAe,cAAc,CAAA"}

package/package.json

@@ -43,7 +43,7 @@
     "@types/react": "^17",
     "@xylabs/eslint-config-react": "^2",
     "@xylabs/pixel": "^1.1.6",
-    "@xylabs/sdk-js": "^2.3.12",
+    "@xylabs/sdk-js": "^2.3.13",
     "@xylabs/ts-scripts": "^1.0.23",
     "babel-loader": "^8.2.3",
     "bn.js": "^5.2.0",
@@ -108,5 +108,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.8"
+  "version": "2.7.9"
 }

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

@@ -30,6 +30,14 @@ Long.args = {
   toEtherScan: true,
 }
 
+const LongEmpty = Template.bind({})
+LongEmpty.args = {
+  addressLength: 'long',
+  icon: true,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
 const Short = Template.bind({})
 Short.args = {
   address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
@@ -39,6 +47,14 @@ Short.args = {
   toEtherScan: true,
 }
 
+const ShortEmpty = Template.bind({})
+ShortEmpty.args = {
+  addressLength: 'short',
+  icon: true,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
 const Auto = Template.bind({})
 Auto.args = {
   address: EthAddress.fromString('0x6792b02f88b32c4fe8e31cfa41ae5af44865f930'),
@@ -48,7 +64,15 @@ Auto.args = {
   toEtherScan: true,
 }
 
-export { Auto, Long, Short }
+const AutoEmpty = Template.bind({})
+AutoEmpty.args = {
+  addressLength: 'auto',
+  icon: true,
+  title: 'Sample EthAccount',
+  toEtherScan: true,
+}
+
+export { Auto, AutoEmpty, Long, LongEmpty, Short, ShortEmpty }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/EthAccount/EthAccount.tsx

@@ -1,4 +1,5 @@
 import { Typography, useTheme } from '@mui/material'
+import { assertEx, EthAddress } from '@xylabs/sdk-js'
 import { MouseEvent, useContext } from 'react'
 
 import { EthersContext } from '../../contexts'
@@ -24,41 +25,53 @@ const EthAccount: React.FC<EthAccountProps> = ({
 
   const large = useMediaQuery(theme.breakpoints.up('md'))
 
-  if (address) {
-    const isLocalAddress = localAddress?.toString() === address.toString()
+  const isLocalAddress = address ? localAddress?.toString() === address.toString() : false
 
-    const onClickLocal = (event: MouseEvent<HTMLButtonElement>) => {
-      onButtonClick?.(event)
-      if (toEtherScan) {
-        window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
-      }
+  const onClickLocal = (event: MouseEvent<HTMLButtonElement>) => {
+    onButtonClick?.(event)
+    if (toEtherScan && address) {
+      window.open(`https://etherscan.io/address/${address.toString()}`, '_blank')
     }
+  }
+
+  const addressToDisplay = assertEx(address ?? EthAddress.fromString('0x00'), 'Bad Eth Address')
 
-    const testToDisplay =
-      addressLength === 'long'
-        ? address.toString()
-        : addressLength === 'short'
-        ? address.toShortString()
-        : large
-        ? address.toString()
-        : address.toShortString()
+  const testToDisplay =
+    addressLength === 'long'
+      ? addressToDisplay.toString()
+      : addressLength === 'short'
+      ? addressToDisplay.toShortString()
+      : large
+      ? addressToDisplay.toString()
+      : addressToDisplay.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}>
+  // Note: We use the all zero address for spacing in case it is
+
+  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 : (
+          <FlexRow>
+            <Typography
+              marginLeft={icon ? 1 : 0}
+              variant="body1"
+              fontFamily={fontFamily}
+              visibility={address ? 'inherit' : 'hidden'}
+            >
               {testToDisplay}
             </Typography>
-          )}
-          {isLocalAddress ? <FlexRow marginLeft={0.5}>(You)</FlexRow> : null}
-        </FlexGrowRow>
-      </ButtonEx>
-    )
-  } else {
-    return <ButtonEx {...props}>{' - - '}</ButtonEx>
-  }
+            {address ? null : (
+              <Typography position="absolute" marginLeft={icon ? 1 : 0} variant="body1" fontFamily={fontFamily}>
+                -- --
+              </Typography>
+            )}
+          </FlexRow>
+        )}
+        {isLocalAddress ? <FlexRow marginLeft={0.5}>(You)</FlexRow> : null}
+      </FlexGrowRow>
+    </ButtonEx>
+  )
 }
 
 export { EthAccount }