Merge branch 'frontend-revamp-tx-details'

Author: shonsirsha

CHANGELOG.md

@@ -31,6 +31,7 @@
 - Update decimal formatting for stablecoin transactions
 - Change block explorer to mempool.space
 - Integrate Bitrefill and add spending section
+- Revamp transaction detail dialog
 
 ## v4.48.8
 - Bundle BitBox02 Nova firmware version v9.23.3

frontends/web/src/components/accordion/accordion.module.css

@@ -0,0 +1,45 @@
+.accordion {
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  background-color: var(--background-secondary);
+  border: none;
+  cursor: pointer;
+  font-size: var(--size-default);
+  font-family: var(--font-family);
+  color: var(--color-default);
+  text-align: left;
+}
+
+.header:focus {
+  outline: none;
+}
+
+.title {
+  flex: 1;
+  font-weight: 600;
+}
+
+.chevron {
+  flex-shrink: 0;
+  transform: rotate(90deg);
+  transition: transform 0.2s ease-out;
+}
+
+.chevron.expanded {
+  transform: rotate(270deg);
+}
+
+.content {
+  padding: var(--space-half) 0;
+  padding-top: calc(var(--space-half) + var(--space-quarter));
+  background-color: var(--background-secondary);
+  color: var(--color-default);
+  font-size: var(--size-default);
+}

