Merge pull request #81 from 0xbow-io/release/v1.3.0

Release v1.3.0

Author: ameensol

CHANGELOG.md

@@ -5,6 +5,33 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2025-07-19
+
+### Added
+
+- DAI pool support
+- Withdrawal fees breakdown
+
+## [1.2.0] - 2025-07-18
+
+### Added
+
+- sUSDS pool support
+- handling relayer fees processing
+
+### Changed 
+
+- changed withdrawal modal steps
+
+## [1.1.0] - 2025-07-16
+
+### Added
+
+- USDS pool support
+
+### Changed
+
+- Relayer quotation logic
 
 ## [1.2.0] - 2025-07-18
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "privacy-pools-website",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "license": "MIT",
   "author": "Wonderland",

src/assets/icons/dai.svg

@@ -15,6 +15,7 @@ const ALL_TOKEN_OPTIONS: Option[] = [
   { value: 'ETH', label: 'ETH' },
   { value: 'USDS', label: 'USDS' },
   { value: 'sUSDS', label: 'sUSDS' },
+  { value: 'DAI', label: 'DAI' },
   { value: 'USDT', label: 'USDT' },
   { value: 'USDC', label: 'USDC' },
 ];

src/components/AssetSelect.tsx

@@ -1,6 +1,7 @@
 import { Address, parseEther, parseUnits } from 'viem';
 import { Chain, mainnet, sepolia } from 'viem/chains';
 import { getEnv } from '~/config/env';
+import daiIcon from '~/assets/icons/dai.svg';
 import mainnetIcon from '~/assets/icons/mainnet_color.svg';
 import susdsIcon from '~/assets/icons/susds.svg';
 import usdsIcon from '~/assets/icons/usds.svg';
@@ -13,7 +14,7 @@ const testnetChains: readonly [Chain, ...Chain[]] = [sepolia];
 
 export const whitelistedChains = IS_TESTNET ? testnetChains : mainnetChains;
 
-export type ChainAssets = 'ETH' | 'USDS' | 'sUSDS' | 'USDC' | 'USDT';
+export type ChainAssets = 'ETH' | 'USDS' | 'sUSDS' | 'DAI' | 'USDC' | 'USDT';
 
 export interface PoolInfo {
   chainId: number;
@@ -95,6 +96,18 @@ const mainnetChainData: ChainData = {
         assetDecimals: 18,
         icon: susdsIcon.src,
       },
+      {
+        chainId: mainnet.id,
+        address: '0x1c31C03B8CB2EE674D0F11De77135536db828257',
+        assetAddress: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
+        scope: 15036211945525489305347805074288289358577232744970551616130812771908439733411n,
+        deploymentBlock: 22946646n,
+        entryPointAddress: '0x6818809EefCe719E480a7526D76bD3e561526b46',
+        maxDeposit: parseUnits('1000000', 18),
+        asset: 'DAI',
+        assetDecimals: 18,
+        icon: daiIcon.src,
+      },
     ],
   },
 };

src/config/chainData.ts

@@ -1,9 +1,11 @@
 'use client';
