@rpg-engine/long-bow 0.7.82 → 0.7.84

package/dist/components/TradingMenu/PremiumLabel.d.ts

@@ -0,0 +1,7 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import React from 'react';
+interface IPremiumLabelProps {
+    accountType: UserAccountTypes;
+}
+declare const PremiumLabel: React.FC<IPremiumLabelProps>;
+export default PremiumLabel;

package/dist/components/TradingMenu/useTradingGold.d.ts

@@ -0,0 +1,16 @@
+import { ITradeRequestItem, ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';
+interface ITradingGoldHook {
+    characterAvailableGold: number;
+    type: TradeTransactionType;
+    traderItems: ITradeResponseItem[];
+}
+export declare const useTradingGold: ({ characterAvailableGold, type, traderItems, }: ITradingGoldHook) => {
+    sum: number;
+    qtyMap: Map<string, number>;
+    isBuy: () => boolean;
+    hasGoldForSale: () => boolean;
+    getFinalGold: () => number;
+    getTradeItems: () => ITradeRequestItem[];
+    updateQuantity: (item: ITradeResponseItem, selectedQty: number) => void;
+};
+export {};

package/dist/long-bow.cjs.development.js

@@ -31139,13 +31139,16 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
     onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
     disabled = _ref.disabled;
+  var renderGems = function renderGems(item) {
+    return item.attachedGems && onRenderGems(item);
+  };
   return React__default.createElement(MarketplaceWrapper, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(SpriteContainer$1, null, React__default.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
     scale: scale
-  }, React__default.createElement(RarityContainer, {
+  }, React__default.createElement(GemContainer, null, renderGems(item)), React__default.createElement(RarityContainer, {
     item: item
   }, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -31156,7 +31159,8 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
       texturePath: item.texturePath,
       isStackable: item.isStackable
     }, atlasJSON),
-    imgScale: 2
+    imgScale: 2,
+    imgClassname: "sprite-from-atlas-img--item"
   })), React__default.createElement(QuantityContainer, null, item.stackQty && item.stackQty > 1 && "x" + Math.round(item.stackQty * 10) / 10))), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "200px",
@@ -31188,33 +31192,37 @@ var QuantityContainer = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "MarketplaceRows__QuantityContainer",
   componentId: "sc-wmpr1o-1"
 })(["position:absolute;display:block;top:15px;left:25px;font-size:", " !important;"], uiFonts.size.xsmall);
+var GemContainer = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "MarketplaceRows__GemContainer",
+  componentId: "sc-wmpr1o-2"
+})(["position:absolute;display:block;top:-5px;left:-10px;font-size:", " !important;"], uiFonts.size.xsmall);
 var Flex$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__Flex",
-  componentId: "sc-wmpr1o-2"
+  componentId: "sc-wmpr1o-3"
 })(["display:flex;gap:24px;"]);
 var ItemIconContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ItemIconContainer",
-  componentId: "sc-wmpr1o-3"
+  componentId: "sc-wmpr1o-4"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
 var GoldContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__GoldContainer",
-  componentId: "sc-wmpr1o-4"
+  componentId: "sc-wmpr1o-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var SpriteContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
-  componentId: "sc-wmpr1o-5"
+  componentId: "sc-wmpr1o-6"
 })(["position:relative;left:0.5rem;"]);
 var PriceValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-6"
+  componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
 var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
 var RarityContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-9"
 })(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);
@@ -33583,6 +33591,52 @@ var DayNightContainer = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1ja236h-3"
 })(["margin-top:-0.3rem;margin-left:-0.3rem;"]);
 
