payment-kit 1.13.15 → 1.13.16

package/api/src/routes/settings.ts

@@ -20,13 +20,15 @@ router.get('/', async (req, res) => {
 
   methods.forEach((method) => {
     // @ts-ignore
-    method.currencies = method.payment_currencies?.map((x) => pick(x, ['id', 'name', 'symbol', 'decimal', 'logo']));
+    method.currencies = method.payment_currencies?.map((x) =>
+      pick(x, ['id', 'name', 'symbol', 'decimal', 'logo', 'is_base_currency'])
+    );
   });
 
   res.json({
     paymentMethods: methods.map((x) => pick(x, ['id', 'name', 'type', 'logo', 'currencies'])),
     // @ts-ignore
-    baseCurrency: methods[0].currencies[0],
+    baseCurrency: methods[0].currencies.find((x) => x.is_base_currency),
   });
 });
 

package/api/src/store/migrations/20230911-seeding.ts

@@ -9,6 +9,8 @@ const genPaymentCurrencyId = createIdGenerator('pc', 12);
 
 const abtId = genPaymentCurrencyId();
 const tbaId = genPaymentCurrencyId();
+const marsId = genPaymentCurrencyId();
+const play3Id = genPaymentCurrencyId();
 const mainId = genPaymentMethodId();
 const betaId = genPaymentMethodId();
 const now = new Date();
@@ -54,6 +56,44 @@ const paymentCurrencies = [
     created_at: now,
     updated_at: now,
   },
