payment-kit 1.18.37 → 1.18.39

package/src/components/payment-link/preview.tsx

@@ -1,9 +1,11 @@
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
+import { useTheme } from '@mui/material';
 import Chrome from './chrome';
 
 const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+  const theme = useTheme();
   const innerRef = useRef(null);
   const size = useSize(innerRef);
   const scale = (size?.width || 0) / 1280;
@@ -18,7 +20,7 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
   return (
     <div ref={innerRef}>
       {fullscreen ? (
-        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
+        <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
             src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}

package/src/components/price/currency-select.tsx

@@ -67,7 +67,7 @@ export default function CurrencySelect({
         }}
         sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
         {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
-        {canSelect && <ArrowDropDown sx={{ color: 'rgba(0, 0, 0, 0.54)', fontSize: 21 }} />}
+        {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
   }

package/src/components/pricing-table/payment-settings.tsx

@@ -227,7 +227,7 @@ export function ProductPaymentSettings({ product, prices }: { product: TProduct;
   });
 
   return (
-    <Box sx={{ px: 2, py: 0, border: '1px solid #eee', borderRadius: 2 }}>
+    <Box sx={{ px: 2, py: 0, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
       <IconCollapse
         key={product.id}
         expanded

package/src/components/pricing-table/preview.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
+import { useTheme } from '@mui/material';
 import Chrome from '../payment-link/chrome';
 
 const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
   const innerRef = useRef(null);
   const size = useSize(innerRef);
+  const theme = useTheme();
   const scale = (size?.width || 0) / 1280;
   const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
 
@@ -18,7 +20,7 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
   return (
     <div ref={innerRef}>
       {fullscreen ? (
-        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
+        <div style={{ width: '100%', height: '100%', background: theme.palette.background.paper || '#fff' }}>
           <IframeResizer
             style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
             src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}

package/src/components/pricing-table/product-item.tsx

@@ -46,7 +46,7 @@ export default function ProductItem({ product, prices, valid, onUpdate, onRemove
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? '#eee' : 'error.main',
+        borderColor: valid ? 'grey.100' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>

package/src/components/subscription/portal/actions.tsx

@@ -10,15 +10,18 @@ import {
   getSubscriptionAction,
   usePaymentContext,
   OverdueInvoicePayment,
+  formatBNStr,
 } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Button, Link, Stack, Tooltip } from '@mui/material';
+import { Button, Link, Stack, Tooltip, Typography, Box, Alert } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, ReactNode } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
+import { BN } from '@ocap/util';
+import DID from '@arcblock/ux/lib/DID';
 import CustomerCancelForm from './cancel';
 import OverdraftProtectionDialog from '../../customer/overdraft-protection';
 import Actions from '../../actions';
@@ -28,7 +31,7 @@ import { isWillCanceled } from '../../../libs/util';
 interface ActionConfig {
   key: string;
   show: boolean;
-  label: string;
+  label: string | ReactNode | (() => ReactNode);
   tooltip?: string;
   onClick: (e?: React.MouseEvent) => void;
   variant?: 'text' | 'outlined' | 'contained';
@@ -65,6 +68,7 @@ type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
   showRecharge?: boolean;
+  showBalanceInfo?: boolean;
   showOverdraftProtection?:
     | boolean
     | {
@@ -82,6 +86,7 @@ type Props = {
 SubscriptionActions.defaultProps = {
   showExtra: false,
   showRecharge: false,
+  showBalanceInfo: false,
   showOverdraftProtection: false,
   showDelegation: false,
   onChange: null,
@@ -138,6 +143,7 @@ export function SubscriptionActionsInner({
   actionProps,
   mode,
   setUp,
+  showBalanceInfo,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -149,6 +155,23 @@ export function SubscriptionActionsInner({
 
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
+  const { data: upcoming = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/upcoming`).then((res) => res.data),
+    {
+      ready: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const { data: payerValue = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/payer-token`).then((res) => res.data),
+    {
+      ready: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const isInsufficientBalance =
+    upcoming?.amount && payerValue?.token && new BN(payerValue.token || '0').lt(new BN(upcoming.amount || '0'));
+
   const [state, setState] = useSetState({
     action: '',
     subscription: '',
@@ -359,7 +382,73 @@ export function SubscriptionActionsInner({
       {
         key: 'recharge',
         show: !!(showRecharge && supportRecharge(subscription)),
-        label: t('customer.recharge.title'),
+        label: () => {
+          const balanceDisplay = (
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              {t('customer.recharge.title')}
+            </Stack>
+          );
+
+          if (showBalanceInfo && subscription.paymentCurrency) {
+            const formattedBalance = formatBNStr(payerValue?.token || '0', subscription.paymentCurrency.decimal);
+            const formattedUpcoming = formatBNStr(upcoming?.amount || '0', subscription.paymentCurrency.decimal);
+
+            return (
+              <Tooltip
+                componentsProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      color: 'text.primary',
+                      boxShadow: 2,
+                      padding: '10px 16px',
+                      maxWidth: 480,
+                      minWidth: 350,
+                      wordBreak: 'break-word',
+                    },
+                  },
+                }}
+                title={
+                  <Box>
+                    {isInsufficientBalance && (
+                      <Alert severity="error" sx={{ py: 0, mb: 1 }}>
+                        {t('admin.subscription.insufficientBalance')}
+                      </Alert>
+                    )}
+                    <Stack spacing={0.5}>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.currentBalance')}
+                        </Typography>
+                        <Typography>
+                          {formattedBalance} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.nextInvoiceAmount')}
+                        </Typography>
+                        <Typography>
+                          {formattedUpcoming} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.paymentAddress')}
+                        </Typography>
+                        <DID did={payerValue?.paymentAddress} responsive={false} compact showAvatar={false} />
+                      </Box>
+                    </Stack>
+                  </Box>
+                }
+                placement="top">
+                {balanceDisplay}
+              </Tooltip>
+            );
+          }
+
+          return balanceDisplay;
+        },
         onClick: (e) => {
           e?.stopPropagation();
           navigate(`/customer/subscription/${subscription.id}/recharge`);
@@ -367,6 +456,22 @@ export function SubscriptionActionsInner({
         variant: 'outlined',
         color: 'primary',
         primary: !isWillCanceled(subscription),
+        sx:
+          isInsufficientBalance || payerValue.token === '0'
+            ? {
+                '&::before': {
+                  content: '""',
+                  backgroundColor: 'error.main',
+                  borderRadius: '50%',
+                  position: 'absolute',
+                  top: '-4px',
+                  right: '-4px',
+                  width: '8px',
+                  height: '8px',
+                  zIndex: 1,
+                },
+              }
+            : {},
       },
       {
         key: 'changePlan',
@@ -442,26 +547,30 @@ export function SubscriptionActionsInner({
       divider: item.divider,
     });
 
-    const toButton = (item: ActionConfig) => (
-      <Button
-        key={item.key}
-        variant={item.variant}
-        color={item.color}
-        onClick={item.onClick}
-        component={item.component}
-        href={item.href}
-        target={item.target}
-        sx={item.sx}
-        size="small">
-        {item.tooltip ? (
-          <Tooltip title={item.tooltip}>
-            <span>{item.label}</span>
-          </Tooltip>
-        ) : (
-          item.label
-        )}
-      </Button>
-    );
+    const toButton = (item: ActionConfig) => {
+      const labelContent = typeof item.label === 'function' ? item.label() : item.label;
+
+      return (
+        <Button
+          key={item.key}
+          variant={item.variant}
+          color={item.color}
+          onClick={item.onClick}
+          component={item.component}
+          href={item.href}
+          target={item.target}
+          sx={item.sx}
+          size="small">
+          {item.tooltip ? (
+            <Tooltip title={item.tooltip}>
+              <span>{labelContent}</span>
+            </Tooltip>
+          ) : (
+            labelContent
+          )}
+        </Button>
+      );
+    };
     if (mode === 'menu-only') {
       return <Actions actions={visibleActions.map(toMenuItem)} variant="outlined" />;
     }
@@ -566,6 +675,7 @@ SubscriptionActionsInner.defaultProps = {
   showExtra: false,
   showRecharge: false,
   showOverdraftProtection: false,
+  showBalanceInfo: false,
   showDelegation: false,
   showUnsubscribe: true,
   onChange: null,

package/src/components/subscription/portal/list.tsx

@@ -120,9 +120,9 @@ export default function CurrentSubscriptions({
                   }}
                   sx={{
                     padding: 1.5,
-                    background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
+                    backgroundColor: 'grey.50',
                     '&:hover': {
-                      backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      backgroundColor: 'grey.100',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },
@@ -216,6 +216,7 @@ export default function CurrentSubscriptions({
                         }}
                         showUnsubscribe={false}
                         showRecharge={!isWillCanceled(subscription)}
+                        showBalanceInfo
                         actionProps={{
                           cancel: {
                             variant: 'outlined',

package/src/components/uploader.tsx

@@ -157,7 +157,8 @@ Uploader.defaultProps = {
 };
 
 const Div = styled(Box)`
-  border: 1px solid var(--stroke-border-base, #eff1f5);
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 4px;
   cursor: pointer;
   width: 120px;

package/src/components/webhook/attempts.tsx

@@ -135,7 +135,7 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
       </Grid>
       <Grid item xs={12} md={8}>
         {selected && (
-          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid #eee' }}>
+          <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
             <Box>
               <Typography variant="h6">Response ({selected.response_status})</Typography>

package/src/global.css

@@ -12,7 +12,6 @@ a:has(> div) {
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.3125rem;
-  border-color: #ccc;
 }
 
 .MuiTab-root {
@@ -28,17 +27,12 @@ a:has(> div) {
   margin-bottom: 8px;
 }
 
-.MuiTabs-scroller {
-  border-bottom: 1px solid #eee;
-}
-
 .MuiCheckbox-root {
   padding: 0;
   padding-right: 4px;
 }
 
 .MuiFormLabel-root {
-  color: var(--foregrounds-fg-base, #010714);
   display: block;
   margin-bottom: 4px;
   font-weight: 500;
@@ -71,7 +65,6 @@ th.MuiTableCell-head {
   padding-top: 16px;
 }
 
-
 .MuiFormHelperText-root {
   margin-left: 0;
 }

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -63,7 +63,7 @@ export default function WebhookDetail(props: { id: string }) {
             spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid', borderColor: 'grey.100' }}>
             <InfoMetric
               label={t('common.status')}
               value={<Status label={data.status} color={getWebhookStatusColor(data.status)} />}
@@ -83,7 +83,7 @@ export default function WebhookDetail(props: { id: string }) {
                       ))}
                     </ul>
                   }>
-                  <Typography sx={{ backgroundColor: '#eee', paddingX: 0.5, borderRadius: 0.5 }}>
+                  <Typography sx={{ backgroundColor: 'grey.100', paddingX: 0.5, borderRadius: 0.5 }}>
                     {data.enabled_events.length} events
                   </Typography>
                 </Tooltip>

package/src/pages/admin/index.tsx

@@ -34,7 +34,7 @@ const renderNav = (group: string, onChange: Function, groups: { label: string; v
         fontWeight: 600,
         border: 'none',
         cursor: 'pointer',
-        '&:hover': group === x.value ? {} : { backgroundColor: '#eee' },
+        '&:hover': group === x.value ? {} : { backgroundColor: 'grey.100' },
       }}
     />
   ));
@@ -93,7 +93,7 @@ function Admin() {
               fontWeight: '500',
               color: 'text.lighter',
               '&.Mui-selected': {
-                color: 'text.primary',
+                color: 'primary.main',
               },
             },
             '.MuiTouchRipple-root': {

package/src/pages/admin/overview.tsx

@@ -284,7 +284,7 @@ export default function Overview() {
                       position: 'relative',
                       '&:hover': {
                         backgroundColor: 'action.hover',
-                        boxShadow: 1,
+                        boxShadow: 2,
                         '& .MuiSvgIcon-root': {
                           opacity: 1,
                           transform: 'translateX(0)',

package/src/pages/admin/payments/intents/detail.tsx

@@ -137,10 +137,13 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
-                sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
+                <Amount
+                  amount={data?.amount_received === '0' ? total : received}
+                  sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }}
+                />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

package/src/pages/admin/payments/payouts/detail.tsx

@@ -160,7 +160,7 @@ export default function PayoutDetail(props: { id: string }) {
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
-                  sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                  sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/admin/payments/refunds/detail.tsx

@@ -135,7 +135,7 @@ export default function RefundDetail(props: { id: string }) {
                 src={data.paymentCurrency.logo}
                 alt={data.paymentCurrency.symbol}
                 variant="square"
-                sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                 <Amount amount={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />

package/src/pages/admin/products/prices/list.tsx

@@ -10,7 +10,7 @@ import {
   findCurrency,
 } from '@blocklet/payment-react';
 import { LockOutlined } from '@mui/icons-material';
-import { Stack, Tooltip, Typography } from '@mui/material';
+import { Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
@@ -20,6 +20,7 @@ import PriceActions from './actions';
 export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
+  const theme = useTheme();
   const query = getQueryParams(window.location.href);
 
   const columns = [
@@ -35,6 +36,7 @@ export default function PricesList({ product, onChange }: { product: Product; on
           const priceCurrency = showHighlight
             ? findCurrency(settings.paymentMethods, query.currency_id || '')
             : price.currency;
+          const highlightColor = theme.mode === 'dark' ? '#2e3035' : '#FFF9C4';
           return (
             <Link to={`/admin/products/${price.id}`} color="text.primary">
               <Stack direction="row" alignItems="center" spacing={1}>
@@ -45,7 +47,10 @@ export default function PricesList({ product, onChange }: { product: Product; on
                 )}
                 <Typography
                   component="span"
-                  sx={{ backgroundColor: showHighlight ? '#FFF9C4' : 'transparent', whiteSpace: 'nowrap' }}>
+                  sx={{
+                    backgroundColor: showHighlight ? highlightColor : 'transparent',
+                    whiteSpace: 'nowrap',
+                  }}>
                   {formatPrice(price, priceCurrency || price.currency, '', 1, true, locale)}
                 </Typography>
                 <Typography component="span">

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -122,7 +122,7 @@ export default function CreatePricingTable() {
       <FormProvider {...methods}>
         <ProductsProvider>
           <Stack height="92vh" spacing={2} direction="row">
-            <Box flex={2} sx={{ borderRight: '1px solid #eee' }} position="relative">
+            <Box flex={2} sx={{ borderRight: '1px solid', borderColor: 'grey.100' }} position="relative">
               <Stack height="100%" spacing={2}>
                 <Box overflow="auto" sx={{ pr: 2, pb: 8 }}>
                   {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
@@ -137,7 +137,7 @@ export default function CreatePricingTable() {
                   alignItems="center"
                   justifyContent="flex-end"
                   position="absolute"
-                  sx={{ borderTop: '1px solid #eee', left: 0, bottom: 0 }}>
+                  sx={{ borderTop: '1px solid', borderColor: 'grey.100', left: 0, bottom: 0 }}>
                   <Button variant="text" color="inherit" disabled={step === 0} onClick={onPrevious}>
                     {t('common.previous')}
                   </Button>

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -30,6 +30,7 @@ import {
   TextField,
   Tooltip,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useRequest, useSessionStorageState, useSetState } from 'ahooks';
 import useBus from 'use-bus';
@@ -308,8 +309,9 @@ function PaymentMethodSkeleton() {
           <Box
             sx={{
               py: 1,
-              borderTop: '1px solid #eee',
-              borderBottom: '1px solid #eee',
+              borderTop: '1px solid',
+              borderBottom: '1px solid',
+              borderColor: 'divider',
               mb: 1,
             }}>
             <Stack direction="row" justifyContent="space-between" alignItems="center">
@@ -330,6 +332,7 @@ function PaymentMethodSkeleton() {
 
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
+  const { palette } = useTheme();
   const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
     defaultValue: '',
   });
@@ -442,8 +445,8 @@ export default function PaymentMethods() {
               }
               style={{
                 py: 1,
-                borderTop: '1px solid #eee',
-                borderBottom: '1px solid #eee',
+                borderTop: `1px solid ${palette.divider}`,
+                borderBottom: `1px solid ${palette.divider}`,
                 '& :hover': { color: 'text.primary' },
               }}
               value={method.id}

package/src/pages/admin/settings/vault-config/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, ConfirmDialog, formatBNStr, Link, parseMarkedText, Table, useMobile } from '@blocklet/payment-react';
-import { Alert, Avatar, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { Alert, Avatar, Box, Button, CircularProgress, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import Empty from '@arcblock/ux/lib/Empty';
 import { HelpOutline } from '@mui/icons-material';
@@ -31,6 +31,7 @@ export default function VaultConfig() {
   const { t } = useLocaleContext();
   const { session } = useSessionContext();
   const { isMobile } = useMobile();
+  const theme = useTheme();
   const isOwner = session?.user?.role === 'owner';
 
   const [state, setState] = useSetState({
@@ -324,7 +325,7 @@ export default function VaultConfig() {
               <Link
                 key={part.content}
                 to={`${window.location.origin}/.well-known/service/admin/operations/advanced`}
-                style={{ color: '#3b82f6' }}>
+                style={{ color: theme.palette.text.link }}>
                 {part.content}
               </Link>
             )

package/src/pages/checkout/pricing-table.tsx

@@ -26,7 +26,7 @@ export default function PricingTablePage({ id }: Props) {
         theme={undefined}
         hideNavMenu={undefined}
         maxWidth={false}
-        sx={{ borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)' }}
+        sx={{ borderBottom: '1px solid', borderColor: 'grey.100' }}
       />
 
       <Stack

package/src/pages/customer/index.tsx

@@ -233,7 +233,7 @@ const getCardIcon = (type: CardType) => {
     balance: <AccountBalanceWalletOutlined color="success" fontSize="small" />,
     spent: <CreditCardOutlined color="warning" fontSize="small" />,
     stake: <AccountBalanceOutlined fontSize="small" color="info" />,
-    refund: <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />,
+    refund: <AssignmentReturnOutlined fontSize="small" sx={{ color: 'chip.secondary.text' }} />,
     due: <InfoOutlined fontSize="small" color="error" />,
   };
   return iconMap[type];
@@ -419,7 +419,8 @@ export default function CustomerHome() {
                   key={c.id}
                   sx={{
                     pb: 2,
-                    borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)',
+                    borderBottom: '1px solid',
+                    borderColor: 'grey.100',
                     '&:last-child': { borderBottom: 'none', pb: 0 },
                   }}>
                   <Box alignItems="center" display="flex" gap={1}>
@@ -478,7 +479,7 @@ export default function CustomerHome() {
                               top: 0,
                               bottom: 0,
                               width: '1px',
-                              backgroundColor: 'var(--stroke-border-base, #EFF1F5)',
+                              backgroundColor: 'grey.100',
                               zIndex: 1,
                             },
                             '&:has(+ .placeholder)::after': {

package/src/pages/customer/invoice/detail.tsx

@@ -155,7 +155,7 @@ export default function CustomerInvoiceDetail() {
               variant="outlined"
               color="primary"
               size="small"
-              sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}
+              sx={{ borderColor: 'grey.100' }}
               disabled={state.paying}
               onClick={onPay}>
               {t('payment.customer.invoice.pay')}

package/src/pages/customer/payout/detail.tsx

@@ -113,7 +113,7 @@ export default function PayoutDetail() {
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
-                  sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                  sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />