payment-kit 1.17.6 → 1.17.8

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.17.6
+version: 1.17.8
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.6",
+  "version": "1.17.8",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.19.3",
     "@blocklet/js-sdk": "^1.16.37",
     "@blocklet/logger": "^1.16.37",
-    "@blocklet/payment-react": "1.17.6",
+    "@blocklet/payment-react": "1.17.8",
     "@blocklet/sdk": "^1.16.37",
     "@blocklet/ui-react": "^2.11.27",
     "@blocklet/uploader": "^0.1.64",
@@ -115,12 +115,13 @@
     "ufo": "^1.5.4",
     "umzug": "^3.8.1",
     "use-bus": "^2.5.2",
-    "validator": "^13.12.0"
+    "validator": "^13.12.0",
+    "web3": "^4.16.0"
   },
   "devDependencies": {
     "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.6",
+    "@blocklet/payment-types": "1.17.8",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "50e93ab4340be53c9d9bd18718c6db26048578c5"
+  "gitHead": "3a896417b3beb364f8c986ea0b5b968810da9ef7"
 }

package/src/components/collapse.tsx

@@ -1,28 +1,49 @@
 import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
 import { Box, Collapse, Stack } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type Props = {
-  trigger: string | Function | React.ReactNode;
-  children: React.ReactNode;
+  trigger: string | ((expanded: boolean) => React.ReactNode) | React.ReactNode;
+  children?: React.ReactNode;
   expanded?: boolean;
   addons?: React.ReactNode;
   style?: Record<string, any>;
+  value?: string;
+  onChange?: (value: string, expanded: boolean) => void;
+  lazy?: boolean;
+};
+
+IconCollapse.defaultProps = {
+  value: '',
+  onChange: () => {},
+  children: null,
+  expanded: false,
+  addons: null,
+  style: {},
+  lazy: true,
 };
 
 export default function IconCollapse(props: Props) {
   const [expanded, setExpanded] = useState(props.expanded || false);
   const toggleExpanded = () => {
-    setExpanded((prev) => !prev);
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
   };
 
+  useEffect(() => {
+    setExpanded(props.expanded || false);
+  }, [props.expanded]);
+
   return (
     <>
       <Stack
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        onClick={toggleExpanded}
+        onClick={() => {
+          props.onChange?.(props.value || '', !expanded);
+          toggleExpanded();
+        }}
         sx={{
           width: 1,
           cursor: 'pointer',
@@ -31,20 +52,12 @@ export default function IconCollapse(props: Props) {
           '& :hover': { color: 'primary.main' },
           ...props.style,
         }}>
-        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger} </Box>
+        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger}</Box>
         <Stack direction="row" alignItems="center" spacing={2}>
           {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
         </Stack>
       </Stack>
-      <Collapse in={expanded}>
-        <Box>{props.children}</Box>
-      </Collapse>
+      <Collapse in={expanded}>{expanded || props.lazy ? props.children : null}</Collapse>
     </>
   );
 }
-
-IconCollapse.defaultProps = {
-  expanded: false,
-  addons: null,
-  style: {},
-};

package/src/components/customer/edit.tsx

