@xyo-network/react-address-render 2.47.2

package/dist/esm/components/RenderRowBox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListItemIcon, ListItemText, useTheme } from '@mui/material';
+import { FlexGrowRow } from '@xylabs/react-flexbox';
+import { Identicon } from '@xylabs/react-identicon';
+import { useXyoEvent } from '@xyo-network/react-event';
+import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared';
+import { forwardRef } from 'react';
+import { FavoriteIconButton } from './favorite';
+export const AddressRenderRowBox = forwardRef(({ address, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, showFavorite = false, ...props }, ref) => {
+    const theme = useTheme();
+    const sharedRef = useShareForwardedRef(ref);
+    const [elementRef, dispatch] = useXyoEvent(undefined, sharedRef);
+    return (_jsxs(FlexGrowRow, { gap: 2, justifyContent: "flex-start", ref: elementRef, onClick: () => (address ? dispatch('address', 'click', address) : undefined), ...props, children: [icons && address ? (_jsx(ListItemIcon, { sx: { minWidth: 0 }, children: _jsx(Identicon, { size: iconSize, value: address }) })) : null, iconOnly ? null : (_jsx(ListItemText, { children: _jsx(EllipsizeBox, { ellipsisPosition: 'end', width: "100%", typographyProps: { fontSize: theme.typography.body1.fontSize }, children: address }) })), children, showFavorite && address ? _jsx(FavoriteIconButton, { size: 'small', address: address, favorite: favoriteProp }) : null] }));
+});
+AddressRenderRowBox.displayName = 'AddressRenderRowBox';
+//# sourceMappingURL=RenderRowBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RenderRowBox.js","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAa/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAC3C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7H,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,OAAO,CACL,MAAC,WAAW,IACV,GAAG,EAAE,CAAC,EACN,cAAc,EAAC,YAAY,EAC3B,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KACxE,KAAK,aAER,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAClB,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,YAC/B,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAI,GAChC,CAChB,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,YAAY,cACX,KAAC,YAAY,IAAC,gBAAgB,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,YAC/G,OAAO,GACK,GACF,CAChB,EACA,QAAQ,EACR,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,IAAI,IACrG,CACf,CAAA;AACH,CAAC,CACF,CAAA;AAED,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA"}

package/dist/esm/components/favorite/FavoriteIconButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { IconButton } from '@mui/material';
+import { useXyoEvent } from '@xyo-network/react-event';
+import { useShareForwardedRef } from '@xyo-network/react-shared';
+import { forwardRef, useEffect, useState } from 'react';
+export const FavoriteIconButton = forwardRef(({ address, children, favorite: favoriteProp, ...props }, ref) => {
+    const [favorite, setFavorite] = useState(favoriteProp);
+    useEffect(() => {
+        setFavorite(favoriteProp);
+    }, [favoriteProp]);
+    const sharedRef = useShareForwardedRef(ref);
+    const [buttonRef, dispatch] = useXyoEvent(undefined, sharedRef);
+    return (_jsxs(IconButton, { ref: buttonRef, 
+        // used to prevent parent items from rippling when IconButton is clicked
+        onMouseDown: (e) => e.stopPropagation(), onClick: (event) => {
+            event.stopPropagation();
+            setFavorite((current) => {
+                const newFavoriteState = !current;
+                const favoriteEvent = {
+                    address,
+                    favorite: newFavoriteState,
+                };
+                dispatch('address', 'favorite', JSON.stringify(favoriteEvent));
+                return newFavoriteState;
+            });
+        }, ...props, children: [favorite ? _jsx(StarIcon, { color: "secondary" }) : _jsx(StarBorderIcon, {}), children] }));
+});
+FavoriteIconButton.displayName = 'FavoriteIconButton';
+//# sourceMappingURL=FavoriteIconButton.js.map

package/dist/esm/components/favorite/FavoriteIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteIconButton.js","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAYvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,YAAY,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAE/D,OAAO,CACL,MAAC,UAAU,IACT,GAAG,EAAE,SAAS;QACd,wEAAwE;QACxE,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,WAAW,CAAC,CAAC,OAAO,EAAE,EAAE;gBACtB,MAAM,gBAAgB,GAAG,CAAC,OAAO,CAAA;gBACjC,MAAM,aAAa,GAAkB;oBACnC,OAAO;oBACP,QAAQ,EAAE,gBAAgB;iBAC3B,CAAA;gBACD,QAAQ,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAA;gBAC9D,OAAO,gBAAgB,CAAA;YACzB,CAAC,CAAC,CAAA;QACJ,CAAC,KACG,KAAK,aAER,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,EAC9D,QAAQ,IACE,CACd,CAAA;AACH,CAAC,CACF,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA"}

