tx status

icons/info.svg

 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.034 3H6.965C4.587 3 3 4.703 3 7.141v5.718C3 15.299 4.583 17 6.965 17h6.068C15.416 17 17 15.3 17 12.859V7.14C17 4.701 15.416 3 13.034 3ZM6.965 4.05h6.069c1.785 0 2.916 1.214 2.916 3.091v5.718c0 1.877-1.13 3.091-2.917 3.091H6.966c-1.786 0-2.916-1.214-2.916-3.091V7.14c0-1.874 1.134-3.091 2.915-3.091ZM10 6.818a.525.525 0 0 1 .072 1.045l-.079.005a.525.525 0 0 1-.07-1.045l.077-.005Zm-.007 2.221c.266 0 .486.198.52.454l.005.071v3.093a.525.525 0 0 1-1.045.072l-.005-.072V9.564c0-.29.235-.525.525-.525Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.034 3H6.965C4.587 3 3 4.703 3 7.141v5.718C3 15.299 4.583 17 6.965 17h6.068C15.416 17 17 15.3 17 12.859V7.14C17 4.701 15.416 3 13.034 3ZM6.965 4.05h6.069c1.785 0 2.916 1.214 2.916 3.091v5.718c0 1.877-1.13 3.091-2.917 3.091H6.966c-1.786 0-2.916-1.214-2.916-3.091V7.14c0-1.874 1.134-3.091 2.915-3.091ZM10 6.818a.525.525 0 0 1 .072 1.045l-.079.005a.525.525 0 0 1-.07-1.045L10 6.818Zm-.007 2.221c.266 0 .486.198.52.454l.005.071v3.093a.525.525 0 0 1-1.045.072l-.005-.072V9.564c0-.29.235-.525.525-.525Z" fill="currentColor"/>
 </svg>

icons/status/error.svg

+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10ZM3.567 2.683a.625.625 0 1 0-.884.884L4.116 5 2.683 6.433a.625.625 0 1 0 .884.884L5 5.884l1.433 1.433a.625.625 0 1 0 .884-.884L5.884 5l1.433-1.433a.625.625 0 1 0-.884-.884L5 4.116 3.567 2.683Z" fill="currentColor"/>
+</svg>

icons/status/success.svg

+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10Zm2.552-6.652a.625.625 0 0 0-1.083-.625L4.492 6.148l-1.34-.954a.625.625 0 0 0-.725 1.018l1.9 1.353a.625.625 0 0 0 .903-.196l2.322-4.02Z" fill="currentColor"/>
+</svg>

ui/tx/TxStatus.tsx

+import { Tag, TagLabel, TagLeftIcon } from '@chakra-ui/react';
+import React from 'react';
+
+import errorIcon from 'icons/status/error.svg';
+import successIcon from 'icons/status/success.svg';
+
+export interface Props {
+  status: 'success' | 'error';
+}
+
+const TxStatus = ({ status }: Props) => {
+  const label = status === 'success' ? 'Success' : 'Error';
+  const icon = status === 'success' ? successIcon : errorIcon;
+  const colorScheme = status === 'success' ? 'green' : 'red';
+
+  return (
+    <Tag colorScheme={ colorScheme }>
+      <TagLeftIcon boxSize={ 2.5 } as={ icon }/>
+      <TagLabel>{ label }</TagLabel>
+    </Tag>
+  );
+};
+
+export default TxStatus;