@@ -62,12 +62,7 @@ export default function EditCustomer({
       hideLiveMode
       onClose={onCancel}
       footer={
-        <Button
-          variant="contained"
-          color="primary"
-          disabled={loading}
-          onClick={onSubmit}
-          sx={{ width: '100%', mt: 2.5 }}>
+        <Button variant="contained" color="primary" disabled={loading} onClick={onSubmit} sx={{ width: '100%' }}>
           {loading && <CircularProgress size="small" />} {t('common.save')}
         </Button>
       }>

package/src/components/drawer-form.tsx

@@ -9,7 +9,7 @@ import useBus from 'use-bus';
 type Props = {
   icon: React.ReactNode;
   text: string;
-  addons: React.ReactNode;
+  addons?: React.ReactNode;
   children: React.ReactNode;
   width?: number;
   open?: boolean;
@@ -26,6 +26,7 @@ DrawerForm.defaultProps = {
   onClose: noop,
   hideLiveMode: false,
   footer: null,
+  addons: null,
 };
 
 export default function DrawerForm(props: Props) {
@@ -60,26 +61,52 @@ export default function DrawerForm(props: Props) {
           alignItems="center"
           justifyContent="space-between"
           className="drawer-form-header-wrapper"
-          sx={{ pl: 3, pr: 3, pb: 2, pt: 2, borderBottom: '1px solid var(--stroke-sep, #EFF1F5)' }}>
-          <Stack direction="row" alignItems="center">
-            <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
-              {props.text}
-            </Typography>
-            {!settings.livemode && !props.hideLiveMode && <Livemode />}
-          </Stack>
-          <Stack direction="row" alignItems="center" justifyContent="space-between">
-            <Close
-              sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
-              onClick={handleClose}
-            />
-            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} />}
+          flexWrap="wrap"
+          sx={{
+            pl: 3,
+            pr: 3,
+            pb: 2,
+            pt: 2,
+            gap: 1,
+            borderBottom: '1px solid var(--stroke-sep, #EFF1F5)',
+            '@media (max-width: 600px)': {
+              '& > .addons-wrapper': {
+                width: '100%',
+                justifyContent: 'flex-end',
+                '& > .addons-divider': {
+                  display: 'none',
+                },
+              },
+            },
+          }}>
+          <Box flex={1} display="flex" alignItems="center" justifyContent="space-between">
+            <Stack direction="row" alignItems="center">
+              <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
+                {props.text}
+              </Typography>
+              {!settings.livemode && !props.hideLiveMode && <Livemode />}
+            </Stack>
+            <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <Close
+                sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
+                onClick={handleClose}
+              />
+            </Stack>
+          </Box>
+          <Box display="flex" alignItems="center" className="addons-wrapper">
+            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} className="addons-divider" />}
             {props.addons}
-          </Stack>
+          </Box>
         </Stack>
         <Box className="drawer-form-body" sx={{ mx: 3, my: 2 }}>
           {props.children}
         </Box>
-        <Box className="drawer-form-footer">{props.footer}</Box>
+        {props.footer && (
+          <Box className="drawer-form-footer">
+            <Divider sx={{ mb: 2 }} />
+            {props.footer}
+          </Box>
+        )}
       </Container>
     </>
   );

package/src/components/info-row.tsx

