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

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,
+};

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>
       );
     }