From cc068cc2b9c33723d29f0dfcdaf5c9f5fca43739 Mon Sep 17 00:00:00 2001
From: asiaznik <artur@vegaprotocol.io>
Date: Fri, 12 May 2023 09:48:21 +0200
Subject: [PATCH] another idea

---
 .../ui-toolkit/src/components/toast/toast.tsx | 102 +++++++++++++++++-
 .../use-ethereum-withdraw-approval-toasts.tsx |  64 ++++++++---
 libs/withdraws/src/lib/withdrawals-table.tsx  |   1 +
 3 files changed, 150 insertions(+), 17 deletions(-)

diff --git a/libs/ui-toolkit/src/components/toast/toast.tsx b/libs/ui-toolkit/src/components/toast/toast.tsx
index e57d0481a..c14fff91a 100644
--- a/libs/ui-toolkit/src/components/toast/toast.tsx
+++ b/libs/ui-toolkit/src/components/toast/toast.tsx
@@ -3,7 +3,7 @@ import styles from './toast.module.css';
 import type { IconName } from '@blueprintjs/icons';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import type { HTMLAttributes, HtmlHTMLAttributes } from 'react';
+import { HTMLAttributes, HtmlHTMLAttributes, ReactNode, useState } from 'react';
 import { forwardRef, useEffect } from 'react';
 import { useCallback } from 'react';
 import { useLayoutEffect } from 'react';
@@ -11,6 +11,7 @@ import { useRef } from 'react';
 import { Intent } from '../../utils/intent';
 import { Icon } from '../icon';
 import { Loader } from '../loader';
+import { t } from '@vegaprotocol/i18n';
 
 export type ToastContent = JSX.Element | undefined;
 
@@ -63,6 +64,78 @@ export const Panel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   }
 );
 