+var PremiumLabel = function PremiumLabel(_ref) {
+  var accountType = _ref.accountType;
+  if (accountType === shared.UserAccountTypes.Free) return null;
+  var getBackgroundColor = function getBackgroundColor() {
+    switch (accountType) {
+      case shared.UserAccountTypes.PremiumBronze:
+        return '#CD7F32';
+      case shared.UserAccountTypes.PremiumSilver:
+        return '#C0C0C0';
+      case shared.UserAccountTypes.PremiumGold:
+        return '#FFD700';
+      case shared.UserAccountTypes.PremiumUltimate:
+        return '#002E99';
+      default:
+        return 'transparent';
+    }
+  };
+  var getShortLabel = function getShortLabel() {
+    switch (accountType) {
+      case shared.UserAccountTypes.PremiumBronze:
+        return 'Bronze PA';
+      case shared.UserAccountTypes.PremiumSilver:
+        return 'Silver PA';
+      case shared.UserAccountTypes.PremiumGold:
+        return 'Gold PA';
+      case shared.UserAccountTypes.PremiumUltimate:
+        return 'Ultimate PA';
+      default:
+        return '';
+    }
+  };
+  return React__default.createElement(StyledLabel, {
+    backgroundColor: getBackgroundColor()
+  }, getShortLabel());
+};
+var StyledLabel = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "PremiumLabel__StyledLabel",
+  componentId: "sc-5bsloi-0"
+})(["background-color:", ";color:", ";font-weight:bold;padding:0 0.4rem;border-radius:3px;margin-right:3px;margin-bottom:2px;display:inline-block;font-size:0.5rem !important;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
+  return backgroundColor === '#002E99' ? 'white' : 'black';
+});
+
 var outerQty = 10;
 var TradingItemRow = function TradingItemRow(_ref) {
   var atlasIMG = _ref.atlasIMG,
@@ -33629,32 +33683,10 @@ var TradingItemRow = function TradingItemRow(_ref) {
   var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
     if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
       return traderItem.canBePurchasedOnlyByPremiumPlans.map(function (accountType) {
-        if (accountType !== shared.UserAccountTypes.Free) {
-          var backgroundColor;
-          var textColor = 'black';
-          switch (accountType) {
-            case shared.UserAccountTypes.PremiumBronze:
-              backgroundColor = '#CD7F32';
-              break;
-            case shared.UserAccountTypes.PremiumSilver:
-              backgroundColor = '#C0C0C0';
-              break;
-            case shared.UserAccountTypes.PremiumGold:
-              backgroundColor = '#FFD700';
-              break;
-            case shared.UserAccountTypes.PremiumUltimate:
-              backgroundColor = '#002E99';
-              break;
-            default:
-              return null;
-          }
-          return React__default.createElement(PremiumLabel, {
-            backgroundColor: backgroundColor,
-            textColor: textColor,
-            key: accountType
-          }, capitalize(accountType) + ' PA');
-        }
-        return null;
+        return React__default.createElement(PremiumLabel, {
+          key: accountType,
+          accountType: accountType
+        });
       });
     }
     return null;
@@ -33674,220 +33706,228 @@ var TradingItemRow = function TradingItemRow(_ref) {
       texturePath: traderItem.texturePath,
       isStackable: traderItem.isStackable
     }, atlasJSON),
-    imgScale: 2.5
+    imgScale: 2
   })))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: "250px"
+    maxWidth: "180px"
   }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price), React__default.createElement("p", null, renderAccountTypeIndicator()))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
-    size: 32,
+    size: 24,
     className: "arrow-selector",
     direction: "left",
-    onPointerDown: onLeftClick.bind(null, outerQty),
-    scale: 0.8
+    onPointerDown: function onPointerDown() {
+      return onLeftClick(outerQty);
+    },
+    scale: 0.7
   }), React__default.createElement(StyledArrow, {
-    size: 32,
+    size: 24,
     className: "arrow-selector",
     direction: "left",
-    onPointerDown: onLeftClick
+    onPointerDown: function onPointerDown() {
+      return onLeftClick();
+    }
   }), React__default.createElement(QuantityInput, {
     type: "text",
     value: inputQty,
     onChange: handleQuantityChange,
     onBlur: handleBlur
   }), React__default.createElement(StyledArrow, {
-    size: 32,
+    size: 24,
     className: "arrow-selector",
     direction: "right",
-    onPointerDown: onRightClick
+    onPointerDown: function onPointerDown() {
+      return onRightClick();
+    }
   }), React__default.createElement(SelectArrow, {
-    size: 32,
+    size: 24,
     className: "arrow-selector",
     direction: "right",
-    onPointerDown: onRightClick.bind(null, outerQty),
-    scale: 0.8
+    onPointerDown: function onPointerDown() {
+      return onRightClick(outerQty);
+    },
+    scale: 0.7
   })));
 };
-var PremiumLabel = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "TradingItemRow__PremiumLabel",
-  componentId: "sc-mja0b5-0"
-})(["background-color:", ";color:", ";font-weight:bold;padding:2px 5px;border-radius:5px;margin-right:5px;margin-bottom:5px;display:inline-block;"], function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
-}, function (_ref3) {
-  var textColor = _ref3.textColor;
-  return textColor;
-});
 var StyledArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
-  componentId: "sc-mja0b5-1"
-})(["margin:40px;"]);
+  componentId: "sc-mja0b5-0"
+})(["margin:0 1.5rem;"]);
 var ItemWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
-  componentId: "sc-mja0b5-2"
-})(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], uiColors.darkGray);
+  componentId: "sc-mja0b5-1"
+})(["width:100%;display:flex;justify-content:space-between;margin-bottom:0.5rem;padding:0.25rem;&:hover{background-color:", ";}"], uiColors.darkGray);
 var ItemNameContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
