@nobak/design-system 1.0.0

package/lib/components/Symbol.js

@@ -0,0 +1,226 @@
+import React from 'react';
+var _Symbol = function _Symbol(_ref) {
+  var type = _ref.type,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#000000' : _ref$color;
+  switch (type) {
+    case 'Star':
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "49",
+        height: "24",
+        viewBox: "0 0 49 24",
+        fill: "none"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M24.5997 6.19181L24.5998 6.19182L24.6006 6.18578C24.6359 5.92176 24.6731 5.6913 24.711 5.49305C24.749 5.6913 24.7861 5.92176 24.8215 6.18578L24.8215 6.18578L24.8224 6.19182L24.8339 6.27084C25.0186 7.64356 25.7412 8.94077 26.7357 9.93521C27.7301 10.9297 29.0273 11.6523 30.4 11.837L30.4791 11.8485L30.4791 11.8486L30.4851 11.8494C30.7491 11.8847 30.9796 11.9219 31.1778 11.9598C30.9796 11.9978 30.7491 12.0349 30.4851 12.0703L30.4851 12.0703L30.4791 12.0711L30.4 12.0827C29.0273 12.2673 27.7301 12.99 26.7357 13.9844C25.7412 14.9789 25.0186 16.2761 24.8339 17.6488L24.8224 17.7278L24.8223 17.7278L24.8215 17.7339C24.7861 17.9979 24.749 18.2283 24.711 18.4266C24.6731 18.2283 24.6359 17.9979 24.6006 17.7339L24.6006 17.7339L24.5997 17.7278L24.5882 17.6488C24.4035 16.2761 23.6809 14.9789 22.6864 13.9844C21.692 12.99 20.3948 12.2673 19.022 12.0827L18.943 12.0711L18.943 12.0711L18.937 12.0703C18.673 12.0349 18.4425 11.9978 18.2442 11.9598C18.4425 11.9219 18.673 11.8847 18.937 11.8494L18.937 11.8494L18.943 11.8485L19.0221 11.837C20.3948 11.6523 21.692 10.9297 22.6864 9.93521C23.6809 8.94077 24.4035 7.64357 24.5882 6.27085L24.5997 6.19181ZM24.9598 4.64828C24.9598 4.6483 24.9595 4.64873 24.9589 4.64952L24.9598 4.64828ZM32.0226 12.2086C32.0226 12.2086 32.0221 12.2083 32.0213 12.2077L32.0226 12.2086ZM24.4623 19.2714C24.4623 19.2713 24.4626 19.2709 24.4632 19.2701L24.4623 19.2714ZM17.3995 11.7111C17.3995 11.711 17.3999 11.7114 17.4007 11.712L17.3995 11.7111Z",
+        fill: color,
+        stroke: color
+      }), /*#__PURE__*/React.createElement("mask", {
+        id: "path-2-inside-1_56_411",
+        fill: "white"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M25 0C18.3824 0 13 5.38245 13 12C13 18.6176 18.3824 24 25 24C31.6176 24 37 18.6176 37 12C37 5.38447 31.6176 0 25 0ZM25 23.0777C18.883 23.0777 13.9223 18.1191 13.9223 12C13.9223 5.88295 18.8809 0.922302 25 0.922302C31.1191 0.922302 36.0777 5.88093 36.0777 12C36.0777 18.1191 31.1191 23.0777 25 23.0777Z"
+      })), /*#__PURE__*/React.createElement("path", {
+        d: "M25 0C18.3824 0 13 5.38245 13 12C13 18.6176 18.3824 24 25 24C31.6176 24 37 18.6176 37 12C37 5.38447 31.6176 0 25 0ZM25 23.0777C18.883 23.0777 13.9223 18.1191 13.9223 12C13.9223 5.88295 18.8809 0.922302 25 0.922302C31.1191 0.922302 36.0777 5.88093 36.0777 12C36.0777 18.1191 31.1191 23.0777 25 23.0777Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M25 -1C17.8302 -1 12 4.83016 12 12H14C14 5.93473 18.9347 1 25 1V-1ZM12 12C12 19.1699 17.8302 25 25 25V23C18.9347 23 14 18.0653 14 12H12ZM25 25C32.1699 25 38 19.1699 38 12H36C36 18.0653 31.0653 23 25 23V25ZM38 12C38 4.83229 32.17 -1 25 -1V1C31.0652 1 36 5.93664 36 12H38ZM25 22.0777C19.4351 22.0777 14.9223 17.5667 14.9223 12H12.9223C12.9223 18.6715 18.3308 24.0777 25 24.0777V22.0777ZM14.9223 12C14.9223 6.43512 19.4333 1.9223 25 1.9223V-0.0776977C18.3285 -0.0776977 12.9223 5.33079 12.9223 12H14.9223ZM25 1.9223C30.5668 1.9223 35.0777 6.43322 35.0777 12H37.0777C37.0777 5.32865 31.6714 -0.0776977 25 -0.0776977V1.9223ZM35.0777 12C35.0777 17.5668 30.5668 22.0777 25 22.0777V24.0777C31.6714 24.0777 37.0777 18.6714 37.0777 12H35.0777Z",
+        fill: color,
+        mask: "url(#path-2-inside-1_56_411)"
+      }));
+    case 'World':
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "51",
+        height: "24",
+        viewBox: "0 0 51 24",
+        fill: "none"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M49.9641 11.9374C49.984 7.11174 39.1212 3.15507 25.7014 3.09989C12.2817 3.04471 1.38676 6.91192 1.36692 11.7375C1.34708 16.5632 12.2098 20.5198 25.6296 20.575C39.0493 20.6302 49.9443 16.763 49.9641 11.9374Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M30.1659 11.8581C30.1857 7.03244 28.1859 3.11222 25.6992 3.10199C23.2125 3.09177 21.1806 6.99542 21.1607 11.821C21.1409 16.6467 23.1407 20.5669 25.6274 20.5771C28.1141 20.5873 30.146 16.6837 30.1659 11.8581Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M39.724 11.896C39.7438 7.07038 33.4654 3.13256 25.7006 3.10064C17.9359 3.06871 11.6253 6.95477 11.6054 11.7804C11.5856 16.606 17.8641 20.5438 25.6288 20.5758C33.3935 20.6077 39.7042 16.7216 39.724 11.896Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M10.3333 18.3444L40.6759 18.5554",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M50 11.5417H1",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M47.6666 15.4307H3.33331",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M48.4444 9.20837H2.55554",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M8 6.09729H43.7778",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M34.8132 11.8771C34.833 7.05149 30.7526 3.12271 25.6993 3.10193C20.6459 3.08116 16.5333 6.97625 16.5135 11.8019C16.4936 16.6275 20.5741 20.5563 25.6274 20.577C30.6807 20.5978 34.7933 16.7027 34.8132 11.8771Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M44.9188 11.9187C44.9386 7.09309 36.3338 3.14571 25.6993 3.10198C15.0649 3.05826 6.42784 6.93475 6.408 11.7604C6.38815 16.586 14.993 20.5334 25.6275 20.5771C36.2619 20.6208 44.8989 16.7443 44.9188 11.9187Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }));
+    case 'Chip':
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "49",
+        height: "24",
+        viewBox: "0 0 49 24",
+        fill: "none"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M28.1618 19H21.8382C19.1788 19 17 16.8239 17 14.1618V7.83822C17 5.17883 19.1761 3 21.8382 3H28.1618C30.8212 3 33 5.1761 33 7.83822V14.1618C32.9973 16.8212 30.8212 19 28.1618 19Z",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M20 3V0",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M22 3V0",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M25 3V0",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M28 3V0",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M30 3V0",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M20 23V18",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M22 23V19",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M25 23V19",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M28 23V19",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M30 23V18",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M32 6H37",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M33 8H37",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M33 11H37",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M33 14H37",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M32 16H37",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M18 16H13",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M17 14H13",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M17 11H13",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M17 8H13",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M18 6H13",
+        stroke: color,
+        strokeMiterlimit: "10"
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M25.5 9.50001L25.5011 9.5C26.6024 9.49761 27.5 10.3936 27.5 11.5C27.5 12.6054 26.6032 13.5 25.5 13.5C24.3943 13.5 23.5 12.6058 23.5 11.5C23.5 10.3943 24.3943 9.50001 25.5 9.50001Z",
+        fill: color,
+        stroke: color
+      }));
+    case 'Back':
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "94",
+        height: "27",
+        viewBox: "0 0 94 27",
+        fill: "none"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M18.684 10.0335C18.7699 11.4868 13.981 12.6927 15.4306 12.7142L29.9269 12.8111C31.3765 12.8326 31.3765 14.5981 29.9269 14.6196L15.4306 14.512C13.981 14.5335 18.7699 15.7393 18.684 17.1926V18.3015C18.684 18.6783 18.2653 18.9044 17.9432 18.6998L10.695 14.0168C10.4051 13.8231 10.4051 13.4032 10.695 13.2094L17.9432 8.52642C18.2653 8.32187 18.684 8.54794 18.684 8.92474V10.0335Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M33.964 6.73929H40.192C42.5544 6.73929 43.9288 8.19267 43.9288 10.1305C43.9288 11.8099 42.8337 12.9187 41.6203 13.1771C43.0269 13.3924 44.1865 14.835 44.1865 16.4499C44.1865 18.5384 42.7908 20.0347 40.3533 20.0347H33.9747V6.73929H33.964ZM39.8164 12.3804C41.1479 12.3804 41.8887 11.5407 41.8887 10.4426C41.8887 9.34449 41.1479 8.49408 39.8164 8.49408H35.9613V12.3804H39.8164ZM39.9128 18.2799C41.3088 18.2799 42.1357 17.4834 42.1357 16.1915C42.1357 15.0934 41.3839 14.1352 39.9128 14.1352H35.9506V18.2799H39.9128Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M55.4828 17.2788H48.9866L47.9128 20.0347H45.7222L50.9944 6.73929H53.475L58.7472 20.0347H56.5566L55.4828 17.2788ZM49.5555 15.5133H54.9029L52.2184 8.47253L49.5555 15.5133Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M59.4881 13.3923C59.4881 9.30141 62.5055 6.51324 66.2853 6.51324C68.8946 6.51324 70.5159 7.7728 71.5575 9.32304L69.8718 10.2165C69.1739 9.09692 67.8637 8.27868 66.296 8.27868C63.6115 8.27868 61.5392 10.3889 61.5392 13.3817C61.5392 16.353 63.6115 18.4846 66.296 18.4846C67.8637 18.4846 69.1739 17.6663 69.8718 16.5467L71.5575 17.4402C70.5052 18.9904 68.8946 20.2501 66.2853 20.2501C62.5162 20.2717 59.4881 17.4832 59.4881 13.3923Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M77.2272 14.2536L75.9709 15.664V20.0347H73.9843V6.73929H75.9709V13.3386L81.5224 6.73929H83.9922L78.5265 13.0371L84.4323 20.0347H81.9628L77.2272 14.2536Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M80.5346 27H13.4654C6.03477 27 0 20.9391 0 13.5001C0 6.06106 6.0455 0 13.4654 0H80.5346C87.9652 0 94 6.06106 94 13.5001C94 20.9391 87.9652 27 80.5346 27ZM13.4547 1.06578C6.6146 1.06578 1.06305 6.64239 1.06305 13.4893C1.06305 20.3362 6.62534 25.9127 13.4547 25.9127H80.5238C87.3639 25.9127 92.9155 20.3362 92.9155 13.4893C92.9155 6.64239 87.3532 1.06578 80.5238 1.06578H13.4547Z",
+        fill: color
+      }));
+    case 'Next':
+      return /*#__PURE__*/React.createElement("svg", {
+        width: "94",
+        height: "27",
+        viewBox: "0 0 94 27",
+        fill: "none"
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M76.9266 17.1818C76.8407 15.7285 81.6299 14.5227 80.1802 14.5012L65.684 14.4042C64.2344 14.3827 64.2344 12.6172 65.684 12.5957L80.1802 12.7033C81.6299 12.6818 76.8407 11.476 76.9266 10.0227V8.91381C76.9266 8.53702 77.3456 8.31095 77.6677 8.51549L84.9158 13.1985C85.2058 13.3923 85.2058 13.8121 84.9158 14.0059L77.6677 18.689C77.3456 18.8936 76.9266 18.6675 76.9266 18.2907V17.1818Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M13.3042 9.82885V20.0347H11.3179V6.73914H13.3687L20.5846 16.7081V6.73914H22.5712V20.0347H20.6383L13.3042 9.82885Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M25.9536 6.73914H34.8661V8.49393H27.9509V12.3804H34.7266V14.1351H27.9509V18.2799H34.8661V20.0347H25.9536V6.73914Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M42.8336 14.6196L38.8606 20.0455H36.4553L41.5451 13.2308L36.756 6.74991H39.1613L42.8443 11.8528L46.5061 6.74991H48.9114L44.1546 13.2092L49.2014 20.0455H46.8176L42.8336 14.6196Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M54.5058 8.49393H50.3931V6.73914H60.5942V8.49393H56.5032V20.0347H54.5166V8.49393H54.5058Z",
+        fill: color
+      }), /*#__PURE__*/React.createElement("path", {
+        d: "M80.5346 27H13.4654C6.03477 27 0 20.9389 0 13.4999C0 6.06093 6.0455 0 13.4654 0H80.5346C87.9652 0 94 6.06093 94 13.4999C94 20.9389 87.9652 27 80.5346 27ZM13.4547 1.06578C6.6146 1.06578 1.06305 6.64226 1.06305 13.4892C1.06305 20.3361 6.62534 25.9127 13.4547 25.9127H80.5238C87.3639 25.9127 92.9155 20.3361 92.9155 13.4892C92.9155 6.64226 87.3532 1.06578 80.5238 1.06578H13.4547Z",
+        fill: color
+      }));
+    default:
+      return null;
+  }
+};
+export { _Symbol as Symbol };

