From 5134df02b5e9c6002f3d9c42cd615f2ece66ed74 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 26 Apr 2022 18:48:29 -0700
Subject: [PATCH] Fix/268 Overflow error text (#299)

* add break word for transaction dialog error state, add stories for transaction-dialog

* update story text to be more explanatory
---
 .../transaction-dialog.stories.tsx            | 62 +++++++++++++++++++
 .../transaction-dialog/transaction-dialog.tsx |  4 +-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.stories.tsx

diff --git a/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.stories.tsx b/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.stories.tsx
new file mode 100644
index 000000000..b8062683c
--- /dev/null
+++ b/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.stories.tsx
@@ -0,0 +1,62 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { TransactionDialog } from './transaction-dialog';
+import { TxState } from '@vegaprotocol/react-helpers';
+
+export default {
+  component: TransactionDialog,
+  title: 'TransactionDialog',
+  parameters: {
+    themes: false,
+  },
+} as ComponentMeta<typeof TransactionDialog>;
+
+const Template: ComponentStory<typeof TransactionDialog> = (args) => (
+  <TransactionDialog {...args} />
+);
+
+export const Requested = Template.bind({});
+Requested.args = {
+  name: 'Some tx',
+  status: TxState.Requested,
+  error: null,
+  confirmations: 0,
+  txHash: null,
+  requiredConfirmations: 1,
+  confirmed: false,
+};
+
+export const Pending = Template.bind({});
+Pending.args = {
+  name: 'Some tx',
+  status: TxState.Pending,
+  error: null,
+  confirmations: 1,
+  txHash: '0x123123',
+  requiredConfirmations: 3,
+  confirmed: false,
+};
+export const Error = Template.bind({});
+Error.args = {
+  name: 'Some tx',
+  status: TxState.Error,
+  error: {
+    name: 'Error',
+    message:
+      'Some very long error message with text that should wrap, here is some error data: {"chain":3,"data":"0x08c379000000000000000000000000000000000000000000000000000000000"}',
+  },
+  confirmations: 0,
+  txHash: null,
+  requiredConfirmations: 1,
+  confirmed: false,
+};
+
+export const Complete = Template.bind({});
+Complete.args = {
+  name: 'Some tx',
+  status: TxState.Complete,
+  error: null,
+  confirmations: 3,
+  txHash: '0x123123',
+  requiredConfirmations: 3,
+  confirmed: true,
+};
diff --git a/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.tsx b/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.tsx
index 913d5c29e..7a02ab73e 100644
--- a/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.tsx
+++ b/libs/ui-toolkit/src/components/transaction-dialog/transaction-dialog.tsx
@@ -38,7 +38,9 @@ export const TransactionDialog = ({
   const renderContent = () => {
     if (status === TxState.Error) {
       return (
-        <p className="text-black dark:text-white">{error && error.message}</p>
+        <p className="break-all text-black dark:text-white">
+          {error && error.message}
+        </p>
       );
     }