-  componentId: "sc-mja0b5-3"
-})(["flex:60%;"]);
+  componentId: "sc-mja0b5-2"
+})(["flex:60%;display:flex;align-items:center;"]);
 var ItemIconContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
-  componentId: "sc-mja0b5-4"
-})(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
+  componentId: "sc-mja0b5-3"
+})(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 40px;"]);
 var SpriteContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
-  componentId: "sc-mja0b5-5"
-})(["position:relative;top:-0.5rem;left:0.5rem;"]);
+  componentId: "sc-mja0b5-4"
+})(["position:relative;top:-0.5rem;left:0;"]);
 var NameValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__NameValue",
-  componentId: "sc-mja0b5-6"
-})(["p{font-size:0.75rem;margin:0;}"]);
+  componentId: "sc-mja0b5-5"
+})(["p{font-size:0.6rem;margin:0;line-height:1.2;}"]);
 var QuantityContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-7"
-})(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
+  componentId: "sc-mja0b5-6"
+})(["display:flex;min-width:90px;width:40%;justify-content:flex-end;align-items:center;flex:30%;gap:2px;position:relative;"]);
 var QuantityInput = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "TradingItemRow__QuantityInput",
-  componentId: "sc-mja0b5-8"
-})(["width:40px;text-align:center;background-color:", ";color:white;border:1px solid ", ";padding:2px;font-size:", ";border:none;position:relative;left:-3px;"], uiColors.darkGray, uiColors.lightGray, uiFonts.size.small);
+  componentId: "sc-mja0b5-7"
+})(["width:30px;text-align:center;background-color:", ";color:white;border:none;padding:1px;font-size:", ";position:relative;right:4px;"], uiColors.darkGray, uiFonts.size.small);
 
-var TradingMenu = function TradingMenu(_ref) {
-  var traderItems = _ref.traderItems,
-    onClose = _ref.onClose,
+var useTradingGold = function useTradingGold(_ref) {
+  var characterAvailableGold = _ref.characterAvailableGold,
     type = _ref.type,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    characterAvailableGold = _ref.characterAvailableGold,
-    onConfirm = _ref.onConfirm,
-    equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale;
+    traderItems = _ref.traderItems;
   var _useState = React.useState(0),
     sum = _useState[0],
     setSum = _useState[1];
   var _useState2 = React.useState(new Map()),
     qtyMap = _useState2[0],
     setQtyMap = _useState2[1];
-  var onQuantityChange = function onQuantityChange(item, selectedQty) {
-    setQtyMap(new Map(qtyMap.set(item.key, selectedQty)));
-    var newSum = 0;
-    traderItems.forEach(function (item) {
-      var qty = qtyMap.get(item.key);
-      if (qty) newSum += qty * item.price;
-      setSum(newSum);
-    });
-  };
   var isBuy = function isBuy() {
-    return type == 'buy';
+    return type === 'buy';
   };
   var hasGoldForSale = function hasGoldForSale() {
-    if (isBuy()) {
-      return !(sum > characterAvailableGold);
-    }
-    return true;
+    return isBuy() ? !(sum > characterAvailableGold) : true;
   };
   var getFinalGold = function getFinalGold() {
-    if (isBuy()) {
-      return characterAvailableGold - sum;
-    } else {
-      return characterAvailableGold + sum;
-    }
+    return isBuy() ? characterAvailableGold - sum : characterAvailableGold + sum;
   };
-  var Capitalize = function Capitalize(word) {
-    return word[0].toUpperCase() + word.substring(1);
-  };
-  var onConfirmClick = function onConfirmClick() {
+  var getTradeItems = function getTradeItems() {
     var items = [];
     traderItems.forEach(function (item) {
       var qty = qtyMap.get(item.key);
       if (qty) {
-        items.push(Object.assign({}, item, {
+        items.push(_extends({}, item, {
           qty: qty
         }));
       }
     });
-    onConfirm(items);
+    return items;
+  };
+  var updateQuantity = function updateQuantity(item, selectedQty) {
+    setQtyMap(new Map(qtyMap.set(item.key, selectedQty)));
+    var newSum = 0;
+    qtyMap.forEach(function (qty, key) {
+      var item = traderItems.find(function (i) {
+        return i.key === key;
+      });
+      if (item) newSum += qty * item.price;
+    });
+    setSum(newSum);
   };
+  return {
+    sum: sum,
+    qtyMap: qtyMap,
+    isBuy: isBuy,
+    hasGoldForSale: hasGoldForSale,
+    getFinalGold: getFinalGold,
+    getTradeItems: getTradeItems,
+    updateQuantity: updateQuantity
+  };
+};
+
+var TradingMenu = function TradingMenu(_ref) {
+  var traderItems = _ref.traderItems,
+    onClose = _ref.onClose,
+    type = _ref.type,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    characterAvailableGold = _ref.characterAvailableGold,
+    onConfirm = _ref.onConfirm,
+    equipmentSet = _ref.equipmentSet,
+    scale = _ref.scale;
+  var _useTradingGold = useTradingGold({
+      characterAvailableGold: characterAvailableGold,
+      type: type,
+      traderItems: traderItems
+    }),
+    sum = _useTradingGold.sum,
+    qtyMap = _useTradingGold.qtyMap,
+    isBuy = _useTradingGold.isBuy,
+    hasGoldForSale = _useTradingGold.hasGoldForSale,
+    getFinalGold = _useTradingGold.getFinalGold,
+    getTradeItems = _useTradingGold.getTradeItems,
+    updateQuantity = _useTradingGold.updateQuantity;
   return React__default.createElement(DraggableContainer, {
     type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "600px",
+    onCloseButton: onClose,
+    width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React__default.createElement(Title$b, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$y, null, React__default.createElement(Title$b, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
-  })), React__default.createElement(TradingComponentScrollWrapper, {
+  }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
   }, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
-    return React__default.createElement(ItemWrapper$1, {
-      key: tradeItem.key + "_" + index
-    }, React__default.createElement(TradingItemRow, {
+    return React__default.createElement(TradingItemRow, {
+      key: tradeItem.key + "_" + index,
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
-      onQuantityChange: onQuantityChange,
+      onQuantityChange: updateQuantity,
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0,
       equipmentSet: equipmentSet,
       scale: scale,
       isBuy: isBuy()
-    }));
-  })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2))), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
+    });
+  })), React__default.createElement(InfoSection, null, React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold.toFixed(2))), React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertText, null, "Sorry, not enough money.") : React__default.createElement(GoldInfo, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold().toFixed(2)))), React__default.createElement(ButtonWrapper$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: !hasGoldForSale(),
     onPointerDown: function onPointerDown() {
-      return onConfirmClick();
+      return onConfirm(getTradeItems());
     }
   }, "Confirm"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: function onPointerDown() {
-      return onClose();
-    }
+    onPointerDown: onClose
   }, "Cancel"))));
 };
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TradingMenu__Container",
+  componentId: "sc-1wjsz1l-0"
+})(["width:100%;"]);
 var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