package/lib/components/TransactionComposer/TransactionComposer.js

@@ -0,0 +1,258 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useEffect } from 'react';
+import { Form } from "../../shared/components/forms/Form/Form";
+import { Button } from "../../shared/elements/Button/Button";
+// Added import
+// If TransactionCard exists, import it. Otherwise, use a placeholder.
+// import { TransactionCard } from '../../shared/components/TransactionCard/TransactionCard';
+
+// Placeholder TransactionCard
+var TransactionCard = function TransactionCard(_ref) {
+  var tx = _ref.tx;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-50 border p-4 rounded-lg mt-4"
+  }, /*#__PURE__*/React.createElement("pre", {
+    className: "text-xs whitespace-pre-wrap"
+  }, JSON.stringify(tx, null, 2)));
+};
+
+// Helper for Stellar address validation
+var isValidStellarAddress = function isValidStellarAddress(address) {
+  return /^G[A-Z2-7]{55}$/.test(address);
+};
+
+// Memo types for Stellar
+var MEMO_TYPES = [{
+  label: 'None',
+  value: 'none'
+}, {
+  label: 'Text',
+  value: 'text'
+}, {
+  label: ': ',
+  value: ', '
+}, {
+  label: 'Hash',
+  value: 'hash'
+}, {
+  label: 'Return',
+  value: 'return'
+}];
+export var TransactionComposer = function TransactionComposer(_ref2) {
+  var _ref2$availableAssets = _ref2.availableAssets,
+    availableAssets = _ref2$availableAssets === void 0 ? [{
+      code: 'XLM',
+      issuer: '',
+      balance: '1000'
+    }, {
+      code: 'USDC',
+      issuer: 'GA...USDC',
+      balance: '250'
+    }] : _ref2$availableAssets,
+    _ref2$networkFee = _ref2.networkFee,
+    networkFee = _ref2$networkFee === void 0 ? '0.00001' : _ref2$networkFee,
+    _ref2$networkStatus = _ref2.networkStatus,
+    networkStatus = _ref2$networkStatus === void 0 ? 'online' : _ref2$networkStatus,
+    _ref2$recipientType = _ref2.recipientType,
+    recipientType = _ref2$recipientType === void 0 ? 'stellar' : _ref2$recipientType,
+    _ref2$scenario = _ref2.scenario,
+    scenario = _ref2$scenario === void 0 ? 'simple' : _ref2$scenario;
+  // Scenario-driven initial state
+  var getInitialRecipient = function getInitialRecipient() {
+    if (scenario === 'federated') return 'bob*stellar.org';
+    if (scenario === 'error') return 'BADADDRESS';
+    return recipientType === 'federated' ? 'bob*stellar.org' : 'GCFX3...';
+  };
+  var getInitialAsset = function getInitialAsset() {
+    return scenario === 'multi-asset' && availableAssets[1] ? availableAssets[1].code : availableAssets[0].code;
+  };
+  var getInitialAmount = function getInitialAmount() {
+    return scenario === 'error' ? '99999' : ': ';
+  };
+  var getInitialMemoType = function getInitialMemoType() {
+    return scenario === 'federated' ? 'text' : 'none';
+  };
+  var getInitialMemoValue = function getInitialMemoValue() {
+    return scenario === 'federated' ? 'Invoice #123' : '';
+  };
+  var _useState = useState(getInitialRecipient()),
+    _useState2 = _slicedToArray(_useState, 2),
+    recipient = _useState2[0],
+    setRecipient = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    recipientError = _useState4[0],
+    setRecipientError = _useState4[1];
+  var _useState5 = useState(getInitialAsset()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    asset = _useState6[0],
+    setAsset = _useState6[1];
+  var _useState7 = useState(getInitialAmount()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    amount = _useState8[0],
+    setAmount = _useState8[1];
+  var _useState9 = useState(''),
+    _useState0 = _slicedToArray(_useState9, 2),
+    amountError = _useState0[0],
+    setAmountError = _useState0[1];
+  var _useState1 = useState(getInitialMemoType()),
+    _useState10 = _slicedToArray(_useState1, 2),
+    memoType = _useState10[0],
+    setMemoType = _useState10[1];
+  var _useState11 = useState(getInitialMemoValue()),
+    _useState12 = _slicedToArray(_useState11, 2),
+    memoValue = _useState12[0],
+    setMemoValue = _useState12[1];
+  var _useState13 = useState(networkFee),
+    _useState14 = _slicedToArray(_useState13, 2),
+    fee = _useState14[0],
+    setFee = _useState14[1];
+  var _useState15 = useState(networkStatus),
+    _useState16 = _slicedToArray(_useState15, 2),
+    netStatus = _useState16[0],
+    setNetStatus = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    preview = _useState18[0],
+    setPreview = _useState18[1];
+
+  // Real-time validation
+  var validateRecipient = function validateRecipient(value) {
+    if (recipientType === 'federated') {
+      if (!/^.+\*.+\..+$/.test(value)) {
+        setRecipientError('Invalid federated address.');
+      } else {
+        setRecipientError('');
+      }
+    } else {
+      if (!isValidStellarAddress(value)) {
+        setRecipientError('Invalid Stellar address.');
+      } else {
+        setRecipientError('');
+      }
+    }
+    setRecipient(value);
+  };
+  var validateAmount = function validateAmount(value) {
+    var selectedAsset = availableAssets.find(function (a) {
+      return a.code === asset;
+    });
+    var bal = selectedAsset ? parseFloat(selectedAsset.balance) : 0;
+    var num = parseFloat(value);
+    if (isNaN(num) || num <= 0) {
+      setAmountError('Enter a valid amount.');
+    } else if (num > bal) {
+      setAmountError('Insufficient balance.');
+    } else {
+      setAmountError('');
+    }
+    setAmount(value);
+  };
+
+  // Compose transaction preview
+  var handlePreview = function handlePreview() {
+    if (!recipient || recipientError || !amount || amountError) return;
+    setPreview({
+      recipient: recipient,
+      asset: asset,
+      amount: amount,
+      memoType: memoType,
+      memoValue: memoValue,
+      fee: fee,
+      networkStatus: netStatus
+    });
+  };
+
+  // Simulate fee estimation and network status
+  useEffect(function () {
+    setFee(networkFee);
+    setNetStatus(networkStatus);
+  }, [asset, amount, networkFee, networkStatus]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full max-w-lg mx-auto bg-white rounded-xl shadow-md p-6 mt-4 flex flex-col gap-6"
+  }, /*#__PURE__*/React.createElement(Form, {
+    fields: [[{
+      id: 'recipient',
+      type: 'text',
+      label: 'Recipient',
+      value: recipient,
+      onChange: function onChange(e) {
+        return validateRecipient(e.target.value);
+      },
+      error: recipientError,
+      placeholder: recipientType === 'federated' ? 'bob*stellar.org' : 'G... or federated address'
+    }, {
+      id: 'asset',
+      type: 'select',
+      label: 'Asset',
+      value: asset,
+      onChange: function onChange(e) {
+        return setAsset(e.target.value);
+      },
+      options: availableAssets.map(function (a) {
+        return {
+          label: "".concat(a.code).concat(a.issuer ? ': ' + a.issuer.slice(0, 6) + '...)' : ''),
+          value: a.code
+        };
+      })
+    }, {
+      id: 'amount',
+      type: 'text',
+      label: 'Amount',
+      value: amount,
+      onChange: function onChange(e) {
+        return validateAmount(e.target.value);
+      },
+      error: amountError,
+      placeholder: '0.00'
+    }, {
+      id: 'memoType',
+      type: 'select',
+      label: 'Memo Type',
+      value: memoType,
+      onChange: function onChange(e) {
+        return setMemoType(e.target.value);
+      },
+      options: MEMO_TYPES
+    }].concat(_toConsumableArray(memoType !== 'none' ? [{
+      id: 'memoValue',
+      type: 'text',
+      label: 'Memo',
+      value: memoValue,
+      onChange: function onChange(e) {
+        return setMemoValue(e.target.value);
+      },
+      placeholder: 'Enter memo'
+    }] : []))],
+    action: handlePreview // Renamed from onSubmit to action
+    ,
+    button: {
+      text: "Preview Transaction"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-4 mt-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-neutral-600"
+  }, "Estimated Fee: ", /*#__PURE__*/React.createElement("span", {
+    className: "font-mono"
+  }, fee), " XLM"), /*#__PURE__*/React.createElement("span", {
+    className: "text-xs px-2 py-1 rounded ".concat(netStatus === 'online' ? 'bg-positive-100 text-positive-700' : 'bg-alert-100 text-alert-700')
+  }, netStatus === 'online' ? 'Network Online' : netStatus)), preview && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TransactionCard, {
+    tx: preview
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "Confirm Transaction",
+    variant: "primary",
+    onClick: function onClick() {
+      return alert('Transaction confirmed!');
+    }
+  })));
+};