+type CollapsablePanelProps = {
+  actions?: ReactNode;
+};
+export const CollapsablePanel = forwardRef<
+  HTMLDivElement,
+  CollapsablePanelProps & HTMLAttributes<HTMLDivElement>
+>(({ children, className, actions, ...props }, ref) => {
+  const [collapsed, setCollapsed] = useState(true);
+  return (
+    <div
+      data-panel
+      ref={ref}
+      data-test
+      className={classNames(
+        'relative',
+        'p-2 rounded mt-[10px]',
+        'font-mono text-[12px] leading-[16px] font-normal',
+        '[&>h4]:font-bold',
+        'overflow-auto',
+        {
+          'h-[64px] overflow-hidden': collapsed,
+          'pb-4': !collapsed,
+        },
+        className
+      )}
+      aria-expanded={!collapsed}
+      onDoubleClick={(e) => {
+        e.preventDefault();
+        setCollapsed(!collapsed);
+      }}
+      {...props}
+    >
+      {children}
+      {collapsed && (
+        <div
+          data-panel-curtain
+          className={classNames(
+            'bg-gradient-to-b from-transparent to-inherit',
+            'absolute bottom-0 left-0 h-8 w-full pointer-events-none'
+          )}
+        ></div>
+      )}
+      <div
+        data-panel-actions
+        className={classNames(
+          'absolute bottom-0 right-0',
+          'p-2',
+          'rounded-tl',
+          'flex align-middle gap-1'
+        )}
+      >
+        {actions}
+        <button
+          className="cursor-pointer"
+          onClick={(e) => {
+            e.preventDefault();
+            setCollapsed(!collapsed);
+          }}
+          title={collapsed ? t('Expand') : t('Collapse')}
+          aria-label={collapsed ? t('Expand') : t('Collapse')}
+        >
+          {collapsed ? (
+            <Icon name="expand-all" size={3} />
+          ) : (
+            <Icon name="collapse-all" size={3} />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+});
+
 export const ToastHeading = forwardRef<
   HTMLHeadingElement,
   HtmlHTMLAttributes<HTMLHeadingElement>
@@ -171,7 +244,7 @@ export const Toast = ({
         },
         // panel's colours
         {
-          '[&_[data-panel]]:bg-vega-light-150 [&_[data-panel]]:dark:bg-vega-dark-150 ':
+          '[&_[data-panel]]:bg-vega-light-150 [&_[data-panel]]:dark:bg-vega-dark-150':
             intent === Intent.None,
           '[&_[data-panel]]:bg-vega-blue-350 [&_[data-panel]]:dark:bg-vega-blue-650':
             intent === Intent.Primary,
@@ -182,6 +255,31 @@ export const Toast = ({
           '[&_[data-panel]]:bg-vega-pink-350 [&_[data-panel]]:dark:bg-vega-pink-650':
             intent === Intent.Danger,
         },
+        {
+          '[&_[data-panel]]:to-vega-light-150 [&_[data-panel]]:dark:to-vega-dark-150':
+            intent === Intent.None,
+          '[&_[data-panel]]:to-vega-blue-350 [&_[data-panel]]:dark:to-vega-blue-650':
+            intent === Intent.Primary,
+          '[&_[data-panel]]:to-vega-green-350 [&_[data-panel]]:dark:to-vega-green-650':
+            intent === Intent.Success,
+          '[&_[data-panel]]:to-vega-orange-350 [&_[data-panel]]:dark:to-vega-orange-650':
+            intent === Intent.Warning,
+          '[&_[data-panel]]:to-vega-pink-350 [&_[data-panel]]:dark:to-vega-pink-650':
+            intent === Intent.Danger,
+        },
+        // panel's actions
+        {
+          '[&_[data-panel-actions]]:bg-vega-light-200 [&_[data-panel-actions]]:dark:bg-vega-dark-100 ':
+            intent === Intent.None,
+          '[&_[data-panel-actions]]:bg-vega-blue-400 [&_[data-panel-actions]]:dark:bg-vega-blue-600':
+            intent === Intent.Primary,
+          '[&_[data-panel-actions]]:bg-vega-green-400 [&_[data-panel-actions]]:dark:bg-vega-green-600':
+            intent === Intent.Success,
+          '[&_[data-panel-actions]]:bg-vega-orange-400 [&_[data-panel-actions]]:dark:bg-vega-orange-600':
+            intent === Intent.Warning,
+          '[&_[data-panel-actions]]:bg-vega-pink-400 [&_[data-panel-actions]]:dark:bg-vega-pink-600':
+            intent === Intent.Danger,
+        },
         // panels's progress bar colours
         '[&_[data-progress-bar]]:mt-[10px] [&_[data-progress-bar]]:mb-[4px]',
         {
diff --git a/libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx b/libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx
index 236b52d01..8d6b0d0b0 100644
--- a/libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx
+++ b/libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx
@@ -1,6 +1,6 @@
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { CollapsablePanel, Toast } from '@vegaprotocol/ui-toolkit';
 import { CopyWithTooltip, Icon } from '@vegaprotocol/ui-toolkit';
 import { ToastHeading } from '@vegaprotocol/ui-toolkit';
 import { Panel } from '@vegaprotocol/ui-toolkit';
@@ -51,23 +51,57 @@ const EthWithdrawalApprovalToastContent = ({
       </strong>
     </Panel>
   );
+
+  const bundle = [
+    ['asset_source', tx.approval?.assetSource],
+    ['amount', tx.approval?.amount],
+    ['target_address', tx.approval?.targetAddress],
+    ['creation', tx.approval?.creation],
+    ['nonce', tx.approval?.nonce],
+    ['signatures', tx.approval?.signatures],
+  ];
+
+  const bundleCopy = bundle.map((item) => item.join('\n')).join('\n\n');
+
+  console.log(bundleCopy);
+
+  const panel = (
+    <Panel
+      className="flex align-middle max-w-full"
+      title={tx.approval?.signatures}
+    >
+      <div className="truncate text-ellipsis">{tx.approval?.signatures}</div>
+      <CopyWithTooltip text={tx.approval?.signatures}>
+        <button data-testid="copy-withdrawal-signatures" className="underline">
+          {t('Copy bundle')} <Icon name="duplicate" className="ml-2" />
+        </button>
+      </CopyWithTooltip>
+    </Panel>
+  );
+
   const signatureBundleInfo = tx.approval?.signatures ? (
     <div className="mt-3">
-      <p>{t('Please copy your signature...')}</p>
-      <Panel
-        className="flex align-middle max-w-full"
-        title={tx.approval.signatures}
+      <p>{t('Transaction details:')}</p>
+      <CollapsablePanel
+        actions={
+          <CopyWithTooltip text={bundleCopy}>
+            <button
+              data-testid="copy-withdrawal-signatures"
+              className="underline"
+              title={t('Copy transaction details bundle')}
+            >
+              <Icon name="duplicate" size={3} />
+            </button>
+          </CopyWithTooltip>
+        }
       >
-        <div className="truncate text-ellipsis">{tx.approval.signatures}</div>
-        <CopyWithTooltip text={tx.approval?.signatures}>
-          <button
-            data-testid="copy-withdrawal-signatures"
-            className="underline"
-          >
-            <Icon name="duplicate" className="ml-2" />
-          </button>
-        </CopyWithTooltip>
-      </Panel>
+        {bundle.map(([key, value]) => (
+          <div className="mb-1">
+            <div className="font-bold">{key}</div>
+            <div className="break-all">{value}</div>
+          </div>
+        ))}
+      </CollapsablePanel>
     </div>
   ) : (
     ''
diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx
index 802cb858d..ae9f833e1 100644
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/libs/withdraws/src/lib/withdrawals-table.tsx
@@ -130,6 +130,7 @@ export const WithdrawalsTable = (
           component: data?.txHash ? 'EtherscanLinkCell' : 'CompleteCell',
         })}
       />
+      <AgGridColumn field="id" />
     </AgGrid>
   );
 };