payment-kit 1.13.112 → 1.13.113

package/api/src/libs/notification/template/subscription-trial-will-end.ts

@@ -74,7 +74,7 @@ export class SubscriptionTrailWilEndEmailTemplate
     const productName = await getMainProductName(subscription.id);
     const at: string = formatTime((subscription.trail_end as number) * 1000);
     const willRenewDuration: string =
-      locale === 'en' ? this.getWillRenewDuration(locale) : this.getWillRenewDuration(locale).replaceAll(' ', '');
+      locale === 'en' ? this.getWillRenewDuration(locale) : this.getWillRenewDuration(locale).split(' ').join('');
 
     const userDid = customer.did;
     const paymentDetail: PaymentDetail = await getPaymentDetail(userDid, invoice);

package/api/src/libs/notification/template/subscription-will-renew.ts

@@ -74,7 +74,7 @@ export class SubscriptionWillRenewEmailTemplate
     const productName = await getMainProductName(subscription.id);
     const at: string = formatTime(invoice.period_end * 1000);
     const willRenewDuration: string =
-      locale === 'en' ? this.getWillRenewDuration(locale) : this.getWillRenewDuration(locale).replaceAll(' ', '');
+      locale === 'en' ? this.getWillRenewDuration(locale) : this.getWillRenewDuration(locale).split(' ').join('');
 
     const userDid = customer.did;
     const paymentDetail: PaymentDetail = await getPaymentDetail(userDid, invoice);

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.112
+version: 1.13.113
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.112",
+  "version": "1.13.113",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -50,6 +50,7 @@
     "@arcblock/jwt": "^1.18.108",
     "@arcblock/ux": "^2.9.15",
     "@blocklet/logger": "1.16.23-beta-aeb9f5bd",
+    "@blocklet/payment-react": "1.13.113",
     "@blocklet/sdk": "1.16.23-beta-aeb9f5bd",
     "@blocklet/ui-react": "^2.9.15",
     "@blocklet/uploader": "^0.0.65",
@@ -108,9 +109,8 @@
   },
   "devDependencies": {
     "@abtnode/types": "1.16.23-beta-aeb9f5bd",
-    "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.112",
+    "@blocklet/payment-types": "1.13.113",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -121,7 +121,7 @@
     "@vitejs/plugin-react": "^2.2.0",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "lint-staged": "^12.5.0",
@@ -129,7 +129,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
     "type-fest": "^4.8.3",
     "typescript": "^4.9.5",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "5db3e4ba2c5126a2ff6b8962b58d585b0eb0f01e"
+  "gitHead": "d1a99d9bbdb06d4e7742d7741ec511fa0fee4663"
 }

