@xyo-network/react-shared 2.27.21 → 2.27.24

package/dist/esm/components/TokenBar/TokenBar.d.ts

@@ -1,8 +1,12 @@
-/// <reference types="react" />
-import { PaperProps } from '@mui/material';
+import { PaperProps, TypographyProps } from '@mui/material';
+import { ReactNode } from 'react';
 export interface TokenBarProps extends PaperProps {
     text1?: string | number;
+    text1Props?: TypographyProps;
+    text1Suffix?: ReactNode;
     text2?: string | number;
+    text2Props?: TypographyProps;
+    text2Suffix?: ReactNode;
 }
 export declare const TokenBar: React.FC<TokenBarProps>;
 //# sourceMappingURL=TokenBar.d.ts.map

package/dist/esm/components/TokenBar/TokenBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAA;AAE7D,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAa5C,CAAA"}
+{"version":3,"file":"TokenBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAe5C,CAAA"}

package/dist/esm/components/TokenBar/TokenBar.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Paper, Typography } from '@mui/material';
 import { FlexRow } from '@xylabs/react-flexbox';
-export const TokenBar = ({ text1, text2, ...props }) => {
-    return (_jsx(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: _jsxs(FlexRow, { justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", fontWeight: 300, margin: 1, children: text1 }), _jsx(Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, children: text2 })] }) }));
+export const TokenBar = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
+    return (_jsx(Paper, { elevation: 0, className: "TokenBar-root", ...props, children: _jsxs(FlexRow, { justifyContent: "space-between", children: [_jsxs(Typography, { variant: "body1", fontWeight: 300, margin: 1, ...text1Props, children: [text1, text1Suffix] }), _jsxs(Typography, { variant: "body1", fontWeight: 300, textTransform: "uppercase", color: "gray", margin: 1, ...text2Props, children: [text2, text2Suffix] })] }) }));
 };
 //# sourceMappingURL=TokenBar.js.map

package/dist/esm/components/TokenBar/TokenBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenBar.js","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAM/C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,KAAK,KAAK,YACtD,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,aACrC,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,YACnD,KAAK,GACK,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,YAC1F,KAAK,GACK,IACL,GACJ,CACT,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenBar.js","sourceRoot":"","sources":["../../../../src/components/TokenBar/TokenBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAmB,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAW/C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChI,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,KAAK,KAAK,YACtD,MAAC,OAAO,IAAC,cAAc,EAAC,eAAe,aACrC,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,KAAM,UAAU,aACnE,KAAK,EACL,WAAW,IACD,EACb,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,CAAC,KAAM,UAAU,aAC1G,KAAK,EACL,WAAW,IACD,IACL,GACJ,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/TokenSummary/TokenSummary.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import { PaperProps } from '@mui/material';
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-export interface TokenSummaryProps extends FlexBoxProps {
+import { AvatarProps, CardHeaderProps } from '@mui/material';
+export interface TokenSummaryProps extends CardHeaderProps {
     icon?: string;
     symbol?: string;
-    imgBgProps?: PaperProps;
-    imageMode?: 'circle';
+    imgBgProps?: AvatarProps;
 }
 export declare const TokenSummary: React.FC<TokenSummaryProps>;
 //# sourceMappingURL=TokenSummary.d.ts.map

package/dist/esm/components/TokenSummary/TokenSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,SAAS,CAAC,EAAE,QAAQ,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqBpD,CAAA"}
+{"version":3,"file":"TokenSummary.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,WAAW,EAAc,eAAe,EAAwB,MAAM,eAAe,CAAA;AAEtG,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBpD,CAAA"}

package/dist/esm/components/TokenSummary/TokenSummary.js

@@ -1,14 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Paper, Typography } from '@mui/material';
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
-export const TokenSummary = ({ imageMode = 'circle', imgBgProps = {}, icon, symbol, children, ...props }) => {
-    const paperProps = {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, CardHeader, Typography, useTheme } from '@mui/material';
+export const TokenSummary = ({ imgBgProps = {}, icon, symbol, children, ...props }) => {
+    const theme = useTheme();
+    const avatarProps = {
         ...imgBgProps,
         sx: {
+            background: theme.palette.common.white,
+            height: '40px',
+            padding: theme.spacing(0.25),
             ...imgBgProps.sx,
-            borderRadius: imageMode === 'circle' ? '50%' : 'inherit',
         },
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(FlexRow, { className: "TokenSummary-root", paddingBottom: 3, width: "100%", justifyContent: "flex-start", ...props, children: [_jsx(Paper, { component: FlexCol, padding: 1, className: "token-logo-bg", height: "40px", width: "40px", ...paperProps, children: _jsx("img", { src: icon, height: "25px" }) }), _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", paddingLeft: 1, children: symbol })] }), children] }));
+    return (_jsxs(_Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Avatar, { src: icon, alt: symbol, ...avatarProps }), title: _jsx(Typography, { variant: "h6", fontWeight: 300, textTransform: "uppercase", children: symbol }), ...props }), children] }));
 };
 //# sourceMappingURL=TokenSummary.js.map

package/dist/esm/components/TokenSummary/TokenSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenSummary.js","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAStE,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,GAAG,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvI,MAAM,UAAU,GAAG;QACjB,GAAG,UAAU;QACb,EAAE,EAAE;YACF,GAAG,UAAU,CAAC,EAAE;YAChB,YAAY,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;SACzD;KACF,CAAA;IACD,OAAO,CACL,8BACE,MAAC,OAAO,IAAC,SAAS,EAAC,mBAAmB,EAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,YAAY,KAAK,KAAK,aACzG,KAAC,KAAK,IAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,KAAK,UAAU,YACxG,cAAK,GAAG,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,GAAG,GAC1B,EACR,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,EAAC,WAAW,EAAE,CAAC,YAC/E,MAAM,GACI,IACL,EACT,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"TokenSummary.js","sourceRoot":"","sources":["../../../../src/components/TokenSummary/TokenSummary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,UAAU,EAAmB,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQtG,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,WAAW,GAAG;QAClB,GAAG,UAAU;QACb,EAAE,EAAE;YACF,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;YACtC,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;YAC5B,GAAG,UAAU,CAAC,EAAE;SACjB;KACF,CAAA;IACD,OAAO,CACL,8BACE,KAAC,UAAU,IACT,MAAM,EAAE,KAAC,MAAM,IAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAM,WAAW,GAAI,EAC3D,KAAK,EACH,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAE,GAAG,EAAE,aAAa,EAAC,WAAW,YAChE,MAAM,GACI,KAEX,KAAK,GACT,EACD,QAAQ,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -21,6 +21,7 @@
     "@xylabs/react-dialogs": "^2.14.11",
     "@xylabs/react-flexbox": "^2.14.11",
     "@xylabs/react-link": "^2.14.11",
+    "@xylabs/react-quick-tip-button": "^2.14.11",
     "@xylabs/react-shared": "^2.14.11",
     "@xyo-network/core": "^2.25.2",
     "axios": "^0.27.2",
@@ -36,7 +37,7 @@
     "@xylabs/pixel": "^1.4.5",
     "@xylabs/tsconfig-dom": "^2.5.92",
     "@xyo-network/api": "^2.25.2",
-    "@xyo-network/react-storybook": "^2.27.21"
+    "@xyo-network/react-storybook": "^2.27.24"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -80,5 +81,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.27.21"
+  "version": "2.27.24"
 }

package/src/components/TokenBar/TokenBar.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { QuickTipButton } from '@xylabs/react-quick-tip-button'
 import { BrowserRouter } from 'react-router-dom'
 
 import { TokenBar } from './TokenBar'
@@ -22,10 +23,13 @@ const Template: ComponentStory<typeof TokenBar> = (args) => (
 const WithData = Template.bind({})
 WithData.args = { text1: 'Hello', text2: 'World' }
 
+const WithSuffixes = Template.bind({})
+WithSuffixes.args = { text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" /> }
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 
-export { WithData }
+export { WithData, WithSuffixes }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/TokenBar/TokenBar.tsx

@@ -1,19 +1,26 @@
-import { Paper, PaperProps, Typography } from '@mui/material'
+import { Paper, PaperProps, Typography, TypographyProps } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
+import { ReactNode } from 'react'
 export interface TokenBarProps extends PaperProps {
   text1?: string | number
+  text1Props?: TypographyProps
+  text1Suffix?: ReactNode
   text2?: string | number
+  text2Props?: TypographyProps
+  text2Suffix?: ReactNode
 }
 
-export const TokenBar: React.FC<TokenBarProps> = ({ text1, text2, ...props }) => {
+export const TokenBar: React.FC<TokenBarProps> = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
   return (
     <Paper elevation={0} className="TokenBar-root" {...props}>
       <FlexRow justifyContent="space-between">
-        <Typography variant="body1" fontWeight={300} margin={1}>
+        <Typography variant="body1" fontWeight={300} margin={1} {...text1Props}>
           {text1}
+          {text1Suffix}
         </Typography>
-        <Typography variant="body1" fontWeight={300} textTransform="uppercase" color="gray" margin={1}>
+        <Typography variant="body1" fontWeight={300} textTransform="uppercase" color="gray" margin={1} {...text2Props}>
           {text2}
+          {text2Suffix}
         </Typography>
       </FlexRow>
     </Paper>

package/src/components/TokenSummary/TokenSummary.tsx

@@ -1,31 +1,33 @@
-import { Paper, PaperProps, Typography } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { Avatar, AvatarProps, CardHeader, CardHeaderProps, Typography, useTheme } from '@mui/material'
 
-export interface TokenSummaryProps extends FlexBoxProps {
+export interface TokenSummaryProps extends CardHeaderProps {
   icon?: string
   symbol?: string
-  imgBgProps?: PaperProps
-  imageMode?: 'circle'
+  imgBgProps?: AvatarProps
 }
 
-export const TokenSummary: React.FC<TokenSummaryProps> = ({ imageMode = 'circle', imgBgProps = {}, icon, symbol, children, ...props }) => {
-  const paperProps = {
+export const TokenSummary: React.FC<TokenSummaryProps> = ({ imgBgProps = {}, icon, symbol, children, ...props }) => {
+  const theme = useTheme()
+  const avatarProps = {
     ...imgBgProps,
     sx: {
+      background: theme.palette.common.white,
+      height: '40px',
+      padding: theme.spacing(0.25),
       ...imgBgProps.sx,
-      borderRadius: imageMode === 'circle' ? '50%' : 'inherit',
     },
   }
   return (
     <>
-      <FlexRow className="TokenSummary-root" paddingBottom={3} width="100%" justifyContent="flex-start" {...props}>
-        <Paper component={FlexCol} padding={1} className="token-logo-bg" height="40px" width="40px" {...paperProps}>
-          <img src={icon} height="25px" />
-        </Paper>
-        <Typography variant="h6" fontWeight={300} textTransform="uppercase" paddingLeft={1}>
-          {symbol}
-        </Typography>
-      </FlexRow>
+      <CardHeader
+        avatar={<Avatar src={icon} alt={symbol} {...avatarProps} />}
+        title={
+          <Typography variant="h6" fontWeight={300} textTransform="uppercase">
+            {symbol}
+          </Typography>
+        }
+        {...props}
+      />
       {children}
     </>
   )