frontends/web/src/components/accordion/accordion.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright 2025 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, ReactNode } from 'react';
+import { ChevronRightDark } from '@/components/icon/icon';
+import styles from './accordion.module.css';
+
+type TAccordionProps = {
+  title: string;
+  className?: string;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  defaultOpen?: boolean;
+  children: ReactNode;
+};
+
+export const Accordion = ({
+  title,
+  className = '',
+  isOpen,
+  onToggle,
+  defaultOpen = false,
+  children,
+}: TAccordionProps) => {
+  const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+
+  const isControlled = isOpen !== undefined && onToggle !== undefined;
+  const currentOpen = isControlled ? isOpen : internalOpen;
+
+  const handleToggle = () => {
+    if (isControlled) {
+      onToggle();
+    } else {
+      setInternalOpen(prev => !prev);
+    }
+  };
+
+  return (
+    <div className={`${styles.accordion || ''} ${className}`}>
+      <button
+        className={styles.header}
+        onClick={handleToggle}
+        aria-expanded={currentOpen}
+        type="button"
+      >
+        <span className={styles.title}>{title}</span>
+        <ChevronRightDark
+          className={`${styles.chevron || ''} ${currentOpen ? styles.expanded || '' : ''}`}
+          width={24}
+          height={24}
+        />
+      </button>
+      {currentOpen && (
+        <div className={styles.content}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

frontends/web/src/components/amount/amount-with-unit.tsx

@@ -29,6 +29,7 @@ type TAmountWithUnitProps = {
   sign?: string;
   alwaysShowAmounts?: boolean;
   convertToFiat?: boolean;
+  unitClassName?: string;
 };
 
 export const AmountWithUnit = ({
@@ -37,7 +38,8 @@ export const AmountWithUnit = ({
   enableRotateUnit: rotateUnit,
   sign,
   convertToFiat,
-  alwaysShowAmounts = false
+  alwaysShowAmounts = false,
+  unitClassName = ''
 }: TAmountWithUnitProps) => {
   const { rotateDefaultCurrency, defaultCurrency, rotateBtcUnit } = useContext(RatesContext);
 
@@ -72,7 +74,7 @@ export const AmountWithUnit = ({
       />
     ) : '---';
 
-  const amountUnit = <AmountUnit unit={displayedUnit} rotateUnit={enableClick ? onClick : undefined}/>;
+  const amountUnit = <AmountUnit unit={displayedUnit} rotateUnit={enableClick ? onClick : undefined} className={unitClassName}/>;
 
   if (tableRow) {
     return (
@@ -98,11 +100,12 @@ export const AmountWithUnit = ({
 type TAmountUnitProps = {
   rotateUnit?: () => Promise<void>;
   unit: ConversionUnit | CoinUnit;
+  className?: string;
 };
 
-export const AmountUnit = ({ rotateUnit, unit }: TAmountUnitProps) => {
+export const AmountUnit = ({ rotateUnit, unit, className = '' }: TAmountUnitProps) => {
   const classRototable = rotateUnit ? (style.rotatable || '') : '';
-  const textStyle = `${style.unit || ''} ${classRototable}`;
+  const textStyle = `${style.unit || ''} ${classRototable} ${className}`;
   return (
     <span className={textStyle} onClick={rotateUnit}>
       {unit}

frontends/web/src/components/copy/Copy.tsx

@@ -25,12 +25,26 @@ type TProps = {
   alignRight?: boolean;
   borderLess?: boolean;
   className?: string;
+  inputFieldClassName?: string;
+  buttonClassName?: string;
   disabled?: boolean;
   flexibleHeight?: boolean;
+  displayValue?: string;
   value: string;
 };
 
-export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, className, disabled, flexibleHeight }: TProps) => {
+export const CopyableInput = ({
+  alignLeft,
+  alignRight,
+  borderLess,
+  value,
+  className,
+  inputFieldClassName,
+  buttonClassName,
+  disabled,
+  flexibleHeight,
+  displayValue,
+}: TProps) => {
   const [success, setSuccess] = useState(false);
   const { t } = useTranslation();
 
@@ -63,7 +77,12 @@ export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, classN
 
   const copy = () => {
     if (textAreaRef.current) {
-      navigator.clipboard.writeText(textAreaRef.current.value);
+      if (displayValue) {
+        navigator.clipboard.writeText(value);
+      } else {
+        navigator.clipboard.writeText(textAreaRef.current.value);
+
+      }
       setSuccess(true);
     }
   };
@@ -78,20 +97,24 @@ export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, classN
         disabled={disabled}
         readOnly
         onFocus={onFocus}
-        value={value}
+        value={displayValue ? displayValue : value}
         ref={textAreaRef}
         rows={1}
-        className={[
-          style.inputField,
-          flexibleHeight && style.flexibleHeight,
-          alignLeft && style.alignLeft,
-          alignRight && style.alignRight,
-          borderLess && style.borderLess,
-        ].join(' ')} />
+        className={`${style.inputField || ''}
+          ${flexibleHeight ? style.flexibleHeight || '' : ''}
+          ${alignLeft ? style.alignLeft || '' : ''}
+          ${alignRight ? style.alignRight || '' : ''}
+          ${borderLess ? style.borderLess || '' : ''}
+          ${inputFieldClassName ? inputFieldClassName : ''}
+        `} />
       {disabled ? null : (
         <button
           onClick={copy}
-          className={[style.button, success && style.success, 'ignore'].join(' ')}
+          className={`
+          ${style.button || ''}
+          ${success ? style.success || '' : ''}
+          ${buttonClassName ? buttonClassName : ''}
+           ignore`}
           title={t('button.copy')}>
           {success ? <Check /> : <Copy />}
         </button>

frontends/web/src/components/icon/assets/icons/edit-light.svg

@@ -51,8 +51,6 @@ import coinsSVG from './assets/icons/coins.svg';
 import creditCardDarkSVG from './assets/icons/credit-card.svg';
 import creditCardLightSVG from './assets/icons/credit-card-light.svg';
 import deviceSVG from './assets/icons/device.svg';
-import editSVG from './assets/icons/edit.svg';
-import editLightSVG from './assets/icons/edit-light.svg';
 import editActiveSVG from './assets/icons/edit-active.svg';
 import ejectIconSVG from './assets/icons/eject.svg';
 import ethColorSVG from './assets//eth-color.svg';
@@ -87,8 +85,6 @@ import warningPNG from './assets/icons/warning.png';
 import warningOutlinedSVG from './assets/icons/warning-outlined.svg';
 import qrCodeDarkSVG from './assets/icons/qr-dark.svg';
 import qrCodeLightSVG from './assets/icons/qr-light.svg';
-import saveSVG from './assets/icons/save.svg';
-import saveLightSVG from './assets/icons/save-light.svg';
 import shieldSVG from './assets/icons/shield.svg';
 import shieldGreySVG from './assets/icons/shield-gray.svg';
 import syncSVG from './assets/icons/sync.svg';
@@ -208,8 +204,6 @@ export const Close = (props: ImgProps) => (<img src={closeSVG} draggable={false}
 export const CloseXWhite = (props: ImgProps) => (<img src={closeXWhiteSVG} draggable={false} {...props} />);
 export const CloseXDark = (props: ImgProps) => (<img src={closeXDarkSVG} draggable={false} {...props} />);
 export const Device = (props: ImgProps) => (<img src={deviceSVG} draggable={false} {...props} />);
-export const Edit = (props: ImgProps) => (<img src={editSVG} draggable={false} {...props} />);
-export const EditLight = (props: ImgProps) => (<img src={editLightSVG} draggable={false} {...props} />);
 export const EditActive = (props: ImgProps) => (<img src={editActiveSVG} draggable={false} {...props} />);
 export const Eject = (props: ImgProps) => (<img src={ejectIconSVG} draggable={false} {...props} />);
 export const ETHLogo = (props: ImgProps) => (<img src={ethColorSVG} draggable={false} {...props} />);
@@ -237,8 +231,6 @@ export const WalletConnectDefaultLogo = (props: ImgProps) => (<img src={walletCo
 export const QRCodeDark = (props: ImgProps) => (<img src={qrCodeDarkSVG} draggable={false} {...props} />);
 export const QRCodeLight = (props: ImgProps) => (<img src={qrCodeLightSVG} draggable={false} {...props} />);
 export const RedDot = (props: ImgProps) => (<img src={redDotSVG} draggable={false} {...props} />);
-export const Save = (props: ImgProps) => (<img src={saveSVG} draggable={false} {...props} />);
-export const SaveLight = (props: ImgProps) => (<img src={saveLightSVG} draggable={false} {...props} />);
 export const Shield = (props: ImgProps) => (<img src={shieldSVG} draggable={false} {...props} />);
 export const ShieldGray = (props: ImgProps) => (<img src={shieldGreySVG} draggable={false} {...props} />);
 export const SpinnerRingDark = (props: ImgProps) => (<img src={spinnerRingDarkSVG} draggable={false} {...props} />);