package/dist/esm/components/favorite/index.js

@@ -0,0 +1,2 @@
+export * from './FavoriteIconButton';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/favorite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/favorite/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './favorite';
+export * from './RenderRowBox';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/types/components/RenderRowBox.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { WithChildren } from '@xylabs/react-shared';
+export interface AddressRenderRowBoxPropsBase {
+    address?: string | null;
+    favorite?: boolean;
+    iconOnly?: boolean;
+    iconSize?: number;
+    icons?: boolean;
+    showFavorite?: boolean;
+}
+export interface AddressRenderRowBoxProps extends WithChildren, AddressRenderRowBoxPropsBase, FlexBoxProps {
+}
+export declare const AddressRenderRowBox: import("react").ForwardRefExoticComponent<AddressRenderRowBoxProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=RenderRowBox.d.ts.map

package/dist/types/components/RenderRowBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderRowBox.d.ts","sourceRoot":"","sources":["../../../src/components/RenderRowBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAOnD,MAAM,WAAW,4BAA4B;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,YAAY,EAAE,4BAA4B,EAAE,YAAY;CAAG;AAE7G,eAAO,MAAM,mBAAmB,kHAgC/B,CAAA"}

package/dist/types/components/favorite/FavoriteIconButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+export interface FavoriteEvent {
+    address?: string;
+    favorite: boolean;
+}
+export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
+    address?: string;
+    favorite?: boolean;
+}
+export declare const FavoriteIconButton: import("react").ForwardRefExoticComponent<Omit<FavoriteIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=FavoriteIconButton.d.ts.map

package/dist/types/components/favorite/FavoriteIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteIconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/FavoriteIconButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKnD,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,uBAAwB,SAAQ,YAAY,EAAE,eAAe;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,oIAkC9B,CAAA"}

package/dist/types/components/favorite/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FavoriteIconButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/favorite/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/favorite/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/types/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './favorite';
+export * from './RenderRowBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@xyo-network/react-address-render",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^2.16.11",
+    "@xylabs/react-identicon": "^2.16.11",
+    "@xylabs/react-shared": "^2.16.11",
+    "@xyo-network/react-event": "^2.47.2",
+    "@xyo-network/react-shared": "^2.47.2"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "axios": "^1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@storybook/react": "^6.5.16",
+    "@xylabs/ts-scripts-yarn3": "^2.16.1",
+    "@xylabs/tsconfig-react": "^2.16.1",
+    "@xyo-network/account": "^2.53.3",
+    "require-from-string": "^2.0.2",
+    "typescript": "^4.9.5"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "version": "2.47.2"
+}

package/src/components/RenderRowBox.stories.tsx

