payment-kit 1.13.15

package/src/contexts/session.ts

@@ -0,0 +1,10 @@
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
+
+const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
+
+export function useSessionContext(): any {
+  return useContext(SessionContext);
+}
+
+export { SessionProvider, SessionContext, SessionConsumer, withSession };

package/src/contexts/settings.tsx

@@ -0,0 +1,54 @@
+import type { TPaymentCurrency, TPaymentMethod } from '@did-pay/types';
+import { Alert, CircularProgress } from '@mui/material';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import type { Axios } from 'axios';
+import { createContext, useContext } from 'react';
+
+import api from '../libs/api';
+
+export interface Settings {
+  paymentMethods: TPaymentMethod[];
+  baseCurrency: TPaymentCurrency;
+}
+
+export type SettingsContextType = {
+  livemode: boolean;
+  settings: Settings;
+  refresh: () => void;
+  setLivemode: (livemode: boolean) => void;
+  api: Axios;
+};
+
+// @ts-ignore
+const SettingsContext = createContext<SettingsContextType>({ api });
+const { Provider, Consumer } = SettingsContext;
+
+const getSettings = async () => {
+  const { data } = await api.get('/api/settings');
+  return data;
+};
+
+// eslint-disable-next-line react/prop-types
+function SettingsProvider({ children }: { children: any }): JSX.Element {
+  const { data, error, run, loading } = useRequest(getSettings);
+  const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Provider value={{ livemode: !!livemode, settings: data, refresh: run, setLivemode, api }}>{children}</Provider>
+  );
+}
+
+function useSettingsContext() {
+  const context = useContext(SettingsContext);
+  return context;
+}
+
+export { SettingsContext, SettingsProvider, Consumer as SettingsConsumer, useSettingsContext };

package/src/env.d.ts

@@ -0,0 +1,17 @@
+declare var blocklet: {
+  appName: string;
+  appLogo: string;
+  appUrl: string;
+  prefix: string;
+  languages: { code: string; name: string }[];
+};
+
+declare module '*.svg';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@blocklet/*';
+
+declare module 'pretty-ms-i18n';

package/src/global.css

@@ -0,0 +1,97 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+}
+
+a {
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.87);
+}
+a:hover {
+  color: rgba(0, 0, 0, 0.87);
+  text-decoration: underline;
+}
+a:visited {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.MuiButton-sizeSmall {
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-color: #ccc;
+}
+
+.MuiTab-root {
+  padding: 0;
+  margin-right: 24px;
+  min-height: 32px;
+  min-width: auto;
+}
+
+.MuiTabs-root {
+  min-height: 32px;
+  margin-bottom: 8px;
+}
+
+.MuiTabs-scroller {
+  border-bottom: 1px solid #eee;
+}
+
+.MuiCheckbox-root {
+  padding: 0;
+  padding-right: 4px;
+}
+
+.MuiFormLabel-root {
+  color: rgba(0, 0, 0, 0.8);
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.MuiToggleButton-root {
+  padding: 4px 16px;
+}
+
+.MuiDialogContent-root {
+  padding: 0 24px 16px;
+}
+
+.MuiTableCell-root {
+  font-size: 1rem !important;
+  padding-right: 24px;
+}
+
+th.MuiTableCell-head {
+  padding: 8px 0;
+}
+
+.MuiRadio-root {
+  padding: 4px;
+}
+
+.MuiDialogActions-root {
+  padding-top: 16px;
+}
+
+.MuiDialogContent-root {
+  padding-top: 0px !important;
+}
+
+.MuiFormHelperText-root {
+  margin-left: 0;
+}
+
+.codeblock__inner {
+  display: block;
+  width: 100%;
+  max-height: 100% !important;
+  overflow: auto !important;
+}
+
+.MuiTableRow-hover {
+  cursor: pointer;
+}

package/src/hooks/mobile.ts

@@ -0,0 +1,15 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+const MOBILE_POINT = 'md';
+
+function useMobile() {
+  const theme = useTheme();
+
+  return {
+    isMobile: useMediaQuery(theme.breakpoints.down(MOBILE_POINT)),
+    mobileSize: `${theme.breakpoints.values[MOBILE_POINT]}px`,
+  };
+}
+
+export default useMobile;

package/src/index.tsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom/client';
+
+import App from './app';
+
+const root = ReactDOM.createRoot(document.getElementById('app')!);
+root.render(<App />);

package/src/libs/api.ts

@@ -0,0 +1,19 @@
+import { getLocale } from '@arcblock/ux/lib/Locale/context';
+import axios from 'axios';
+
+axios.interceptors.request.use(
+  (config) => {
+    const prefix = window.blocklet ? window.blocklet.prefix : '/';
+    config.baseURL = prefix || '';
+    config.timeout = 200000;
+
+    const livemode = localStorage.getItem('livemode');
+    const locale = getLocale(window.blocklet.languages);
+    config.params = { ...(config.params || {}), livemode, locale };
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export default axios;

package/src/libs/dayjs.ts

@@ -0,0 +1,17 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import timezone from 'dayjs/plugin/timezone'; // dependent on utc plugin
+import utc from 'dayjs/plugin/utc';
+
+import('dayjs/locale/en');
+import('dayjs/locale/zh');
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(duration);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default dayjs;