package/src/components/actions.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { stopEvent } from '@blocklet/payment-react';
 import { ExpandMoreOutlined, MoreHorizOutlined } from '@mui/icons-material';
 import { Button, IconButton, ListItemText, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
-import { stopEvent } from '../libs/util';
-
 type ActionItem = {
   label: string;
   handler: Function;

package/src/components/blockchain/tx.tsx

@@ -1,4 +1,4 @@
-import type { PaymentDetails, TPaymentMethod } from '@did-pay/types';
+import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
 import { joinURL } from 'ufo';

package/src/components/click-boundary.tsx

@@ -1,7 +1,6 @@
+import { stopEvent } from '@blocklet/payment-react';
 import { Box } from '@mui/material';
 
-import { stopEvent } from '../libs/util';
-
 export default function ClickBoundary({ children }: { children: React.ReactNode }) {
   return <Box onClick={stopEvent}>{children}</Box>;
 }

package/src/components/customer/actions.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TCustomerExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import EditCustomer from './edit';

package/src/components/customer/edit.tsx

@@ -1,11 +1,11 @@
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TCustomer } from '@did-pay/types';
+import { isValidCountry } from '@blocklet/payment-react';
+import type { TCustomer } from '@blocklet/payment-types';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { isValidCountry } from '../../libs/util';
 import CustomerForm from './form';
 
 export default function EditCustomer({
@@ -56,7 +56,7 @@ export default function EditCustomer({
       maxWidth="sm"
       onClose={() => onCancel(null)}
       showCloseButton={false}
-      title={t('customer.update')}
+      title={t('payment.customer.update')}
       actions={
         <Stack direction="row">
           <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>

package/src/components/customer/form.tsx

@@ -1,15 +1,13 @@
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput, PhoneInput } from '@blocklet/payment-react';
 import { InputAdornment, Stack, Typography } from '@mui/material';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import { Controller, useFormContext } from 'react-hook-form';
 import { CountrySelector } from 'react-international-phone';
 import isEmail from 'validator/es/lib/isEmail';
 
-import PhoneInput from '../checkout/form/phone';
-import FormInput from '../input';
-
 const phoneUtil = PhoneNumberUtil.getInstance();
 
 export default function CustomerForm() {
@@ -19,17 +17,17 @@ export default function CustomerForm() {
   return (
     <Stack direction="column" spacing={1}>
       <Typography component="h6" sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-        {t('checkout.contact')}
+        {t('payment.checkout.contact')}
       </Typography>
       <FormInput
         name="name"
         variant="outlined"
         errorPosition="right"
         rules={{
-          required: t('checkout.required'),
+          required: t('payment.checkout.required'),
         }}
         InputProps={{
-          startAdornment: <InputAdornment position="start">{t('checkout.customer.name')}</InputAdornment>,
+          startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.name')}</InputAdornment>,
         }}
       />
       <FormInput
@@ -37,11 +35,11 @@ export default function CustomerForm() {
         variant="outlined"
         errorPosition="right"
         rules={{
-          required: t('checkout.required'),
-          validate: (x) => (isEmail(x) ? true : t('checkout.invalid')),
+          required: t('payment.checkout.required'),
+          validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
         }}
         InputProps={{
-          startAdornment: <InputAdornment position="start">{t('checkout.customer.email')}</InputAdornment>,
+          startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.email')}</InputAdornment>,
         }}
       />
       <PhoneInput
@@ -49,23 +47,23 @@ export default function CustomerForm() {
         variant="outlined"
         countryFieldName="address.country"
         errorPosition="right"
-        placeholder={t('checkout.customer.phonePlaceholder')}
+        placeholder={t('payment.checkout.customer.phonePlaceholder')}
         rules={{
-          required: t('checkout.required'),
+          required: t('payment.checkout.required'),
           validate: (x: string) => {
             try {
               const parsed = phoneUtil.parseAndKeepRawInput(x);
-              return phoneUtil.isValidNumber(parsed) ? true : t('checkout.invalid');
+              return phoneUtil.isValidNumber(parsed) ? true : t('payment.checkout.invalid');
             } catch (err) {
               console.error(err, x);
-              return t('checkout.invalid');
+              return t('payment.checkout.invalid');
             }
           },
         }}
       />
 
       <Typography component="h6" sx={{ pt: 2, color: 'text.primary', fontWeight: 600 }}>
-        {t('checkout.billing.required')}
+        {t('payment.checkout.billing.required')}
       </Typography>
       <Controller
         name="address.country"
@@ -82,36 +80,36 @@ export default function CustomerForm() {
         name="address.state"
         variant="outlined"
         errorPosition="right"
-        label={t('checkout.billing.state')}
-        placeholder={t('checkout.billing.state')}
+        label={t('payment.checkout.billing.state')}
+        placeholder={t('payment.checkout.billing.state')}
       />
       <FormInput
         name="address.city"
         variant="outlined"
         errorPosition="right"
-        label={t('checkout.billing.city')}
-        placeholder={t('checkout.billing.city')}
+        label={t('payment.checkout.billing.city')}
+        placeholder={t('payment.checkout.billing.city')}
       />
       <FormInput
         name="address.line1"
         variant="outlined"
         errorPosition="right"
-        label={t('checkout.billing.line1')}
-        placeholder={t('checkout.billing.line1')}
+        label={t('payment.checkout.billing.line1')}
+        placeholder={t('payment.checkout.billing.line1')}
       />
       <FormInput
         name="address.line2"
         variant="outlined"
         errorPosition="right"
-        label={t('checkout.billing.line2')}
-        placeholder={t('checkout.billing.line2')}
+        label={t('payment.checkout.billing.line2')}
+        placeholder={t('payment.checkout.billing.line2')}
       />
       <FormInput
         name="address.postal_code"
         variant="outlined"
         errorPosition="right"
-        label={t('checkout.billing.postal_code')}
-        placeholder={t('checkout.billing.postal_code')}
+        label={t('payment.checkout.billing.postal_code')}
+        placeholder={t('payment.checkout.billing.postal_code')}
       />
     </Stack>
   );

package/src/components/drawer-form.tsx

@@ -1,12 +1,10 @@
+import { Livemode, usePaymentContext } from '@blocklet/payment-react';
 import { Close } from '@mui/icons-material';
 import { Box, Button, Divider, Drawer, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import React, { useState } from 'react';
 import useBus from 'use-bus';
 
-import { useSettingsContext } from '../contexts/settings';
-import Livemode from './livemode';
-
 type Props = {
   icon: React.ReactNode;
   text: string;
@@ -25,7 +23,7 @@ DrawerForm.defaultProps = {
 
 export default function DrawerForm(props: Props) {
   const [open, setOpen] = useState(props.open);
-  const settings = useSettingsContext();
+  const settings = usePaymentContext();
 
   useBus('drawer.submitted', () => setOpen(false), []);
 

package/src/components/event/list.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TEventExpanded } from '@did-pay/types';
+import { api, formatTime } from '@blocklet/payment-react';
+import type { TEventExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import api from '../../libs/api';
-import { formatTime } from '../../libs/util';
 import Table from '../table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TEventExpanded[]; count: number }> => {

package/src/components/invoice/action.tsx

@@ -1,12 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TInvoiceExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

package/src/components/invoice/list.tsx

@@ -1,16 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TInvoiceExpanded } from '@did-pay/types';
+import { Status, api, formatTime } from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import api from '../../libs/api';
-import { formatTime, getInvoiceStatusColor } from '../../libs/util';
-import Status from '../status';
+import { getInvoiceStatusColor } from '../../libs/util';
 import Table from '../table';
 import InvoiceActions from './action';
 

package/src/components/invoice/table.tsx

@@ -1,11 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TInvoiceExpanded } from '@did-pay/types';
+import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
 import { Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { toBN } from '@ocap/util';
 
-import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '../../libs/util';
 import LineItemActions from '../subscription/items/actions';
 
 type Props = {
@@ -51,7 +51,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             {t('common.quantity')}
           </TableCell>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
-            {t('customer.invoice.unitPrice')}
+            {t('payment.customer.invoice.unitPrice')}
           </TableCell>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 100 }} align="right">
             {t('common.amount')}
@@ -84,7 +84,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
                 <Typography>{line.quantity}</Typography>
                 {line.metadata && line.metadata.quantity && (
                   <Tooltip
-                    title={t('customer.invoice.rawQuantity', { quantity: line.metadata.quantity })}
+                    title={t('payment.customer.invoice.rawQuantity', { quantity: line.metadata.quantity })}
                     placement="top">
                     <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
                   </Tooltip>
@@ -125,7 +125,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         {invoice.amount_paid !== '0' && (
           <TableRow>
             <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
-              {t('customer.invoice.amountPaid')}
+              {t('payment.customer.invoice.amountPaid')}
             </TableCell>
             <TableCell align="right" sx={{ fontWeight: 600 }}>
               {invoice.amount_paid === '0' ? '' : '-'}
@@ -137,7 +137,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         {appliedBalance !== '0' && (
           <TableRow>
             <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
-              {t('customer.invoice.amountApplied')}
+              {t('payment.customer.invoice.amountApplied')}
             </TableCell>
             <TableCell align="right" sx={{ fontWeight: 600 }}>
               {formatAmount(appliedBalance, invoice.paymentCurrency.decimal)}
@@ -147,7 +147,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         )}
         <TableRow>
           <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            {t('customer.invoice.amountDue')}
+            {t('payment.customer.invoice.amountDue')}
           </TableCell>
           <TableCell align="right" sx={{ fontWeight: 600 }}>
             {formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal)}

package/src/components/metadata/form.tsx

@@ -1,10 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput } from '@blocklet/payment-react';
 import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
 import { Box, Button, IconButton, Stack, Typography } from '@mui/material';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
-import FormInput from '../input';
-
 export default function MetadataForm({ title, actions }: { title?: string; actions?: React.ReactNode }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
@@ -19,7 +18,7 @@ export default function MetadataForm({ title, actions }: { title?: string; actio
               sx={{ flex: 1 }}
               size="small"
               name={`metadata.${index}.key`}
-              rules={{ required: t('checkout.required') }}
+              rules={{ required: t('payment.checkout.required') }}
               placeholder="Key"
             />
             <FormInput
@@ -27,7 +26,7 @@ export default function MetadataForm({ title, actions }: { title?: string; actio
               size="small"
               name={`metadata.${index}.value`}
               placeholder="Value"
-              rules={{ required: t('checkout.required') }}
+              rules={{ required: t('payment.checkout.required') }}
             />
           </Stack>
           <IconButton size="small" onClick={() => metadata.remove(index)}>

package/src/components/passport/actions.tsx

@@ -1,9 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError } from '@blocklet/payment-react';
 import { useSetState } from 'ahooks';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

package/src/components/passport/assign.tsx

@@ -1,10 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { api } from '@blocklet/payment-react';
 import { Alert, Box, CircularProgress, MenuItem, Select, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 
-import api from '../../libs/api';
 import ConfirmDialog from '../confirm';
 
 const fetchData = (): Promise<any[]> => {

package/src/components/payment-intent/actions.tsx

@@ -1,12 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPaymentIntentExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

package/src/components/payment-intent/list.tsx

@@ -1,16 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPaymentIntentExpanded } from '@did-pay/types';
+import { Status, api, formatTime } from '@blocklet/payment-react';
+import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import api from '../../libs/api';
-import { formatTime, getPaymentIntentStatusColor } from '../../libs/util';
-import Status from '../status';
+import { getPaymentIntentStatusColor } from '../../libs/util';
 import Table from '../table';
 import PaymentIntentActions from './actions';
 

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

@@ -1,13 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPaymentLinkExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import Copy from 'copy-to-clipboard';
 import type { LiteralUnion } from 'type-fest';
 import { joinURL } from 'ufo';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

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

@@ -1,13 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPrice, TProduct, TProductExpanded } from '@did-pay/types';
+import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
 import { Box, Checkbox, FormControlLabel, FormLabel, Stack, TextField, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { useSettingsContext } from '../../contexts/settings';
-import api from '../../libs/api';
-import { formatError, formatPrice } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import InfoCard from '../info-card';
@@ -24,7 +22,7 @@ type Props = {
 export default function LineItem({ prefix, product, valid, onUpdate, onRemove }: Props) {
   const { t } = useLocaleContext();
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const { control, setValue } = useFormContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const adjustable = useWatch({ control, name: getFieldName('adjustable_quantity.enabled') });

package/src/components/payment-link/product-select.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TProductExpanded } from '@did-pay/types';
+import { formatPrice, getPriceCurrencyOptions, usePaymentContext } from '@blocklet/payment-react';
+import type { TProductExpanded } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Avatar, Box, ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
 import cloneDeep from 'lodash/cloneDeep';
@@ -7,8 +8,6 @@ import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
 import { useProductsContext } from '../../contexts/products';
-import { useSettingsContext } from '../../contexts/settings';
-import { formatPrice, getPriceCurrencyOptions } from '../../libs/util';
 
 type Props = {
   mode: LiteralUnion<'waiting' | 'selecting', string>;
@@ -29,7 +28,7 @@ const filterProducts = (products: TProductExpanded[], hasSelected: (price: any)
 export default function ProductSelect({ mode: initialMode, hasSelected, onSelect }: Props) {
   const { t } = useLocaleContext();
   const { products } = useProductsContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
   const handleSelect = (e: any) => {

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

@@ -1,12 +1,11 @@
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPaymentLink } from '@did-pay/types';
+import { FormInput } from '@blocklet/payment-react';
+import type { TPaymentLink } from '@blocklet/payment-types';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import TextInput from '../input';
-
 export default function RenamePaymentLink({
   data,
   loading,
@@ -54,7 +53,7 @@ export default function RenamePaymentLink({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <TextInput
+        <FormInput
           name="name"
           rules={{ required: true }}
           label={t('admin.paymentLink.name.label')}

package/src/components/payment-method/arcblock.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function ArcBlockMethodForm() {
   const { t } = useLocaleContext();

package/src/components/payment-method/bitcoin.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function BitcoinMethodForm() {
   const { t } = useLocaleContext();

package/src/components/payment-method/ethereum.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function EthereumMethodForm() {
   const { t } = useLocaleContext();