-import { useEffect } from 'react';
-import { Stack, styled, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { Stack, styled, Typography, IconButton, Collapse } from '@mui/material';
 import { formatUnits, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import { ExtendedTooltip as Tooltip } from '~/components';
+import { useQuoteContext } from '~/contexts/QuoteContext';
 import {
   useExternalServices,
   usePoolAccountsContext,
@@ -13,9 +15,12 @@ import {
 } from '~/hooks';
 import { EventType } from '~/types';
 import { getUsdBalance, truncateAddress } from '~/utils';
+import { FeeBreakdown } from './FeeBreakdown';
 
 export const DataSection = () => {
   const { address } = useAccount();
+  const [isFeeBreakdownOpen, setIsFeeBreakdownOpen] = useState(false);
+  const { quoteState } = useQuoteContext();
   const {
     balanceBN: { symbol, decimals },
     price,
@@ -44,6 +49,8 @@ export const DataSection = () => {
     isQuoteValid,
     isExpired,
     feeBPS: quoteFeesBPS,
+    baseFeeBPS: quoteBaseFeeBPS,
+    extraGasAmountETH: quoteExtraGasAmountETH,
     quoteCommitment,
   } = useRequestQuote({
     getQuote: getQuote || (() => Promise.reject(new Error('No relayer data'))),
@@ -80,9 +87,6 @@ export const DataSection = () => {
   const relayerFees = (BigInt(effectiveFeeBPS) * parseUnits(amount, decimals)) / 100n / 100n;
 
   const fees = isDeposit ? aspDataFees : relayerFees;
-  const feeFormatted = formatUnits(fees, decimals);
-  const feeUSD = getUsdBalance(price, feeFormatted, decimals);
-  const feeText = `${feeFormatted} ${symbol} (~ ${feeUSD} USD)`;
 
   // Create full precision tooltips - show complete decimal precision
   const formatFullPrecision = (value: bigint, decimals: number) => {
@@ -92,25 +96,53 @@ export const DataSection = () => {
     }
     const integerPart = valueStr.slice(0, -decimals);
     const decimalPart = valueStr.slice(-decimals);
-    return `${integerPart}.${decimalPart}`;
-  };
+    const result = `${integerPart}.${decimalPart}`;
+
+    // Remove trailing zeros, but keep at least 2 decimal places
+    const trimmed = result.replace(/\.?0+$/, '');
+    if (!trimmed.includes('.')) {
+      return `${trimmed}.00`;
+    }
+    const decimalIndex = trimmed.indexOf('.');
+    const currentDecimals = trimmed.length - decimalIndex - 1;
+    if (currentDecimals < 2) {
+      return trimmed + '0'.repeat(2 - currentDecimals);
+    }
 
-  const feeTooltip = `${formatFullPrecision(fees, decimals)} ${symbol}`;
+    return trimmed;
+  };
 
   const feesCollectorAddress = isDeposit
     ? selectedPoolInfo.entryPointAddress
     : currentSelectedRelayerData?.relayerAddress;
   const feesCollector = `OxBow (${truncateAddress(feesCollectorAddress)})`;
 
   const amountUSD = getUsdBalance(price, amount, decimals);
+
+  // Value is now the actual amount being withdrawn (amount minus fees)
   const amountWithFeeBN = parseUnits(amount, decimals) - fees;
   const amountWithFee = formatUnits(amountWithFeeBN, decimals);
   const amountWithFeeUSD = getUsdBalance(price, amountWithFee, decimals);
-
-  const valueText = `${amountWithFee} ${symbol} (~ ${amountWithFeeUSD} USD)`;
+  const valueText = `${parseFloat(amountWithFee).toString()} ${symbol} (~$${parseFloat(amountWithFeeUSD.replace('$', '')).toFixed(2)} USD)`;
   const valueTooltip = `${formatFullPrecision(amountWithFeeBN, decimals)} ${symbol}`;
 
-  const totalText = `~${amount.slice(0, 6)} ${symbol} (~ ${amountUSD} USD)`;
+  // Net Fee calculation (includes extra gas amount if enabled)
+  let netFeeAmount = fees;
+  if (quoteState.extraGas && quoteExtraGasAmountETH) {
+    // Convert extraGasAmountETH from wei to token amount
+    const extraGasETH = parseFloat(formatUnits(BigInt(quoteExtraGasAmountETH), 18));
+    const extraGasInToken = (extraGasETH * price) / parseFloat(formatUnits(parseUnits('1', decimals), decimals));
+
+    // Convert to fixed decimal string to avoid scientific notation
+    const extraGasAmountBN = parseUnits(extraGasInToken.toFixed(decimals), decimals);
+    netFeeAmount = fees + extraGasAmountBN;
+  }
+  const netFeeFormatted = formatUnits(netFeeAmount, decimals);
+  const netFeeUSD = getUsdBalance(price, netFeeFormatted, decimals);
+  const netFeeText = `${parseFloat(netFeeFormatted).toString()} ${symbol} (~$${parseFloat(netFeeUSD.replace('$', '')).toFixed(2)} USD)`;
+  const netFeeTooltip = `${formatFullPrecision(netFeeAmount, decimals)} ${symbol}`;
+
+  const totalText = `~${amount.slice(0, 6)} ${symbol} (~$${parseFloat(amountUSD.replace('$', '')).toFixed(2)} USD)`;
   const totalAmountBN = parseUnits(amount, decimals);
   const totalTooltip = `${formatFullPrecision(totalAmountBN, decimals)} ${symbol}`;
 
@@ -157,12 +189,6 @@ export const DataSection = () => {
               <Value variant='body2'>{feesCollector}</Value>
             </Tooltip>
           </Row>
-          <Row>
-            <Label variant='body2'>Fees:</Label>
-            <Tooltip title={feeTooltip} placement='top'>
-              <Value variant='body2'>{feeText}</Value>
-            </Tooltip>
-          </Row>
           {actionType === EventType.WITHDRAWAL && (isQuoteValid || isExpired) && (
             <Row>
               <Label variant='body2'>Quote expires:</Label>
@@ -179,6 +205,40 @@ export const DataSection = () => {
               <Value variant='body2'>{valueText}</Value>
             </Tooltip>
           </Row>
+
+          {/* Net Fee row with dropdown for withdrawals */}
+          {actionType === EventType.WITHDRAWAL && isQuoteValid && quoteFeesBPS !== null && quoteBaseFeeBPS !== null && (
+            <>
+              <Row>
+                <Label variant='body2'>Net Fee:</Label>
+                <FeeRow>
+                  <Tooltip title={netFeeTooltip} placement='top'>
+                    <NetFeeValue isExtraGasEnabled={quoteState.extraGas} variant='body2'>
+                      {netFeeText}
+                    </NetFeeValue>
+                  </Tooltip>
+                  <ExpandIconButton
+                    onClick={() => setIsFeeBreakdownOpen(!isFeeBreakdownOpen)}
+                    expanded={isFeeBreakdownOpen}
+                  >
+                    <ExpandMoreIcon />
+                  </ExpandIconButton>
+                </FeeRow>
+              </Row>
+
+              {/* Collapsible Fee Breakdown */}
+              <Collapse in={isFeeBreakdownOpen}>
+                <FeeBreakdownContainer>
+                  <FeeBreakdown
+                    feeBPS={quoteFeesBPS}
+                    baseFeeBPS={quoteBaseFeeBPS}
+                    extraGasAmountETH={quoteExtraGasAmountETH}
+                    amount={amount}
+                  />
+                </FeeBreakdownContainer>
+              </Collapse>
+            </>
+          )}
         </Stack>
       )}
 
@@ -260,3 +320,36 @@ const FlashingExpiredTimer = styled(Value)(({ theme }) => ({
     },
   },
 }));
+
+const FeeRow = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+const NetFeeValue = styled(Value, {
+  shouldForwardProp: (prop) => prop !== 'isExtraGasEnabled',
+})<{ isExtraGasEnabled?: boolean }>(({ theme, isExtraGasEnabled }) => ({
+  color: isExtraGasEnabled ? theme.palette.success.main : theme.palette.text.primary,
+  fontWeight: isExtraGasEnabled ? 600 : 400,
+}));
+
+const ExpandIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'expanded',
+})<{ expanded?: boolean }>(({ theme, expanded }) => ({
+  padding: '2px',
+  minWidth: '24px',
+  minHeight: '24px',
+  transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+  '& .MuiSvgIcon-root': {
+    fontSize: '18px',
+  },
+}));
+
+const FeeBreakdownContainer = styled('div')({
+  marginTop: '8px',
+  marginLeft: '16px',
+});