@rpg-engine/long-bow 0.2.38 → 0.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/TradingMenu/TradingMenu.tsx

@@ -1,5 +1,5 @@
 import { ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
@@ -13,7 +13,6 @@ export interface ITrandingMenu {
   atlasJSON: any;
   atlasIMG: any;
   characterAvailableGold: number;
-  onChangeTraderItems: (traderItems: ITradeResponseItem[]) => void;
 }
 
 export const TradingMenu: React.FC<ITrandingMenu> = ({
@@ -23,7 +22,6 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
   atlasJSON,
   atlasIMG,
   characterAvailableGold,
-  onChangeTraderItems,
   onConfirm,
 }) => {
   const [sum, setSum] = useState(0);
@@ -40,11 +38,6 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
     });
   };
 
-  useEffect(() => {
-    if (onChangeTraderItems) {
-      onChangeTraderItems(traderItems);
-    }
-  }, [traderItems]);
   const Capitalize = (word: string) => {
     return word[0].toUpperCase() + word.substring(1);
   };
@@ -64,8 +57,8 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
           <hr className="golden" />
         </div>
         <TradingComponentScrollWrapper>
-          {traderItems.map(tradeItem => (
-            <ItemWrapper>
+          {traderItems.map((tradeItem, index) => (
+            <ItemWrapper key={`${tradeItem.key}_${index}`}>
               <TradingItemRow
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
@@ -158,6 +151,7 @@ const GoldWrapper = styled.div`
 `;
 
 const AlertWrapper = styled.div`
+  margin-top: 1rem;
   display: flex;
   width: 100%;
   justify-content: center;

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,4 +1,4 @@
-import { ITransactionItem } from '@rpg-engine/shared';
+import { ITradeResponseItem } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
@@ -10,7 +10,7 @@ import {
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
-const updateChartTotals = (itemInfo: ITransactionItem) => {
+const updateChartTotals = (itemInfo: ITradeResponseItem) => {
   console.log(itemInfo);
   // will be needed read all itens from chart list ignoring the current item (itemInfo) and recalculate the totals
   // with the amount updated set the total to a state to be shown to the player.