@xyo-network/react-chain-transfer-plugin 1.12.7

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,46 @@
+# @xyo-network/react-chain-payload-render
+
+[![logo][]](https://xyo.network)
+
+[![npm-badge][]][npm-link]
+[![npm-downloads-badge][]][npm-link]
+[![jsdelivr-badge][]][jsdelivr-link]
+[![npm-license-badge][]](LICENSE)
+[![socket-badge][]][socket-link]
+
+XYO Layer One API
+
+## Reference
+
+**@xyo-network/react-chain-payload-render**
+
+***
+
+## Maintainers
+
+-   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
+-   [Matt Jones](https://github.com/jonesmac)
+-   [Joel Carter](https://github.com/JoelBCarter)
+-   [Jordan Trouw](https://github.com/jordantrouw)
+
+## License
+
+> See the [LICENSE](LICENSE) file for license details
+
+## Credits
+
+[Made with 🔥 and ❄️ by XYO](https://xyo.network)
+
+[logo]: https://cdn.xy.company/img/brand/XYO_full_colored.png
+
+[npm-badge]: https://img.shields.io/npm/v/@xyo-network/react-chain-provider.svg
+[npm-link]: https://www.npmjs.com/package/@xyo-network/react-chain-provider
+
+[npm-downloads-badge]: https://img.shields.io/npm/dw/@xyo-network/react-chain-provider
+[npm-license-badge]: https://img.shields.io/npm/l/@xyo-network/react-chain-provider
+
+[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xyo-network/react-chain-provider/badge
+[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xyo-network/react-chain-provider
+
+[socket-badge]: https://socket.dev/api/badge/npm/package/@xyo-network/react-chain-provider
+[socket-link]: https://socket.dev/npm/package/@xyo-network/react-chain-provider

package/dist/browser/index.d.ts

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

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

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

package/dist/browser/index.mjs

@@ -0,0 +1,252 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/transfer/box/Details.tsx
+import { FlexCol } from "@xylabs/react-flexbox";
+import React5 from "react";
+
+// src/transfer/card/TransferRenderCard.tsx
+import { Card, CardContent, CardHeader, List, useMediaQuery, useTheme as useTheme3 } from "@mui/material";
+import { asAddress as asAddress2, asHex } from "@xylabs/hex";
+import { BlockiesAvatar as BlockiesAvatar2 } from "@xyo-network/react-chain-blockies";
+import { useEvent } from "@xyo-network/react-event";
+import { asTransfer } from "@xyo-network/xl1-protocol";
+import React4, { useMemo } from "react";
+
+// src/transfer/card/ListItem.tsx
+import { ListItem, ListItemAvatar, ListItemText, Stack, Typography, useTheme } from "@mui/material";
+import { asAddress, hexToBigInt } from "@xylabs/hex";
+import { isDefined } from "@xylabs/typeof";
+import { BlockiesAvatar } from "@xyo-network/react-chain-blockies";
+import { NetworkIcon } from "@xyo-network/react-chain-network";
+import { MainNetworkIconString } from "@xyo-network/xl1-network-model";
+import React from "react";
+var TransferRenderListItem = /* @__PURE__ */ __name(({ address, amount, sx, transferCardHelper, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(ListItem, {
+    sx: {
+      px: 0,
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React.createElement(ListItemAvatar, {
+    sx: {
+      minWidth: 30,
+      mr: theme.spacing(2)
+    }
+  }, /* @__PURE__ */ React.createElement(BlockiesAvatar, {
+    title: address,
+    sx: {
+      width: 30,
+      height: 30
+    },
+    blockiesOptions: {
+      seed: address
+    }
+  })), /* @__PURE__ */ React.createElement(ListItemText, {
+    sx: {
+      borderBottom: `1px solid ${theme.vars.palette.divider}`
+    }
+  }, /* @__PURE__ */ React.createElement(Stack, {
+    direction: "row",
+    gap: 2,
+    justifyContent: "space-between",
+    width: "100%"
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    component: "span",
+    fontFamily: "monospace",
+    variant: "caption"
+  }, transferCardHelper.addressComponent(asAddress(address), "To")), /* @__PURE__ */ React.createElement(Typography, {
+    component: "span",
+    fontFamily: "monospace",
+    variant: "caption",
+    title: isDefined(amount) ? hexToBigInt(amount).toString() : "",
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: theme.spacing(0.25)
+    }
+  }, transferCardHelper.formatAmountToXl1(amount), /* @__PURE__ */ React.createElement(NetworkIcon, {
+    icon: MainNetworkIconString,
+    style: {
+      width: 16,
+      height: 16,
+      display: "inline-flex",
+      alignItems: "end"
+    }
+  }), "(XL1)"))));
+}, "TransferRenderListItem");
+
+// src/transfer/card/TransferRenderCardHelper.tsx
+import { Link } from "@mui/material";
+import { ellipsize } from "@xylabs/eth-address";
+import { hexToBigInt as hexToBigInt2, isHex } from "@xylabs/hex";
+import { isDefined as isDefined2, isUndefined } from "@xylabs/typeof";
+import { XL1Places } from "@xyo-network/xl1-protocol";
+import { XL1Amount } from "@xyo-network/xl1-wrappers";
+import React2 from "react";
+var TransferCardHelper = class {
+  static {
+    __name(this, "TransferCardHelper");
+  }
+  _dispatch;
+  _isMedium;
+  _options;
+  _payload;
+  constructor(isMedium, payload, dispatch, options) {
+    this._isMedium = isMedium;
+    this._options = options;
+    this._payload = payload;
+    this._dispatch = dispatch;
+  }
+  get dispatch() {
+    return this._dispatch;
+  }
+  get isMedium() {
+    return this._isMedium;
+  }
+  get linkedAddresses() {
+    return this.options?.links?.has("address");
+  }
+  get options() {
+    return this._options;
+  }
+  get payload() {
+    return this._payload;
+  }
+  addressComponent(address, prefix) {
+    const resolvedPrefix = isDefined2(prefix) ? `${prefix}: ` : "";
+    const text = `${this.formatAddress(address) ?? "Unknown"}`;
+    if (this.options?.links?.has("address")) {
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, resolvedPrefix, " ", /* @__PURE__ */ React2.createElement(Link, {
+        onClick: /* @__PURE__ */ __name(() => {
+          this.dispatch?.("address", "click", this.payload?.from);
+        }, "onClick"),
+        sx: {
+          cursor: "pointer"
+        }
+      }, text));
+    }
+    return `${resolvedPrefix}${text}`;
+  }
+  formatAddress(address) {
+    return address ? this.isMedium ? address : ellipsize(address, 5) : "";
+  }
+  formatAmountToXl1(amount) {
+    if (isUndefined(amount)) return "";
+    const amountBigInt = isHex(amount) ? hexToBigInt2(amount) : amount;
+    const xl1Amount = XL1Amount.fromAtto(amountBigInt);
+    return amountBigInt < 1000000000000n && amountBigInt > 0n ? "<0.00001" : xl1Amount.toString(Number(XL1Places.xl1), {
+      locale: navigator.language
+    });
+  }
+  totalTransferred() {
+    if (isUndefined(this.payload?.transfers)) return "0";
+    let total = 0n;
+    for (const [, amount] of Object.entries(this.payload.transfers)) {
+      if (isDefined2(amount)) {
+        total += hexToBigInt2(amount);
+      }
+    }
+    return this.formatAmountToXl1(total);
+  }
+};
+
+// src/transfer/card/TransferRenderTotalTypography.tsx
+import { Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
+import { NetworkIcon as NetworkIcon2 } from "@xyo-network/react-chain-network";
+import { MainNetworkIconString as MainNetworkIconString2 } from "@xyo-network/xl1-network-model";
+import React3 from "react";
+var TransferRenderTotalTypography = /* @__PURE__ */ __name(({ transferRenderHelper, sx, ...props }) => {
+  const theme = useTheme2();
+  return /* @__PURE__ */ React3.createElement(Typography2, {
+    sx: {
+      display: "inline-flex",
+      gap: theme.spacing(0.25),
+      fontFamily: "monospace",
+      ...sx
+    },
+    variant: "caption",
+    ...props
+  }, "Total:", " ", /* @__PURE__ */ React3.createElement("strong", null, transferRenderHelper?.totalTransferred()), /* @__PURE__ */ React3.createElement(NetworkIcon2, {
+    icon: MainNetworkIconString2,
+    style: {
+      width: 16,
+      height: 16,
+      display: "inline-flex",
+      alignItems: "end"
+    }
+  }), "(XL1)");
+}, "TransferRenderTotalTypography");
+
+// src/transfer/card/TransferRenderCard.tsx
+var TransferRenderCard = /* @__PURE__ */ __name(({ options, payload, ...props }) => {
+  const theme = useTheme3();
+  const isMedium = useMediaQuery((theme2) => theme2.breakpoints.up("sm"));
+  const [ref, dispatch] = useEvent();
+  const transfer = asTransfer(payload);
+  const { from, transfers } = transfer ?? {};
+  const transferCardHelper = useMemo(() => new TransferCardHelper(isMedium, asTransfer(payload), dispatch, options), [
+    isMedium,
+    payload,
+    dispatch,
+    options
+  ]);
+  return /* @__PURE__ */ React4.createElement(Card, {
+    ref,
+    ...props
+  }, /* @__PURE__ */ React4.createElement(CardHeader, {
+    title: transferCardHelper.addressComponent(from, "From"),
+    slotProps: {
+      title: {
+        title: from,
+        variant: "body1",
+        fontFamily: "monospace"
+      }
+    },
+    avatar: /* @__PURE__ */ React4.createElement(BlockiesAvatar2, {
+      sx: {
+        width: 30,
+        height: 30
+      },
+      title: from,
+      blockiesOptions: {
+        seed: from
+      }
+    })
+  }), /* @__PURE__ */ React4.createElement(CardContent, {
+    sx: {
+      "&:last-child": {
+        pb: theme.spacing(0)
+      }
+    }
+  }, /* @__PURE__ */ React4.createElement(List, null, Object.entries(transfers ?? {}).map(([address, amount], index) => /* @__PURE__ */ React4.createElement(TransferRenderListItem, {
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    key: index,
+    address: asAddress2(address),
+    amount: asHex(amount),
+    transferCardHelper
+  }))), /* @__PURE__ */ React4.createElement(TransferRenderTotalTypography, {
+    transferRenderHelper: transferCardHelper,
+    sx: {
+      // pt matches bottom padding of the ListItem
+      width: "100%",
+      justifyContent: "end",
+      pt: 0.6666666667,
+      pb: theme.spacing(2)
+    }
+  })));
+}, "TransferRenderCard");
+
+// src/transfer/box/Details.tsx
+var TransferRenderBoxDetails = /* @__PURE__ */ __name(({ options, payload, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(FlexCol, props, /* @__PURE__ */ React5.createElement(TransferRenderCard, {
+    options,
+    payload
+  }));
+}, "TransferRenderBoxDetails");
+export {
+  TransferRenderBoxDetails,
+  TransferRenderCard
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transfer/box/Details.tsx","../../src/transfer/card/TransferRenderCard.tsx","../../src/transfer/card/ListItem.tsx","../../src/transfer/card/TransferRenderCardHelper.tsx","../../src/transfer/card/TransferRenderTotalTypography.tsx"],"sourcesContent":["import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'\nimport React from 'react'\n\nimport { TransferRenderCard } from '../card/index.ts'\nimport type { TransferRenderOptions } from '../lib/index.ts'\n\nexport interface TransferRenderBoxDetailsProps extends PayloadDetailsRenderProps, FlexBoxProps {\n  options?: TransferRenderOptions\n  payload?: Payload\n}\n\nexport const TransferRenderBoxDetails: React.FC<TransferRenderBoxDetailsProps> = ({\n  options,\n  payload,\n  ...props\n}) => {\n  return (\n    <FlexCol {...props}>\n      <TransferRenderCard\n        options={options}\n        payload={payload}\n      />\n    </FlexCol>\n  )\n}\n","import type { CardProps } from '@mui/material'\nimport {\n  Card, CardContent, CardHeader, List, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { asAddress, asHex } from '@xylabs/hex'\nimport type { Payload } from '@xyo-network/payload-model'\nimport { BlockiesAvatar } from '@xyo-network/react-chain-blockies'\nimport { useEvent } from '@xyo-network/react-event'\nimport type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'\nimport { asTransfer } from '@xyo-network/xl1-protocol'\nimport React, { useMemo } from 'react'\n\nimport type { TransferRenderOptions } from '../lib/index.ts'\nimport { TransferRenderListItem } from './ListItem.tsx'\nimport { TransferCardHelper } from './TransferRenderCardHelper.tsx'\nimport { TransferRenderTotalTypography } from './TransferRenderTotalTypography.tsx'\n\nexport interface TransferRenderCardProps extends PayloadDetailsRenderProps, CardProps {\n  options?: TransferRenderOptions\n  payload?: Payload\n}\n\nexport const TransferRenderCard: React.FC<TransferRenderCardProps> = ({\n  options, payload, ...props\n}) => {\n  const theme = useTheme()\n  const isMedium = useMediaQuery(theme => theme.breakpoints.up('sm'))\n  const [ref, dispatch] = useEvent<HTMLDivElement>()\n  const transfer = asTransfer(payload)\n  const { from, transfers } = transfer ?? {}\n\n  const transferCardHelper = useMemo(\n    () =>\n      new TransferCardHelper(isMedium, asTransfer(payload), dispatch, options),\n    [isMedium, payload, dispatch, options],\n  )\n\n  return (\n    <Card ref={ref} {...props}>\n      <CardHeader\n        title={transferCardHelper.addressComponent(from, 'From')}\n        slotProps={{\n          title: {\n            title: from, variant: 'body1', fontFamily: 'monospace',\n          },\n        }}\n        avatar={<BlockiesAvatar sx={{ width: 30, height: 30 }} title={from} blockiesOptions={{ seed: from }} />}\n      />\n      <CardContent sx={{ '&:last-child': { pb: theme.spacing(0) } }}>\n        <List>\n          {Object.entries(transfers ?? {}).map(([address, amount], index) => (\n            <TransferRenderListItem\n            // eslint-disable-next-line @eslint-react/no-array-index-key\n              key={index}\n              address={asAddress(address)}\n              amount={asHex(amount)}\n              transferCardHelper={transferCardHelper}\n            />\n          ))}\n        </List>\n        <TransferRenderTotalTypography\n          transferRenderHelper={transferCardHelper}\n          sx={{\n            // pt matches bottom padding of the ListItem\n            width: '100%', justifyContent: 'end', pt: 0.666_666_666_7, pb: theme.spacing(2),\n          }}\n        />\n      </CardContent>\n    </Card>\n  )\n}\n","import {\n  ListItem, ListItemAvatar, type ListItemProps, ListItemText, Stack, Typography,\n  useTheme,\n} from '@mui/material'\nimport type { Address, Hex } from '@xylabs/hex'\nimport { asAddress, hexToBigInt } from '@xylabs/hex'\nimport { isDefined } from '@xylabs/typeof'\nimport { BlockiesAvatar } from '@xyo-network/react-chain-blockies'\nimport { NetworkIcon } from '@xyo-network/react-chain-network'\nimport { MainNetworkIconString } from '@xyo-network/xl1-network-model'\nimport React from 'react'\n\nimport type { TransferCardHelper } from './TransferRenderCardHelper.tsx'\n\nexport interface TransferRenderListItem extends ListItemProps {\n  address?: Address\n  amount?: Hex\n  transferCardHelper: TransferCardHelper\n}\n\nexport const TransferRenderListItem: React.FC<TransferRenderListItem> = ({\n  address, amount, sx, transferCardHelper, ...props\n}) => {\n  const theme = useTheme()\n  return (\n    <ListItem sx={{ px: 0, ...sx }} {...props}>\n      <ListItemAvatar sx={{ minWidth: 30, mr: theme.spacing(2) }}>\n        <BlockiesAvatar title={address} sx={{ width: 30, height: 30 }} blockiesOptions={{ seed: address }} />\n      </ListItemAvatar>\n      <ListItemText sx={{ borderBottom: `1px solid ${theme.vars.palette.divider}` }}>\n        <Stack direction=\"row\" gap={2} justifyContent=\"space-between\" width=\"100%\">\n          <Typography component=\"span\" fontFamily=\"monospace\" variant=\"caption\">\n            {transferCardHelper.addressComponent(asAddress(address), 'To')}\n          </Typography>\n          <Typography\n            component=\"span\"\n            fontFamily=\"monospace\"\n            variant=\"caption\"\n            title={isDefined(amount) ? hexToBigInt(amount).toString() : ''}\n            sx={{\n              display: 'inline-flex', alignItems: 'center', gap: theme.spacing(0.25),\n            }}\n          >\n            {transferCardHelper.formatAmountToXl1(amount)}\n            <NetworkIcon\n              icon={MainNetworkIconString}\n              style={{\n                width: 16, height: 16, display: 'inline-flex', alignItems: 'end',\n              }}\n            />\n            (XL1)\n          </Typography>\n        </Stack>\n      </ListItemText>\n    </ListItem>\n  )\n}\n","import { Link } from '@mui/material'\nimport { ellipsize } from '@xylabs/eth-address'\nimport type { Address, Hex } from '@xylabs/hex'\nimport { hexToBigInt, isHex } from '@xylabs/hex'\nimport { isDefined, isUndefined } from '@xylabs/typeof'\nimport type { EventDispatch } from '@xyo-network/react-event'\nimport {\n  type AttoXL1, type Transfer, XL1Places,\n} from '@xyo-network/xl1-protocol'\nimport { XL1Amount } from '@xyo-network/xl1-wrappers'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport type { TransferRenderOptions } from '../lib/index.ts'\n\nexport class TransferCardHelper {\n  private _dispatch: EventDispatch | undefined\n  private _isMedium: boolean\n  private _options: TransferRenderOptions | undefined\n  private _payload: Transfer | undefined\n\n  constructor(\n    isMedium: boolean,\n    payload?: Transfer,\n    dispatch?: EventDispatch,\n    options?: TransferRenderOptions,\n  ) {\n    this._isMedium = isMedium\n    this._options = options\n    this._payload = payload\n    this._dispatch = dispatch\n  }\n\n  get dispatch() {\n    return this._dispatch\n  }\n\n  get isMedium() {\n    return this._isMedium\n  }\n\n  get linkedAddresses() {\n    return this.options?.links?.has('address')\n  }\n\n  get options() {\n    return this._options\n  }\n\n  get payload() {\n    return this._payload\n  }\n\n  addressComponent(address?: Address, prefix?: string): ReactNode {\n    const resolvedPrefix = isDefined(prefix) ? `${prefix}: ` : ''\n    const text = `${this.formatAddress(address) ?? 'Unknown'}`\n    if (this.options?.links?.has('address')) {\n      return (\n        <>\n          {resolvedPrefix}\n          {' '}\n          <Link\n            onClick={() => {\n              this.dispatch?.('address', 'click', this.payload?.from)\n            }}\n            sx={{ cursor: 'pointer' }}\n          >\n            {text}\n          </Link>\n        </>\n      )\n    }\n    return `${resolvedPrefix}${text}`\n  }\n\n  formatAddress(address?: Address): string {\n    return (address ? (this.isMedium ? address : ellipsize(address, 5)) : '')\n  }\n\n  formatAmountToXl1(amount?: Hex | bigint): string {\n    if (isUndefined(amount)) return ''\n    const amountBigInt = isHex(amount) ? hexToBigInt(amount) : amount\n    const xl1Amount = XL1Amount.fromAtto(amountBigInt as AttoXL1)\n    return amountBigInt < 1_000_000_000_000n && amountBigInt > 0n ? '<0.00001' : xl1Amount.toString(Number(XL1Places.xl1), { locale: navigator.language })\n  }\n\n  totalTransferred() {\n    if (isUndefined(this.payload?.transfers)) return '0'\n    let total = 0n\n    for (const [, amount] of Object.entries(this.payload.transfers)) {\n      if (isDefined(amount)) {\n        total += hexToBigInt(amount)\n      }\n    }\n    return this.formatAmountToXl1(total)\n  }\n}\n","import type { TypographyProps } from '@mui/material'\nimport { Typography, useTheme } from '@mui/material'\nimport { NetworkIcon } from '@xyo-network/react-chain-network'\nimport { MainNetworkIconString } from '@xyo-network/xl1-network-model'\nimport React from 'react'\n\nimport type { TransferCardHelper } from './TransferRenderCardHelper.tsx'\n\nexport interface TransferRenderTotalTypographyProps extends TypographyProps {\n  transferRenderHelper: TransferCardHelper\n}\n\nexport const TransferRenderTotalTypography: React.FC<TransferRenderTotalTypographyProps> = ({\n  transferRenderHelper, sx, ...props\n}) => {\n  const theme = useTheme()\n\n  return (\n    <Typography\n      sx={{\n        display: 'inline-flex', gap: theme.spacing(0.25), fontFamily: 'monospace', ...sx,\n      }}\n      variant=\"caption\"\n      {...props}\n    >\n      Total:\n      {' '}\n      <strong>{transferRenderHelper?.totalTransferred()}</strong>\n      <NetworkIcon\n        icon={MainNetworkIconString}\n        style={{\n          width: 16, height: 16, display: 'inline-flex', alignItems: 'end',\n        }}\n      />\n      (XL1)\n    </Typography>\n  )\n}\n"],"mappings":"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","names":["FlexCol","React","Card","CardContent","CardHeader","List","useMediaQuery","useTheme","asAddress","asHex","BlockiesAvatar","useEvent","asTransfer","React","useMemo","ListItem","ListItemAvatar","ListItemText","Stack","Typography","useTheme","asAddress","hexToBigInt","isDefined","BlockiesAvatar","NetworkIcon","MainNetworkIconString","React","TransferRenderListItem","address","amount","sx","transferCardHelper","props","theme","useTheme","ListItem","px","ListItemAvatar","minWidth","mr","spacing","BlockiesAvatar","title","width","height","blockiesOptions","seed","ListItemText","borderBottom","vars","palette","divider","Stack","direction","gap","justifyContent","Typography","component","fontFamily","variant","addressComponent","asAddress","isDefined","hexToBigInt","toString","display","alignItems","formatAmountToXl1","NetworkIcon","icon","MainNetworkIconString","style","Link","ellipsize","hexToBigInt","isHex","isDefined","isUndefined","XL1Places","XL1Amount","React","TransferCardHelper","_dispatch","_isMedium","_options","_payload","isMedium","payload","dispatch","options","linkedAddresses","links","has","addressComponent","address","prefix","resolvedPrefix","isDefined","text","formatAddress","React","Link","onClick","from","sx","cursor","ellipsize","formatAmountToXl1","amount","isUndefined","amountBigInt","isHex","hexToBigInt","xl1Amount","XL1Amount","fromAtto","toString","Number","XL1Places","xl1","locale","navigator","language","totalTransferred","transfers","total","Object","entries","Typography","useTheme","NetworkIcon","MainNetworkIconString","React","TransferRenderTotalTypography","transferRenderHelper","sx","props","theme","useTheme","React","Typography","display","gap","spacing","fontFamily","variant","strong","totalTransferred","NetworkIcon","icon","MainNetworkIconString","style","width","height","alignItems","TransferRenderCard","options","payload","props","theme","useTheme","isMedium","useMediaQuery","breakpoints","up","ref","dispatch","useEvent","transfer","asTransfer","from","transfers","transferCardHelper","useMemo","TransferCardHelper","React","Card","CardHeader","title","addressComponent","slotProps","variant","fontFamily","avatar","BlockiesAvatar","sx","width","height","blockiesOptions","seed","CardContent","pb","spacing","List","Object","entries","map","address","amount","index","TransferRenderListItem","key","asAddress","asHex","TransferRenderTotalTypography","transferRenderHelper","justifyContent","pt","TransferRenderBoxDetails","options","payload","props","React","FlexCol","TransferRenderCard"]}

package/dist/browser/transfer/Plugin.d.ts

@@ -0,0 +1,4 @@
+import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin';
+export declare const TransferRenderPlugin: PayloadRenderPlugin;
+export default TransferRenderPlugin;
+//# sourceMappingURL=Plugin.d.ts.map

package/dist/browser/transfer/Plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plugin.d.ts","sourceRoot":"","sources":["../../../src/transfer/Plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAO5E,eAAO,MAAM,oBAAoB,EAAE,mBAMlC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/browser/transfer/box/Details.d.ts

@@ -0,0 +1,11 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox';
+import type { Payload } from '@xyo-network/payload-model';
+import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin';
+import React from 'react';
+import type { TransferRenderOptions } from '../lib/index.ts';
+export interface TransferRenderBoxDetailsProps extends PayloadDetailsRenderProps, FlexBoxProps {
+    options?: TransferRenderOptions;
+    payload?: Payload;
+}
+export declare const TransferRenderBoxDetails: React.FC<TransferRenderBoxDetailsProps>;
+//# sourceMappingURL=Details.d.ts.map

package/dist/browser/transfer/box/Details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/transfer/box/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAClF,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAE5D,MAAM,WAAW,6BAA8B,SAAQ,yBAAyB,EAAE,YAAY;IAC5F,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAa5E,CAAA"}

package/dist/browser/transfer/box/Details.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/react-vite';
+declare const _default: Meta;
+export default _default;
+declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./Details.tsx").TransferRenderBoxDetailsProps>;
+declare const WithValue: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./Details.tsx").TransferRenderBoxDetailsProps>;
+declare const WithOptions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./Details.tsx").TransferRenderBoxDetailsProps>;
+export { Default, WithOptions, WithValue, };
+//# sourceMappingURL=Details.stories.d.ts.map

package/dist/browser/transfer/box/Details.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../../src/transfer/box/Details.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;wBA2BrD,IAAI;AAHT,wBAGS;AAaT,QAAA,MAAM,OAAO,yJAAoB,CAAA;AAGjC,QAAA,MAAM,SAAS,yJAAoB,CAAA;AAGnC,QAAA,MAAM,WAAW,yJAAoB,CAAA;AAGrC,OAAO,EACL,OAAO,EAAE,WAAW,EAAE,SAAS,GAChC,CAAA"}

package/dist/browser/transfer/box/index.d.ts

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

package/dist/browser/transfer/box/index.d.ts.map

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

package/dist/browser/transfer/card/ListItem.d.ts

@@ -0,0 +1,11 @@
+import { type ListItemProps } from '@mui/material';
+import type { Address, Hex } from '@xylabs/hex';
+import React from 'react';
+import type { TransferCardHelper } from './TransferRenderCardHelper.tsx';
+export interface TransferRenderListItem extends ListItemProps {
+    address?: Address;
+    amount?: Hex;
+    transferCardHelper: TransferCardHelper;
+}
+export declare const TransferRenderListItem: React.FC<TransferRenderListItem>;
+//# sourceMappingURL=ListItem.d.ts.map

package/dist/browser/transfer/card/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/transfer/card/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EACqB,KAAK,aAAa,EAE7C,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAM/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAExE,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,kBAAkB,EAAE,kBAAkB,CAAA;CACvC;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoCnE,CAAA"}

package/dist/browser/transfer/card/TransferRenderCard.d.ts

@@ -0,0 +1,11 @@
+import type { CardProps } from '@mui/material';
+import type { Payload } from '@xyo-network/payload-model';
+import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin';
+import React from 'react';
+import type { TransferRenderOptions } from '../lib/index.ts';
+export interface TransferRenderCardProps extends PayloadDetailsRenderProps, CardProps {
+    options?: TransferRenderOptions;
+    payload?: Payload;
+}
+export declare const TransferRenderCard: React.FC<TransferRenderCardProps>;
+//# sourceMappingURL=TransferRenderCard.d.ts.map

package/dist/browser/transfer/card/TransferRenderCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferRenderCard.d.ts","sourceRoot":"","sources":["../../../../src/transfer/card/TransferRenderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAK9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAGzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAElF,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAK5D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,EAAE,SAAS;IACnF,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgDhE,CAAA"}

package/dist/browser/transfer/card/TransferRenderCard.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/react-vite';
+declare const _default: Meta;
+export default _default;
+declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./TransferRenderCard.tsx").TransferRenderCardProps>;
+declare const WithValue: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./TransferRenderCard.tsx").TransferRenderCardProps>;
+declare const WithOptions: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("./TransferRenderCard.tsx").TransferRenderCardProps>;
+export { Default, WithOptions, WithValue, };
+//# sourceMappingURL=TransferRenderCard.stories.d.ts.map

package/dist/browser/transfer/card/TransferRenderCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferRenderCard.stories.d.ts","sourceRoot":"","sources":["../../../../src/transfer/card/TransferRenderCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAA;wBA2BrD,IAAI;AAHT,wBAGS;AAaT,QAAA,MAAM,OAAO,8JAAoB,CAAA;AAGjC,QAAA,MAAM,SAAS,8JAAoB,CAAA;AAGnC,QAAA,MAAM,WAAW,8JAAoB,CAAA;AAGrC,OAAO,EACL,OAAO,EAAE,WAAW,EAAE,SAAS,GAChC,CAAA"}

package/dist/browser/transfer/card/TransferRenderCardHelper.d.ts

@@ -0,0 +1,22 @@
+import type { Address, Hex } from '@xylabs/hex';
+import type { EventDispatch } from '@xyo-network/react-event';
+import { type Transfer } from '@xyo-network/xl1-protocol';
+import type { ReactNode } from 'react';
+import type { TransferRenderOptions } from '../lib/index.ts';
+export declare class TransferCardHelper {
+    private _dispatch;
+    private _isMedium;
+    private _options;
+    private _payload;
+    constructor(isMedium: boolean, payload?: Transfer, dispatch?: EventDispatch, options?: TransferRenderOptions);
+    get dispatch(): EventDispatch | undefined;
+    get isMedium(): boolean;
+    get linkedAddresses(): boolean | undefined;
+    get options(): TransferRenderOptions | undefined;
+    get payload(): Transfer | undefined;
+    addressComponent(address?: Address, prefix?: string): ReactNode;
+    formatAddress(address?: Address): string;
+    formatAmountToXl1(amount?: Hex | bigint): string;
+    totalTransferred(): string;
+}
+//# sourceMappingURL=TransferRenderCardHelper.d.ts.map

package/dist/browser/transfer/card/TransferRenderCardHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferRenderCardHelper.d.ts","sourceRoot":"","sources":["../../../../src/transfer/card/TransferRenderCardHelper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAG/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EACS,KAAK,QAAQ,EAC5B,MAAM,2BAA2B,CAAA;AAElC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAE5D,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,QAAQ,CAAsB;gBAGpC,QAAQ,EAAE,OAAO,EACjB,OAAO,CAAC,EAAE,QAAQ,EAClB,QAAQ,CAAC,EAAE,aAAa,EACxB,OAAO,CAAC,EAAE,qBAAqB;IAQjC,IAAI,QAAQ,8BAEX;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,eAAe,wBAElB;IAED,IAAI,OAAO,sCAEV;IAED,IAAI,OAAO,yBAEV;IAED,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS;IAsB/D,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM;IAIxC,iBAAiB,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,MAAM;IAOhD,gBAAgB;CAUjB"}

package/dist/browser/transfer/card/TransferRenderTotalTypography.d.ts

@@ -0,0 +1,8 @@
+import type { TypographyProps } from '@mui/material';
+import React from 'react';
+import type { TransferCardHelper } from './TransferRenderCardHelper.tsx';
+export interface TransferRenderTotalTypographyProps extends TypographyProps {
+    transferRenderHelper: TransferCardHelper;
+}
+export declare const TransferRenderTotalTypography: React.FC<TransferRenderTotalTypographyProps>;
+//# sourceMappingURL=TransferRenderTotalTypography.d.ts.map

package/dist/browser/transfer/card/TransferRenderTotalTypography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferRenderTotalTypography.d.ts","sourceRoot":"","sources":["../../../../src/transfer/card/TransferRenderTotalTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAIpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAExE,MAAM,WAAW,kCAAmC,SAAQ,eAAe;IACzE,oBAAoB,EAAE,kBAAkB,CAAA;CACzC;AAED,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAAC,kCAAkC,CAyBtF,CAAA"}

package/dist/browser/transfer/card/index.d.ts

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

package/dist/browser/transfer/card/index.d.ts.map

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

package/dist/browser/transfer/index.d.ts

@@ -0,0 +1,4 @@
+export * from './box/index.ts';
+export * from './card/index.ts';
+export { default } from './Plugin.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/transfer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/transfer/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/browser/transfer/lib/TransferRenderOptions.d.ts

@@ -0,0 +1,5 @@
+export type LinkableFields = 'address';
+export type TransferRenderOptions = {
+    links: Set<LinkableFields>;
+};
+//# sourceMappingURL=TransferRenderOptions.d.ts.map

package/dist/browser/transfer/lib/TransferRenderOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferRenderOptions.d.ts","sourceRoot":"","sources":["../../../../src/transfer/lib/TransferRenderOptions.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,SAAS,CAAA;AAEtC,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC3B,CAAA"}

package/dist/browser/transfer/lib/index.d.ts

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

package/dist/browser/transfer/lib/index.d.ts.map

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

package/package.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "http://json.schemastore.org/package.json",
+  "name": "@xyo-network/react-chain-transfer-plugin",
+  "version": "1.12.7",
+  "description": "XYO Layer One API",
+  "homepage": "https://xylabs.com",
+  "bugs": {
+    "url": "git+https://github.com/xylabs/xyo-chain/issues",
+    "email": "support@xylabs.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xylabs/xyo-chain.git"
+  },
+  "license": "LGPL-3.0-only",
+  "author": {
+    "name": "XY Labs Development Team",
+    "email": "support@xylabs.com",
+    "url": "https://xylabs.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/browser/index.d.ts",
+        "source": "./src/index.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/browser/index.d.ts",
+      "source": "./src/index.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "./dist/browser/index.mjs",
+  "source": "./src/index.ts",
+  "types": "./dist/browser/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@xylabs/hex": "~5.0.10",
+    "@xyo-network/react-event": "~7.0.1",
+    "@xyo-network/xl1-protocol": "~1.10.15"
+  },
+  "devDependencies": {
+    "@emotion/react": "~11.14.0",
+    "@emotion/styled": "~11.14.1",
+    "@mui/material": "~7.3.1",
+    "@storybook/react-vite": "~9.1.2",
+    "@types/react": "~19.1.10",
+    "@xylabs/eth-address": "~5.0.10",
+    "@xylabs/react-flexbox": "~7.0.4",
+    "@xylabs/ts-scripts-yarn3": "~7.1.7",
+    "@xylabs/tsconfig": "~7.1.7",
+    "@xylabs/tsconfig-dom": "~7.1.7",
+    "@xylabs/tsconfig-react": "~7.1.7",
+    "@xylabs/typeof": "~5.0.10",
+    "@xyo-network/payload-model": "~5.0.7",
+    "@xyo-network/react-chain-blockies": "~1.12.7",
+    "@xyo-network/react-chain-network": "~1.12.7",
+    "@xyo-network/react-payload-plugin": "~7.0.1",
+    "@xyo-network/xl1-network-model": "~1.12.7",
+    "@xyo-network/xl1-wrappers": "~1.12.7",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "react": "~19.1.1"
+  },
+  "packageManager": "yarn@4.6.0",
+  "engines": {
+    "node": ">=22"
+  },
+  "volta": {
+    "node": "22.5.1",
+    "yarn": "4.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/gloabl.d.ts

@@ -0,0 +1 @@
+import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './transfer/index.ts'

package/src/transfer/Plugin.ts

@@ -0,0 +1,17 @@
+import type { Payload } from '@xyo-network/payload-model'
+import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
+import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
+import { TransferSchema } from '@xyo-network/xl1-protocol'
+
+import { TransferRenderBoxDetails } from './box/index.ts'
+import { TransferRenderCard } from './card/index.ts'
+
+export const TransferRenderPlugin: PayloadRenderPlugin = {
+  ...createPayloadRenderPlugin({
+    canRender: (payload?: Payload) => payload?.schema === TransferSchema,
+    components: { box: { detailsBox: TransferRenderBoxDetails, detailsCard: TransferRenderCard } },
+    name: 'Transfer',
+  }),
+}
+
+export default TransferRenderPlugin

package/src/transfer/box/Details.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import {
+  type Address,
+  type Hex,
+  ZERO_ADDRESS,
+} from '@xylabs/hex'
+import { useEvent } from '@xyo-network/react-event'
+import { type Transfer, TransferSchema } from '@xyo-network/xl1-protocol'
+import React from 'react'
+
+import { TransferRenderBoxDetails } from './Details.tsx'
+
+const transfer: Transfer = {
+  schema: TransferSchema,
+  epoch: 1_755_723_852_247,
+  from: ZERO_ADDRESS,
+  transfers: {
+    '1111111111111111111111111111111111111111': '1b1ae4d6e2ef500000',
+    '1111111111111111111111111111111111111112': '5150ae84a8cdf00000',
+    '1111111111111111111111111111111111111113': '989680',
+    '1111111111111111111111111111111111111114': '1b1ae4d6e2ef500000',
+  } as Record<Address, Hex>,
+}
+
+export default {
+  title: 'Payloads/Transfer/Box/Details',
+  component: TransferRenderBoxDetails,
+} as Meta
+
+const Template: StoryFn<typeof TransferRenderBoxDetails> = (args) => {
+  const [ref] = useEvent<HTMLDivElement>((noun, verb, data) => {
+    alert(`${noun} ${verb} ${data}`)
+  })
+  return (
+    <span ref={ref}>
+      <TransferRenderBoxDetails {...args} />
+    </span>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithValue = Template.bind({})
+WithValue.args = { payload: transfer }
+
+const WithOptions = Template.bind({})
+WithOptions.args = { payload: transfer, options: { links: new Set(['address']) } }
+
+export {
+  Default, WithOptions, WithValue,
+}

package/src/transfer/box/Details.tsx

@@ -0,0 +1,28 @@
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
+import type { Payload } from '@xyo-network/payload-model'
+import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
+import React from 'react'
+
+import { TransferRenderCard } from '../card/index.ts'
+import type { TransferRenderOptions } from '../lib/index.ts'
+
+export interface TransferRenderBoxDetailsProps extends PayloadDetailsRenderProps, FlexBoxProps {
+  options?: TransferRenderOptions
+  payload?: Payload
+}
+
+export const TransferRenderBoxDetails: React.FC<TransferRenderBoxDetailsProps> = ({
+  options,
+  payload,
+  ...props
+}) => {
+  return (
+    <FlexCol {...props}>
+      <TransferRenderCard
+        options={options}
+        payload={payload}
+      />
+    </FlexCol>
+  )
+}

package/src/transfer/box/index.ts

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

package/src/transfer/card/ListItem.tsx

@@ -0,0 +1,57 @@
+import {
+  ListItem, ListItemAvatar, type ListItemProps, ListItemText, Stack, Typography,
+  useTheme,
+} from '@mui/material'
+import type { Address, Hex } from '@xylabs/hex'
+import { asAddress, hexToBigInt } from '@xylabs/hex'
+import { isDefined } from '@xylabs/typeof'
+import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
+import { NetworkIcon } from '@xyo-network/react-chain-network'
+import { MainNetworkIconString } from '@xyo-network/xl1-network-model'
+import React from 'react'
+
+import type { TransferCardHelper } from './TransferRenderCardHelper.tsx'
+
+export interface TransferRenderListItem extends ListItemProps {
+  address?: Address
+  amount?: Hex
+  transferCardHelper: TransferCardHelper
+}
+
+export const TransferRenderListItem: React.FC<TransferRenderListItem> = ({
+  address, amount, sx, transferCardHelper, ...props
+}) => {
+  const theme = useTheme()
+  return (
+    <ListItem sx={{ px: 0, ...sx }} {...props}>
+      <ListItemAvatar sx={{ minWidth: 30, mr: theme.spacing(2) }}>
+        <BlockiesAvatar title={address} sx={{ width: 30, height: 30 }} blockiesOptions={{ seed: address }} />
+      </ListItemAvatar>
+      <ListItemText sx={{ borderBottom: `1px solid ${theme.vars.palette.divider}` }}>
+        <Stack direction="row" gap={2} justifyContent="space-between" width="100%">
+          <Typography component="span" fontFamily="monospace" variant="caption">
+            {transferCardHelper.addressComponent(asAddress(address), 'To')}
+          </Typography>
+          <Typography
+            component="span"
+            fontFamily="monospace"
+            variant="caption"
+            title={isDefined(amount) ? hexToBigInt(amount).toString() : ''}
+            sx={{
+              display: 'inline-flex', alignItems: 'center', gap: theme.spacing(0.25),
+            }}
+          >
+            {transferCardHelper.formatAmountToXl1(amount)}
+            <NetworkIcon
+              icon={MainNetworkIconString}
+              style={{
+                width: 16, height: 16, display: 'inline-flex', alignItems: 'end',
+              }}
+            />
+            (XL1)
+          </Typography>
+        </Stack>
+      </ListItemText>
+    </ListItem>
+  )
+}

package/src/transfer/card/TransferRenderCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import {
+  type Address,
+  type Hex,
+  ZERO_ADDRESS,
+} from '@xylabs/hex'
+import { useEvent } from '@xyo-network/react-event'
+import { type Transfer, TransferSchema } from '@xyo-network/xl1-protocol'
+import React from 'react'
+
+import { TransferRenderCard } from './TransferRenderCard.tsx'
+
+const transfer: Transfer = {
+  schema: TransferSchema,
+  epoch: 1_755_723_852_247,
+  from: ZERO_ADDRESS,
+  transfers: {
+    '1111111111111111111111111111111111111111': '1b1ae4d6e2ef500000',
+    '1111111111111111111111111111111111111112': '5150ae84a8cdf00000',
+    '1111111111111111111111111111111111111113': '989680',
+    '1111111111111111111111111111111111111114': '1b1ae4d6e2ef500000',
+  } as Record<Address, Hex>,
+}
+
+export default {
+  title: 'Payloads/Transfer/Card',
+  component: TransferRenderCard,
+} as Meta
+
+const Template: StoryFn<typeof TransferRenderCard> = (args) => {
+  const [ref] = useEvent<HTMLDivElement>((noun, verb, data) => {
+    alert(`${noun} ${verb} ${data}`)
+  })
+  return (
+    <span ref={ref}>
+      <TransferRenderCard {...args} />
+    </span>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithValue = Template.bind({})
+WithValue.args = { payload: transfer }
+
+const WithOptions = Template.bind({})
+WithOptions.args = { payload: transfer, options: { links: new Set(['address']) } }
+
+export {
+  Default, WithOptions, WithValue,
+}

package/src/transfer/card/TransferRenderCard.tsx

@@ -0,0 +1,71 @@
+import type { CardProps } from '@mui/material'
+import {
+  Card, CardContent, CardHeader, List, useMediaQuery, useTheme,
+} from '@mui/material'
+import { asAddress, asHex } from '@xylabs/hex'
+import type { Payload } from '@xyo-network/payload-model'
+import { BlockiesAvatar } from '@xyo-network/react-chain-blockies'
+import { useEvent } from '@xyo-network/react-event'
+import type { PayloadDetailsRenderProps } from '@xyo-network/react-payload-plugin'
+import { asTransfer } from '@xyo-network/xl1-protocol'
+import React, { useMemo } from 'react'
+
+import type { TransferRenderOptions } from '../lib/index.ts'
+import { TransferRenderListItem } from './ListItem.tsx'
+import { TransferCardHelper } from './TransferRenderCardHelper.tsx'
+import { TransferRenderTotalTypography } from './TransferRenderTotalTypography.tsx'
+
+export interface TransferRenderCardProps extends PayloadDetailsRenderProps, CardProps {
+  options?: TransferRenderOptions
+  payload?: Payload
+}
+
+export const TransferRenderCard: React.FC<TransferRenderCardProps> = ({
+  options, payload, ...props
+}) => {
+  const theme = useTheme()
+  const isMedium = useMediaQuery(theme => theme.breakpoints.up('sm'))
+  const [ref, dispatch] = useEvent<HTMLDivElement>()
+  const transfer = asTransfer(payload)
+  const { from, transfers } = transfer ?? {}
+
+  const transferCardHelper = useMemo(
+    () =>
+      new TransferCardHelper(isMedium, asTransfer(payload), dispatch, options),
+    [isMedium, payload, dispatch, options],
+  )
+
+  return (
+    <Card ref={ref} {...props}>
+      <CardHeader
+        title={transferCardHelper.addressComponent(from, 'From')}
+        slotProps={{
+          title: {
+            title: from, variant: 'body1', fontFamily: 'monospace',
+          },
+        }}
+        avatar={<BlockiesAvatar sx={{ width: 30, height: 30 }} title={from} blockiesOptions={{ seed: from }} />}
+      />
+      <CardContent sx={{ '&:last-child': { pb: theme.spacing(0) } }}>
+        <List>
+          {Object.entries(transfers ?? {}).map(([address, amount], index) => (
+            <TransferRenderListItem
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+              key={index}
+              address={asAddress(address)}
+              amount={asHex(amount)}
+              transferCardHelper={transferCardHelper}
+            />
+          ))}
+        </List>
+        <TransferRenderTotalTypography
+          transferRenderHelper={transferCardHelper}
+          sx={{
+            // pt matches bottom padding of the ListItem
+            width: '100%', justifyContent: 'end', pt: 0.666_666_666_7, pb: theme.spacing(2),
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}

package/src/transfer/card/TransferRenderCardHelper.tsx

@@ -0,0 +1,97 @@
+import { Link } from '@mui/material'
+import { ellipsize } from '@xylabs/eth-address'
+import type { Address, Hex } from '@xylabs/hex'
+import { hexToBigInt, isHex } from '@xylabs/hex'
+import { isDefined, isUndefined } from '@xylabs/typeof'
+import type { EventDispatch } from '@xyo-network/react-event'
+import {
+  type AttoXL1, type Transfer, XL1Places,
+} from '@xyo-network/xl1-protocol'
+import { XL1Amount } from '@xyo-network/xl1-wrappers'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+import type { TransferRenderOptions } from '../lib/index.ts'
+
+export class TransferCardHelper {
+  private _dispatch: EventDispatch | undefined
+  private _isMedium: boolean
+  private _options: TransferRenderOptions | undefined
+  private _payload: Transfer | undefined
+
+  constructor(
+    isMedium: boolean,
+    payload?: Transfer,
+    dispatch?: EventDispatch,
+    options?: TransferRenderOptions,
+  ) {
+    this._isMedium = isMedium
+    this._options = options
+    this._payload = payload
+    this._dispatch = dispatch
+  }
+
+  get dispatch() {
+    return this._dispatch
+  }
+
+  get isMedium() {
+    return this._isMedium
+  }
+
+  get linkedAddresses() {
+    return this.options?.links?.has('address')
+  }
+
+  get options() {
+    return this._options
+  }
+
+  get payload() {
+    return this._payload
+  }
+
+  addressComponent(address?: Address, prefix?: string): ReactNode {
+    const resolvedPrefix = isDefined(prefix) ? `${prefix}: ` : ''
+    const text = `${this.formatAddress(address) ?? 'Unknown'}`
+    if (this.options?.links?.has('address')) {
+      return (
+        <>
+          {resolvedPrefix}
+          {' '}
+          <Link
+            onClick={() => {
+              this.dispatch?.('address', 'click', this.payload?.from)
+            }}
+            sx={{ cursor: 'pointer' }}
+          >
+            {text}
+          </Link>
+        </>
+      )
+    }
+    return `${resolvedPrefix}${text}`
+  }
+
+  formatAddress(address?: Address): string {
+    return (address ? (this.isMedium ? address : ellipsize(address, 5)) : '')
+  }
+
+  formatAmountToXl1(amount?: Hex | bigint): string {
+    if (isUndefined(amount)) return ''
+    const amountBigInt = isHex(amount) ? hexToBigInt(amount) : amount
+    const xl1Amount = XL1Amount.fromAtto(amountBigInt as AttoXL1)
+    return amountBigInt < 1_000_000_000_000n && amountBigInt > 0n ? '<0.00001' : xl1Amount.toString(Number(XL1Places.xl1), { locale: navigator.language })
+  }
+
+  totalTransferred() {
+    if (isUndefined(this.payload?.transfers)) return '0'
+    let total = 0n
+    for (const [, amount] of Object.entries(this.payload.transfers)) {
+      if (isDefined(amount)) {
+        total += hexToBigInt(amount)
+      }
+    }
+    return this.formatAmountToXl1(total)
+  }
+}

package/src/transfer/card/TransferRenderTotalTypography.tsx

@@ -0,0 +1,38 @@
+import type { TypographyProps } from '@mui/material'
+import { Typography, useTheme } from '@mui/material'
+import { NetworkIcon } from '@xyo-network/react-chain-network'
+import { MainNetworkIconString } from '@xyo-network/xl1-network-model'
+import React from 'react'
+
+import type { TransferCardHelper } from './TransferRenderCardHelper.tsx'
+
+export interface TransferRenderTotalTypographyProps extends TypographyProps {
+  transferRenderHelper: TransferCardHelper
+}
+
+export const TransferRenderTotalTypography: React.FC<TransferRenderTotalTypographyProps> = ({
+  transferRenderHelper, sx, ...props
+}) => {
+  const theme = useTheme()
+
+  return (
+    <Typography
+      sx={{
+        display: 'inline-flex', gap: theme.spacing(0.25), fontFamily: 'monospace', ...sx,
+      }}
+      variant="caption"
+      {...props}
+    >
+      Total:
+      {' '}
+      <strong>{transferRenderHelper?.totalTransferred()}</strong>
+      <NetworkIcon
+        icon={MainNetworkIconString}
+        style={{
+          width: 16, height: 16, display: 'inline-flex', alignItems: 'end',
+        }}
+      />
+      (XL1)
+    </Typography>
+  )
+}

package/src/transfer/card/index.ts

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

package/src/transfer/index.ts

@@ -0,0 +1,3 @@
+export * from './box/index.ts'
+export * from './card/index.ts'
+export { default } from './Plugin.ts'

package/src/transfer/lib/TransferRenderOptions.ts

@@ -0,0 +1,5 @@
+export type LinkableFields = 'address'
+
+export type TransferRenderOptions = {
+  links: Set<LinkableFields>
+}

package/src/transfer/lib/index.ts

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