@xylabs/sdk-react 2.7.6 → 2.7.10

package/src/components/Identicon.tsx

@@ -1,23 +1,25 @@
 import md5 from 'md5'
 import React, { useEffect, useRef } from 'react'
 
+import { FlexBoxProps, FlexRow } from './FlexBox'
+
 const range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {
   return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
 }
 
-interface IdenticonProps {
+interface IdenticonProps extends FlexBoxProps {
   bg?: string
   className?: string
   count?: number
   fg?: string
-  padding?: number
+  iconPadding?: number
   palette?: string[]
   size?: number
   value?: string
 }
 
 const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {
-  const { value = '', size = 400, bg = 'transparent', count = 5, palette, padding = 0 } = props
+  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props
   let { fg } = props
   const hash = md5(value)
   const block = Math.floor(size / count)
@@ -34,9 +36,8 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
     fg = palette[index]
   }
 
-  const pad = padding
-  current.width = block * count + pad
-  current.height = block * count + pad
+  current.width = block * count + iconPadding
+  current.height = block * count + iconPadding
   const arr = hash.split('').map((el) => {
     const parsedEl = parseInt(el, 16)
     if (parsedEl < 8) {
@@ -61,26 +62,38 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
       row.forEach((el, j) => {
         if (el) {
           ctx.fillStyle = fg ? fg : '#' + hashcolor
-          ctx.fillRect(block * i + pad, block * j + pad, block - pad, block - pad)
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
         } else {
           ctx.fillStyle = bg
-          ctx.fillRect(block * i + pad, block * j + pad, block - pad, block - pad)
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
         }
       })
     })
   }
 }
 
-const Identicon: React.FC<IdenticonProps> = (props) => {
-  const { size = 400, className = 'identicon' } = props
-
+const Identicon: React.FC<IdenticonProps> = ({
+  size = 400,
+  className = 'identicon',
+  bg,
+  count,
+  fg,
+  iconPadding,
+  palette,
+  value,
+  ...props
+}) => {
   const canvas = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
-    updateCanvas(canvas, props)
+    updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })
   })
 
-  return <canvas className={className} ref={canvas} style={{ height: size, width: size }} />
+  return (
+    <FlexRow {...props}>
+      <canvas className={className} ref={canvas} style={{ height: size, width: size }} />
+    </FlexRow>
+  )
 }
 
 export { Identicon }

package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'InvertableThemeProvider',
+  title: 'Components/InvertableThemeProvider',
 } as ComponentMeta<typeof InvertableThemeProvider>
 
 const Template: ComponentStory<typeof InvertableThemeProvider> = (args) => (

package/src/components/NumberStatus/NumberStatus.stories.tsx

@@ -10,7 +10,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'NumberStatus',
+  title: 'Components/NumberStatus',
 } as ComponentMeta<typeof NumberStatus>
 
 const NumberStatusTemplate: ComponentStory<typeof NumberStatus> = (args) => <NumberStatus {...args}></NumberStatus>

package/src/components/QuickTipButton/QuickTipButton.stories.tsx

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'QuickTipButton',
+  title: 'Components/QuickTipButton',
 } as ComponentMeta<typeof QuickTipButton>
 
 const Template: ComponentStory<typeof QuickTipButton> = (args) => <QuickTipButton {...args}></QuickTipButton>

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

@@ -11,7 +11,7 @@ const StorybookEntry = {
       page: null,
     },
   },
-  title: 'TokenAmount',
+  title: 'Components/TokenAmount',
 } as ComponentMeta<typeof TokenAmount>
 
 const Template: ComponentStory<typeof TokenAmount> = (args) => <TokenAmount {...args}></TokenAmount>

package/src/components/dialogs/ErrorDialog.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { ErrorDialog } from './ErrorDialog'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ErrorDialog,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Dialogs/ErrorDialog',
+} as ComponentMeta<typeof ErrorDialog>
+
+const Template: ComponentStory<typeof ErrorDialog> = (args) => <ErrorDialog {...args}></ErrorDialog>
+
+const Default = Template.bind({})
+Default.args = {
+  error: Error('Test Error'),
+  title: 'Test Error',
+}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/dialogs/ErrorDialog.tsx

@@ -1,13 +1,13 @@
-import { Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Typography } from '@mui/material'
 import { AxiosError } from 'axios'
 import React from 'react'
 
 import { ButtonEx } from '../ButtonEx'
 import { FlexRow } from '../FlexBox'
 
-interface Props {
+export interface ErrorDialogProps extends DialogProps {
   error?: Error
-  onClose?: (retry: boolean) => void
+  onAction?: (retry: boolean) => void
   title?: string
 }
 
@@ -15,22 +15,25 @@ const toAxiosError = (error: Error) => {
   return (error as AxiosError).isAxiosError ? (error as AxiosError) : undefined
 }
 
-const ErrorDialogOpen: React.FC<Props> = (props) => {
-  const { onClose, title = 'Oops. Something went wrong.', error = Error('Unknown Error') } = props
-
+const ErrorDialogOpen: React.FC<ErrorDialogProps> = ({
+  onAction,
+  title = 'Oops. Something went wrong.',
+  error = Error('Unknown Error'),
+  ...props
+}) => {
   const onCloseClicked = () => {
-    onClose?.(false)
+    onAction?.(false)
   }
 
   const onRetryClicked = () => {
-    onClose?.(true)
+    onAction?.(true)
   }
 
   const axiosError = toAxiosError(error)
   const message = error.message ?? error.toString()
 
   return (
-    <Dialog onClose={onClose} open={!!error}>
+    <Dialog {...props}>
       <DialogTitle>{title}</DialogTitle>
       <DialogContent>
         <FlexRow>
@@ -53,13 +56,10 @@ const ErrorDialogOpen: React.FC<Props> = (props) => {
   )
 }
 
-const ErrorDialog: React.FC<Props> = (props) => {
-  const { error } = props
+export const ErrorDialog: React.FC<ErrorDialogProps> = ({ open, error, ...props }) => {
   if (error) {
-    return <ErrorDialogOpen {...props} />
+    return <ErrorDialogOpen open={!!error || open} error={error} {...props} />
   } else {
     return null
   }
 }
-
-export { ErrorDialog }

package/src/components/dialogs/MessageDialog.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { MessageDialog } from './MessageDialog'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: MessageDialog,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Dialogs/MessageDialog',
+} as ComponentMeta<typeof MessageDialog>
+
+const Template: ComponentStory<typeof MessageDialog> = (args) => <MessageDialog {...args}>Test Message</MessageDialog>
+
+const Default = Template.bind({})
+Default.args = {
+  open: true,
+  title: 'Test Error',
+}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/dialogs/MessageDialog.tsx

@@ -2,12 +2,12 @@ import { Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle
 
 import { FlexCol, FlexRow } from '../FlexBox'
 
-interface Props extends DialogProps {
+export interface MessageDialogProps extends DialogProps {
   onOk?: () => void
   onCancel?: () => void
 }
 
-const MessageDialog: React.FC<Props> = ({ onOk, onCancel, children, title, ...props }) => {
+export const MessageDialog: React.FC<MessageDialogProps> = ({ onOk, onCancel, children, title, ...props }) => {
   return (
     <Dialog {...props}>
       <DialogTitle>{title}</DialogTitle>
@@ -27,5 +27,3 @@ const MessageDialog: React.FC<Props> = ({ onOk, onCancel, children, title, ...pr
     </Dialog>
   )
 }
-
-export { MessageDialog }

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 }