+  {
+    id: marsId,
+    active: true,
+    livemode: false,
+    locked: true,
+    is_base_currency: false,
+    payment_method_id: betaId,
+    name: 'RollupTestToken',
+    description: 'Token to test rollup on staging',
+    logo,
+    symbol: 'MARS',
+    decimal: 18,
+    minimum_payment_amount: fromTokenToUnit(0.1, 18).toString(), // 0.1 token
+    maximum_payment_amount: fromTokenToUnit(100000000, 18).toString(), // 0.1 billion
+    contract: 'z35n4nCsnAEWa2zVSKNKZhDGXSszaJAogSc3A',
+    metadata: {},
+    created_at: now,
+    updated_at: now,
+  },
+  {
+    id: play3Id,
+    active: true,
+    livemode: false,
+    locked: true,
+    is_base_currency: false,
+    payment_method_id: betaId,
+    name: 'Playground Token',
+    description: 'Test Token for OCAP Playground',
+    logo,
+    symbol: 'PLAY3',
+    decimal: 18,
+    minimum_payment_amount: fromTokenToUnit(0.1, 18).toString(), // 0.1 token
+    maximum_payment_amount: fromTokenToUnit(100000000, 18).toString(), // 0.1 billion
+    contract: 'z35n3WVTnN7KrR4gXn3szR6oneVefkBBx78Fc',
+    metadata: {},
+    created_at: now,
+    updated_at: now,
+  },
 ];
 
 const paymentMethods = [

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.15",
+  "version": "1.13.16",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -85,6 +85,7 @@
     "rimraf": "^3.0.2",
     "sequelize": "^6.33.0",
     "sqlite3": "^5.1.6",
+    "typewriter-effect": "^2.21.0",
     "ufo": "^1.3.0",
     "umzug": "^3.3.1",
     "use-bus": "^2.5.2"
@@ -92,7 +93,7 @@
   "devDependencies": {
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.15",
+    "@did-pay/types": "1.13.16",
     "@types/cookie-parser": "^1.4.3",
     "@types/cors": "^2.8.13",
     "@types/dotenv-flow": "^3.2.0",
@@ -129,5 +130,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "806b7f99c61884fd1f0ff60d14f44165448ce5c7"
+  "gitHead": "c373817d035b5af72e98e333f36922c296be0ea6"
 }

package/src/app.tsx

@@ -1,9 +1,11 @@
 import './global.css';
 
+import Center from '@arcblock/ux/lib/Center';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import { ThemeProvider, createTheme } from '@arcblock/ux/lib/Theme';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
-import React from 'react';
+import { CircularProgress } from '@mui/material';
+import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { joinURL } from 'ufo';
@@ -32,18 +34,25 @@ function App() {
     <ThemeProvider theme={theme}>
       <LocaleProvider translations={translations} fallbackLocale="en">
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
-          <Routes>
-            <Route path="/" element={<HomePage />} />
-            <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
-            <Route key="admin-index" path="/admin" element={<AdminPage />} />,
-            <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
-            <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
-            <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
-            <Route key="customer-home" path="/customer" element={<CustomerHome />} />,
-            <Route key="customer-invoice" path="/customer/invoice/:id" element={<CustomerInvoice />} />,
-            <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
-            <Route path="*" element={<Navigate to="/" />} />
-          </Routes>
+          <Suspense
+            fallback={
+              <Center relative="parent">
+                <CircularProgress />
+              </Center>
+            }>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
+              <Route key="admin-index" path="/admin" element={<AdminPage />} />,
+              <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
+              <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+              <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
+              <Route key="customer-home" path="/customer" element={<CustomerHome />} />,
+              <Route key="customer-invoice" path="/customer/invoice/:id" element={<CustomerInvoice />} />,
+              <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </Suspense>
         </ErrorBoundary>
       </LocaleProvider>
     </ThemeProvider>

package/src/locales/en.tsx

@@ -363,6 +363,7 @@ export default flat({
     invoices: 'Invoice History',
     details: 'Billing Details',
     update: 'Update',
+    empty: 'Seems you do not have any subscriptions or payments here',
     cancel: {
       button: 'Cancel',
       title: 'Cancel your subscription',

package/src/pages/admin/billing/index.tsx

@@ -1,8 +1,7 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { CircularProgress, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const SubscriptionDetail = React.lazy(() => import('./subscriptions/detail'));
@@ -43,14 +42,7 @@ export default function BillingIndex() {
         {t('admin.billing')}
       </Typography>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );
 }

package/src/pages/admin/customers/index.tsx

@@ -1,8 +1,7 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { CircularProgress, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const CustomerDetail = React.lazy(() => import('./customers/detail'));
@@ -34,14 +33,7 @@ export default function CustomerIndex() {
         {t('admin.customers')}
       </Typography>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );
 }

package/src/pages/admin/developers/index.tsx

@@ -1,8 +1,7 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { CircularProgress, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const EventDetail = React.lazy(() => import('./events/detail'));
@@ -47,14 +46,7 @@ export default function DevelopersIndex() {
         {t('admin.developers')}
       </Typography>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );
 }

package/src/pages/admin/index.tsx

@@ -1,7 +1,6 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Chip, CircularProgress, Stack } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Box, Chip, Stack } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import Layout from '../../components/layout';
@@ -97,16 +96,7 @@ function Admin() {
           </label>
         </Stack>
       </Stack>
-      <div className="page-content">
-        <Suspense
-          fallback={
-            <Center relative="parent">
-              <CircularProgress />
-            </Center>
-          }>
-          {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-        </Suspense>
-      </div>
+      <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
     </Layout>
   );
 }

package/src/pages/admin/payments/index.tsx

@@ -1,8 +1,7 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { CircularProgress, Stack, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Stack, Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const PaymentLinkCreate = React.lazy(() => import('./links/create'));
@@ -52,14 +51,7 @@ export default function PaymentIndex() {
         {extra}
       </Stack>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );
 }

package/src/pages/admin/products/index.tsx

@@ -1,10 +1,9 @@
 import Button from '@arcblock/ux/lib/Button';
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
 import { AddOutlined } from '@mui/icons-material';
-import { CircularProgress, Stack, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Stack, Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const ProductCreate = React.lazy(() => import('./products/create'));
@@ -68,14 +67,7 @@ export default function Products() {
         onChange={(newTab: string) => navigate(`/admin/products/${newTab}`)}
         scrollButtons="auto"
       />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </>
   );
 }

package/src/pages/admin/settings/index.tsx

@@ -1,8 +1,7 @@
-import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { CircularProgress, Typography } from '@mui/material';
-import React, { Suspense, isValidElement } from 'react';
+import { Typography } from '@mui/material';
+import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const pages = {
@@ -34,14 +33,7 @@ export default function SettingsIndex() {
         {t('admin.settings')}
       </Typography>
       <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-      </Suspense>
+      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );
 }

package/src/pages/checkout/index.tsx

@@ -1,6 +1,5 @@
-import Center from '@arcblock/ux/lib/Center';
-import { Box, CircularProgress } from '@mui/material';
-import React, { Suspense } from 'react';
+import { Box } from '@mui/material';
+import React from 'react';
 import { useParams } from 'react-router-dom';
 
 import { SettingsProvider } from '../../contexts/settings';
@@ -17,14 +16,7 @@ function Checkout() {
 
   return (
     <Box>
-      <Suspense
-        fallback={
-          <Center relative="parent">
-            <CircularProgress />
-          </Center>
-        }>
-        <TabComponent id={id} />
-      </Suspense>
+      <TabComponent id={id} />
     </Box>
   );
 }

package/src/pages/customer/index.tsx

@@ -30,10 +30,20 @@ export default function CustomerHome() {
     return <Alert severity="error">{formatError(error)}</Alert>;
   }
 
-  if (loading || !data) {
+  if (loading) {
     return <CircularProgress />;
   }
 
+  if (!data) {
+    return (
+      <Layout>
+        <Alert sx={{ mt: 3 }} severity="info">
+          {t('customer.empty')}
+        </Alert>
+      </Layout>
+    );
+  }
+
   return (
     <Layout>
       <Grid container spacing={5}>

package/src/pages/home.tsx

@@ -1,8 +1,38 @@
+import Header from '@blocklet/ui-react/lib/Header';
+import { Avatar, Button, Stack, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+import Typewriter from 'typewriter-effect';
+
 function Home() {
   return (
-    <pre style={{ textAlign: 'left' }}>
-      <code>window.blocklet = {JSON.stringify(window.blocklet, null, 2)}</code>
-    </pre>
+    <div>
+      <Header />
+      <Stack alignItems="center" justifyContent="center" sx={{ height: '60vh', width: '100vw' }}>
+        <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
+          <Avatar src={window.blocklet.appLogo} sx={{ width: 80, height: 80 }} />
+          <Stack direction="column" alignItems="center" spacing={1}>
+            <Typography variant="h4">Payment Kit</Typography>
+            <Typography variant="h5" color="text.secondary" fontWeight="normal">
+              <Typewriter
+                options={{
+                  strings: ['The decentralized stripe alike payment solution for blocklets'],
+                  autoStart: true,
+                  loop: true,
+                }}
+              />
+            </Typography>
+          </Stack>
+          <Stack direction="row" spacing={3}>
+            <Button variant="outlined" color="secondary" size="large" component={Link} to="/admin/overview">
+              Admin Dashboard
+            </Button>
+            <Button variant="outlined" color="primary" size="large" component={Link} to="/customer">
+              Customer Portal
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </div>
   );
 }