@@ -33,6 +33,7 @@ export default function InfoRow(props: Props) {
       alignItems={props.alignItems}
       justifyContent="space-between"
       flexWrap="wrap"
+      gap={1}
       sx={{
         mb: 2,
         ...props.sx,

package/src/components/payment-currency/add.tsx

@@ -1,20 +1,57 @@
-/* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatError } from '@blocklet/payment-react';
-import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
-import { Button, CircularProgress } from '@mui/material';
+import {
+  Button,
+  CircularProgress,
+  TextField,
+  Autocomplete,
+  Box,
+  Typography,
+  Avatar,
+  Stack,
+  Divider,
+} from '@mui/material';
 import { useSetState } from 'ahooks';
 import { FormProvider, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
-
+import { useEffect } from 'react';
 import DrawerForm from '../drawer-form';
 import PaymentCurrencyForm from './form';
 
-export default function PaymentCurrencyAdd({ method, onClose }: { method: TPaymentMethod; onClose: () => void }) {
+const loadTokenList = () =>
+  import(
+    /* webpackChunkName: "payment-token-list" */
+    './tokenList.json'
+  );
+interface TokenInfo {
+  address: string;
+  chainId: number;
+  decimals: number;
+  name: string;
+  symbol: string;
+  logoURI?: string;
+}
+
+export default function PaymentCurrencyAdd({
+  method,
+  onClose,
+}: {
+  method: TPaymentMethodExpanded;
+  onClose: () => void;
+}) {
   const { t } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false });
+  const [state, setState] = useSetState<{
+    loading: boolean;
+    tokenListLoading: boolean;
+    availableTokens: TokenInfo[];
+  }>({
+    loading: false,
+    tokenListLoading: false,
+    availableTokens: [],
+  });
 
   const methods = useForm<TPaymentCurrency>({
     defaultValues: {
@@ -25,7 +62,39 @@ export default function PaymentCurrencyAdd({ method, onClose }: { method: TPayme
       contract: '',
     },
   });
-  const { handleSubmit } = methods;
+  const { handleSubmit, setValue } = methods;
+
+  const showTokenSelect = ['ethereum', 'base'].includes(method.type);
+
+  // @ts-ignore
+  const chainId = method?.settings?.[method.type]?.chain_id || '';
+
+  useEffect(() => {
+    if (showTokenSelect && !state.availableTokens.length) {
+      setState({ tokenListLoading: true });
+      loadTokenList().then((module) => {
+        const availableTokens = showTokenSelect
+          ? // @ts-ignore
+            ((module.default?.[chainId] as TokenInfo[]) || []).filter(
+              (token: TokenInfo) => !(method.payment_currencies || []).find((c: any) => c.contract === token.address)
+            )
+          : [];
+        setState({
+          availableTokens,
+          tokenListLoading: false,
+        });
+      });
+    }
+  }, [showTokenSelect, chainId]);
+
+  const handleTokenSelect = (token: TokenInfo | null) => {
+    if (token) {
+      setValue('name', token.name);
+      setValue('description', `${token.name} (${token.symbol})`);
+      setValue('logo', token.logoURI || '');
+      setValue('contract', token.address);
+    }
+  };
 
   const onSubmit = (data: TPaymentCurrency) => {
     setState({ loading: true });
@@ -52,12 +121,71 @@ export default function PaymentCurrencyAdd({ method, onClose }: { method: TPayme
       onClose={onClose}
       text={t('admin.paymentCurrency.add')}
       width={640}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
-          {state.loading ? <CircularProgress size="small" /> : t('admin.paymentCurrency.save')}
+      footer={
+        <Button
+          variant="contained"
+          size="large"
+          onClick={handleSubmit(onSubmit)}
+          disabled={state.loading}
+          sx={{ width: '100%' }}>
+          {state.loading && <CircularProgress size={20} />} {t('common.save')}
         </Button>
       }>
       <FormProvider {...methods}>
+        {showTokenSelect && (
+          <Box sx={{ mb: 3 }}>
+            <Autocomplete
+              disablePortal
+              options={state.availableTokens}
+              loading={state.tokenListLoading}
+              getOptionLabel={(option: TokenInfo) => option.symbol}
+              onChange={(_, value) => handleTokenSelect(value)}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label={t('admin.paymentCurrency.quickAdd')}
+                  placeholder={t('admin.paymentCurrency.searchToken')}
+                  fullWidth
+                />
+              )}
+              renderOption={(props, option) => (
+                <Box
+                  component="li"
+                  {...props}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: 'action.hover',
+                    },
+                  }}>
+                  <Avatar
+                    src={option.logoURI || option.symbol}
+                    alt={option.symbol}
+                    sx={{
+                      width: 24,
+                      height: 24,
+                    }}
+                  />
+                  <Stack>
+                    <Typography fontWeight={500}>{option.name}</Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      {option.symbol}
+                    </Typography>
+                  </Stack>
+                </Box>
+              )}
+              isOptionEqualToValue={(option, value) => option.address === value.address}
+            />
+            <Divider sx={{ my: 3 }}>
+              <Typography variant="caption" color="text.secondary">
+                {t('admin.paymentCurrency.orManualInput')}
+              </Typography>
+            </Divider>
+          </Box>
+        )}
         <PaymentCurrencyForm />
       </FormProvider>
     </DrawerForm>

package/src/components/payment-currency/edit.tsx

@@ -60,9 +60,14 @@ export default function PaymentCurrencyEdit({
       onClose={onClose}
       text={t('admin.paymentCurrency.edit')}
       width={640}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
-          {state.loading ? <CircularProgress size="small" /> : t('admin.paymentCurrency.save')}
+      footer={
+        <Button
+          variant="contained"
+          size="large"
+          onClick={handleSubmit(onSubmit)}
+          disabled={state.loading}
+          sx={{ width: '100%' }}>
+          {state.loading && <CircularProgress size={20} />} {t('common.save')}
         </Button>
       }>
       <FormProvider {...methods}>