From b453dc2563e76c0bcb1c8f85ed084067fbdd0462 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.araujo@iohk.io>
Date: Fri, 10 May 2024 08:29:22 -0300
Subject: [PATCH] [LW-10533] Assets list on the transaction summary page is
 broken (#1145)

* fix: style and add story

* fix: asset info overflow
---
 .../OutputSummary/OutputSummary.module.scss   | 15 ++++-
 .../OutputSummary/OutputSummary.stories.tsx   | 60 +++++++++++++++++++
 .../OutputSummary/OutputSummaryUtils.tsx      |  2 +-
 3 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/src/ui/components/OutputSummary/OutputSummary.stories.tsx

diff --git a/packages/core/src/ui/components/OutputSummary/OutputSummary.module.scss b/packages/core/src/ui/components/OutputSummary/OutputSummary.module.scss
index 707dc461f..0df58d173 100644
--- a/packages/core/src/ui/components/OutputSummary/OutputSummary.module.scss
+++ b/packages/core/src/ui/components/OutputSummary/OutputSummary.module.scss
@@ -7,6 +7,19 @@
   display: flex;
 }
 
+@mixin right-align {
+  @include half-display;
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+}
+
+.assetInfo {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -32,7 +45,7 @@
 }
 
 .assetList {
-  @include half-display;
+  @include right-align;
   gap: size_unit(4);
 }
 
diff --git a/packages/core/src/ui/components/OutputSummary/OutputSummary.stories.tsx b/packages/core/src/ui/components/OutputSummary/OutputSummary.stories.tsx
new file mode 100644
index 000000000..cb1ece349
--- /dev/null
+++ b/packages/core/src/ui/components/OutputSummary/OutputSummary.stories.tsx
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OutputSummary } from './OutputSummary';
+import { ComponentProps } from 'react';
+import { Wallet } from '@lace/cardano';
+
+const meta: Meta<typeof OutputSummary> = {
+  title: 'OutputSummary',
+  component: OutputSummary,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof OutputSummary>;
+
+const ownAddress = Wallet.Cardano.PaymentAddress(
+  'addr_test1qq585l3hyxgj3nas2v3xymd23vvartfhceme6gv98aaeg9muzcjqw982pcftgx53fu5527z2cj2tkx2h8ux2vxsg475q2g7k3g'
+);
+
+const data: ComponentProps<typeof OutputSummary> = {
+  list: [
+    {
+      assetAmount: '1 ADA',
+      fiatAmount: '1000 USD'
+    },
+    {
+      assetAmount: '1 NFT',
+      fiatAmount: '-'
+    },
+    {
+      assetAmount: '1234 FT',
+      fiatAmount: '100 USD'
+    },
+    {
+      assetAmount: '648823ffdad1610b4162f4dbc87bd47f6f9cf45d772ddef661eff198775348494241 FT',
+      fiatAmount: '1 USD'
+    }
+  ],
+  recipientAddress: ownAddress,
+  recipientName: 'My Address',
+  translations: {
+    recipientAddress: 'Recipient address',
+    sending: 'Sending'
+  }
+};
+
+export const Overview: Story = {
+  args: {
+    ...data
+  }
+};
+
+export const OwnAddress: Story = {
+  args: {
+    ownAddresses: [ownAddress],
+    ...data
+  }
+};
diff --git a/packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx b/packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx
index 38c5d0f77..c4a5a140c 100644
--- a/packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx
+++ b/packages/core/src/ui/components/OutputSummary/OutputSummaryUtils.tsx
@@ -12,7 +12,7 @@ export const RowContainer = (props: { children: React.ReactNode; key?: string })
 );
 
 export const renderAmountInfo = (amount: string, fiat: string, key?: string): JSX.Element => (
-  <Flex key={key} w="$fill" flexDirection="column" alignItems="flex-end">
+  <Flex key={key} className={styles.assetInfo} w="$fill" flexDirection="column" alignItems="flex-end">
     <Text.Body.Normal weight="$medium" data-testid="asset-info-amount">
       {amount}
     </Text.Body.Normal>