@@ -0,0 +1,66 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Account } from '@xyo-network/account'
+import { useXyoEvent } from '@xyo-network/react-event'
+
+import { AddressRenderRowBox } from './RenderRowBox'
+
+const address = new Account({ phrase: 'temp' }).addressValue.hex
+
+const StorybookEntry = {
+  argTypes: {},
+  component: AddressRenderRowBox,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'address/render/AddressRenderRowBox',
+} as ComponentMeta<typeof AddressRenderRowBox>
+
+const Template: ComponentStory<typeof AddressRenderRowBox> = (args) => {
+  const [ref] = useXyoEvent<HTMLLIElement>((noun, verb, data) => console.log(`${noun}|${verb}|${data}`))
+  return <AddressRenderRowBox {...args} ref={ref} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithAddress = Template.bind({})
+WithAddress.args = {
+  address,
+}
+
+const WithIcon = Template.bind({})
+WithIcon.args = {
+  address,
+  icons: true,
+}
+
+const WithIconOnly = Template.bind({})
+WithIconOnly.args = {
+  address,
+  iconOnly: true,
+  icons: true,
+}
+
+const WithFavorite = Template.bind({})
+WithFavorite.args = {
+  address,
+  favorite: true,
+  icons: true,
+  showFavorite: true,
+}
+
+const WithChildren = Template.bind({})
+WithChildren.args = {
+  address,
+  children: <span>{'[InsertedChild]'}</span>,
+  favorite: true,
+  icons: true,
+  showFavorite: true,
+}
+
+export { Default, WithAddress, WithChildren, WithFavorite, WithIcon, WithIconOnly }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/RenderRowBox.tsx

@@ -0,0 +1,56 @@
+import { ListItemIcon, ListItemText, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'
+import { Identicon } from '@xylabs/react-identicon'
+import { WithChildren } from '@xylabs/react-shared'
+import { useXyoEvent } from '@xyo-network/react-event'
+import { EllipsizeBox, useShareForwardedRef } from '@xyo-network/react-shared'
+import { forwardRef } from 'react'
+
+import { FavoriteIconButton } from './favorite'
+
+export interface AddressRenderRowBoxPropsBase {
+  address?: string | null
+  favorite?: boolean
+  iconOnly?: boolean
+  iconSize?: number
+  icons?: boolean
+  showFavorite?: boolean
+}
+
+export interface AddressRenderRowBoxProps extends WithChildren, AddressRenderRowBoxPropsBase, FlexBoxProps {}
+
+export const AddressRenderRowBox = forwardRef<HTMLElement, AddressRenderRowBoxProps>(
+  ({ address, children, favorite: favoriteProp = false, iconOnly, iconSize = 24, icons, showFavorite = false, ...props }, ref) => {
+    const theme = useTheme()
+
+    const sharedRef = useShareForwardedRef(ref)
+    const [elementRef, dispatch] = useXyoEvent(undefined, sharedRef)
+
+    return (
+      <FlexGrowRow
+        gap={2}
+        justifyContent="flex-start"
+        ref={elementRef}
+        onClick={() => (address ? dispatch('address', 'click', address) : undefined)}
+        {...props}
+      >
+        {icons && address ? (
+          <ListItemIcon sx={{ minWidth: 0 }}>
+            <Identicon size={iconSize} value={address} />
+          </ListItemIcon>
+        ) : null}
+        {iconOnly ? null : (
+          <ListItemText>
+            <EllipsizeBox ellipsisPosition={'end'} width="100%" typographyProps={{ fontSize: theme.typography.body1.fontSize }}>
+              {address}
+            </EllipsizeBox>
+          </ListItemText>
+        )}
+        {children}
+        {showFavorite && address ? <FavoriteIconButton size={'small'} address={address} favorite={favoriteProp} /> : null}
+      </FlexGrowRow>
+    )
+  },
+)
+
+AddressRenderRowBox.displayName = 'AddressRenderRowBox'

package/src/components/favorite/FavoriteIconButton.tsx

@@ -0,0 +1,55 @@
+import StarIcon from '@mui/icons-material/Star'
+import StarBorderIcon from '@mui/icons-material/StarBorder'
+import { IconButton, IconButtonProps } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+import { useXyoEvent } from '@xyo-network/react-event'
+import { useShareForwardedRef } from '@xyo-network/react-shared'
+import { forwardRef, useEffect, useState } from 'react'
+
+export interface FavoriteEvent {
+  address?: string
+  favorite: boolean
+}
+
+export interface FavoriteIconButtonProps extends WithChildren, IconButtonProps {
+  address?: string
+  favorite?: boolean
+}
+
+export const FavoriteIconButton = forwardRef<HTMLButtonElement, FavoriteIconButtonProps>(
+  ({ address, children, favorite: favoriteProp, ...props }, ref) => {
+    const [favorite, setFavorite] = useState(favoriteProp)
+    useEffect(() => {
+      setFavorite(favoriteProp)
+    }, [favoriteProp])
+
+    const sharedRef = useShareForwardedRef(ref)
+    const [buttonRef, dispatch] = useXyoEvent(undefined, sharedRef)
+
+    return (
+      <IconButton
+        ref={buttonRef}
+        // used to prevent parent items from rippling when IconButton is clicked
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(event) => {
+          event.stopPropagation()
+          setFavorite((current) => {
+            const newFavoriteState = !current
+            const favoriteEvent: FavoriteEvent = {
+              address,
+              favorite: newFavoriteState,
+            }
+            dispatch('address', 'favorite', JSON.stringify(favoriteEvent))
+            return newFavoriteState
+          })
+        }}
+        {...props}
+      >
+        {favorite ? <StarIcon color="secondary" /> : <StarBorderIcon />}
+        {children}
+      </IconButton>
+    )
+  },
+)
+
+FavoriteIconButton.displayName = 'FavoriteIconButton'

package/src/components/favorite/index.ts

@@ -0,0 +1 @@
+export * from './FavoriteIconButton'

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './favorite'
+export * from './RenderRowBox'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'