-  componentId: "sc-1wjsz1l-0"
-})(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
-var TradingComponentScrollWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TradingMenu__TradingComponentScrollWrapper",
   componentId: "sc-1wjsz1l-1"
-})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;"]);
-var ItemWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TradingMenu__ItemWrapper",
+})(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
+var ScrollWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TradingMenu__ScrollWrapper",
   componentId: "sc-1wjsz1l-2"
-})(["margin:auto;display:flex;justify-content:space-between;"]);
-var TotalWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TradingMenu__TotalWrapper",
+})(["overflow-y:scroll;height:250px;width:100%;margin-top:0.3rem;overflow-x:hidden;padding:0 0.3rem;"]);
+var InfoSection = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TradingMenu__InfoSection",
   componentId: "sc-1wjsz1l-3"
-})(["margin-top:1rem;display:flex;justify-content:space-between;height:20px;p{color:white !important;}width:100%;margin-left:0.8rem;"]);
-var GoldWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TradingMenu__GoldWrapper",
+})(["margin-top:0.3rem;padding:0 0.5rem;"]);
+var GoldInfo = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TradingMenu__GoldInfo",
   componentId: "sc-1wjsz1l-4"
-})(["margin-top:1rem;display:flex;justify-content:space-between;height:20px;p{color:yellow !important;}width:100%;margin-left:0.8rem;"]);
-var AlertWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TradingMenu__AlertWrapper",
+})(["display:flex;justify-content:space-between;height:16px;width:100%;margin:0.5rem 0;p{color:yellow !important;margin:0;font-size:0.6rem;}"]);
+var AlertText = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "TradingMenu__AlertText",
   componentId: "sc-1wjsz1l-5"
-})(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
+})(["color:red !important;text-align:center;margin:0.3rem 0;font-size:0.5rem;"]);
 var ButtonWrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__ButtonWrapper",
   componentId: "sc-1wjsz1l-6"
-})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;button{padding:0px 50px;}"]);
+})(["display:flex;justify-content:space-around;width:100%;margin-top:0.5rem;"]);
 
 /* eslint-disable react/require-default-props */
 var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$y, {
+  return React__default.createElement(Container$z, {
     maxLines: maxLines
   }, children);
 };
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -33995,7 +34035,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$z, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$A, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -34012,7 +34052,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);