@blocklet/did-domain-react 0.3.39

package/src/buy.tsx

@@ -0,0 +1,154 @@
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Locale } from '@arcblock/ux/lib/type';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
+import type { ButtonProps } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import { useRequest as useAHooksRequest, useMemoizedFn, useSetState, useUnmount } from 'ahooks';
+import { useRef } from 'react';
+import { joinURL } from 'ufo';
+
+import { create } from './libs/api';
+import { openPopup } from './libs/util';
+import { translations } from './locales';
+
+enum BuyState {
+  Prepare = 1,
+  InProgress = 2,
+  Success = 4,
+  Completed = 8,
+}
+
+interface Props {
+  delegatee: string;
+  delegateePk: string;
+  didDomainURL: string;
+  locale: Locale;
+  onSuccess?: (data: { nftDid: string; domain: string; chainHost: string }) => void;
+}
+
+function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ...props }: Props & ButtonProps) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState<{ currentState: BuyState }>({
+    currentState: BuyState.Prepare,
+  });
+  const popup = useRef<Window | null>(null);
+  const domainURLObj = new URL(didDomainURL);
+  domainURLObj.searchParams.set('locale', locale);
+
+  const api = useMemoizedFn(() => create({ baseURL: joinURL(domainURLObj.origin, domainURLObj.pathname, 'api') }))();
+
+  const onMessage = useMemoizedFn((event: MessageEvent) => {
+    if (event.data.type === 'didDomain.success') {
+      onSuccess?.({ nftDid: event.data?.nftDid, domain: event.data?.domain, chainHost: event.data?.chainHost });
+      popup.current?.close();
+      popup.current = null;
+      setState({ currentState: BuyState.Success });
+
+      setTimeout(() => {
+        setState({ currentState: BuyState.Completed });
+      }, 2000);
+    }
+  });
+
+  useUnmount(() => {
+    try {
+      window.removeEventListener('message', onMessage);
+      popup.current?.close();
+      popup.current = null;
+    } catch (error) {
+      console.warn('Failed to close popup', error);
+    }
+  });
+
+  const handleCloseDialog = useMemoizedFn(() => {
+    setState({ currentState: BuyState.Prepare });
+  });
+
+  const handleOpenDialog = useMemoizedFn(() => {
+    setState({ currentState: BuyState.InProgress });
+    sessionRequest.run();
+  });
+
+  const handleCreatedSession = useMemoizedFn(({ sessionId }: { sessionId: string }) => {
+    window.addEventListener('message', onMessage);
+    domainURLObj.searchParams.set('sessionId', sessionId);
+    popup.current = openPopup(domainURLObj.toString());
+
+    const timer = setInterval(() => {
+      if (popup.current?.closed) {
+        clearInterval(timer);
+        handleCloseDialog();
+      }
+    }, 1000);
+
+    return () => clearInterval(timer);
+  });
+
+  const sessionRequest = useAHooksRequest(
+    async () => {
+      const { data } = await api.post('/payment/session', {
+        delegatee,
+        delegateePk,
+      });
+      return handleCreatedSession({ sessionId: data.sessionId });
+    },
+    {
+      manual: true,
+      debounceWait: 500,
+      debounceLeading: true,
+      debounceTrailing: false,
+      debounceMaxWait: 3000,
+      refreshDeps: [],
+      onError(error: Error) {
+        console.error(error);
+      },
+    }
+  );
+
+  return (
+    <>
+      <Button onClick={handleOpenDialog} variant="contained" startIcon={<ShoppingCart />} {...props}>
+        {t('buy.button.title')}
+      </Button>
+      <Dialog
+        fullWidth
+        maxWidth="xs"
+        open={state.currentState > BuyState.Prepare && state.currentState < BuyState.Completed}
+        onClose={handleCloseDialog}>
+        {!sessionRequest.error && (
+          <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: 2 }}>
+            {state.currentState === BuyState.InProgress && <CircularProgress size={50} />}
+            {state.currentState === BuyState.Success && (
+              <CheckCircle sx={{ color: 'primary.main', fontSize: '5rem' }} />
+            )}
+            {state.currentState === BuyState.InProgress && <Typography>{t('buy.status.inProgress')}</Typography>}
+            {state.currentState === BuyState.Success && <Typography>{t('buy.status.success')}</Typography>}
+          </Box>
+        )}
+        {sessionRequest.error && <Alert severity="error">{t('buy.error.failedToCreateSession')}</Alert>}
+      </Dialog>
+    </>
+  );
+}
+
+Component.defaultProps = {
+  onSuccess: () => {},
+};
+
+export default function Buy(props: Props) {
+  return (
+    <LocaleProvider locale={props.locale} translations={translations}>
+      <Component {...props} />
+    </LocaleProvider>
+  );
+}
+
+Buy.defaultProps = {
+  onSuccess: () => {},
+};

package/src/domain.tsx

@@ -0,0 +1,77 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useRef } from 'react';
+import useSetState from 'react-use/lib/useSetState';
+import { joinURL } from 'ufo';
+
+import { mergeSx } from './libs/util';
+
+export function Domain({
+  nftDid,
+  didDomainURL,
+  locale,
+  sx,
+}: {
+  nftDid: string;
+  didDomainURL: string;
+  locale: string;
+  sx?: any;
+}) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    safeIframeRef: null,
+    popoverAnchorEl: null,
+  });
+  const iframeRef = useRef(null);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const handlePopoverClick = (event: any) => {
+    setState({ popoverAnchorEl: event.currentTarget });
+  };
+
+  const handlePopoverClose = () => {
+    setState({ popoverAnchorEl: null });
+  };
+
+  const iframeSrc = joinURL(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+
+  return (
+    <>
+      <Box
+        component="img"
+        src={joinURL(didDomainURL, '/.well-known/service/blocklet/logo')}
+        alt="logo"
+        width={16}
+        height={16}
+        onClick={handlePopoverClick}
+        sx={mergeSx({ cursor: 'pointer' }, sx)}
+      />
+      <Popover
+        id="popover-info"
+        open={Boolean(state.popoverAnchorEl)}
+        anchorEl={state.popoverAnchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}>
+        <iframe
+          ref={iframeRef}
+          title={t('common.subscription')}
+          width={isMobile ? '320px' : '400px'}
+          height={isMobile ? '600px' : '680px'}
+          style={{ border: 0 }}
+          src={iframeSrc}
+        />
+      </Popover>
+    </>
+  );
+}
+
+Domain.defaultProps = {
+  sx: {},
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+import Buy from './buy';
+import { Domain } from './domain';
+
+export { translations } from './locales';
+
+export { Buy, Domain };

package/src/libs/api.ts

@@ -0,0 +1,28 @@
+import { getLocale } from '@arcblock/ux/lib/Locale/context';
+import { createAxios } from '@blocklet/js-sdk';
+import { joinURL } from 'ufo';
+
+const axios = createAxios({});
+
+axios.interceptors.request.use(
+  (config) => {
+    const prefix = window.blocklet ? window.blocklet.prefix : '/';
+    config.baseURL = prefix || '';
+    config.url = joinURL('/api', String(config.url));
+    config.timeout = 200000;
+
+    config.params = config.params || {};
+
+    const searchParams = new URLSearchParams(config.url.split('?')[1]);
+    if (!searchParams.has('locale')) {
+      config.params.locale = getLocale();
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export const create = (...args: any) => createAxios(...args);
+
+export default axios;

package/src/libs/util.ts

@@ -0,0 +1,100 @@
+import { withQuery } from 'ufo';
+
+export const SEARCH_BUTTON_WIDTH = 120;
+
+export const COMMON_REQUEST_OPTIONS = {
+  debounceWait: 500,
+  debounceLeading: true,
+  debounceTrailing: false,
+  debounceMaxWait: 3000,
+};
+
+export const formatLocale = (locale = 'en') => {
+  if (locale === 'tw') {
+    return 'zh';
+  }
+
+  return locale;
+};
+
+export const formatError = (err: any, t: any) => {
+  const { errors, response } = err;
+
+  // graphql error
+  if (Array.isArray(errors)) {
+    return errors.map((x) => x.message).join('\n');
+  }
+
+  // joi validate error
+  const joiError = err.response?.data?.error;
+  if (Array.isArray(joiError?.details)) {
+    const formatted = joiError?.details.map((e: any) => {
+      const errorMessage = e.message.replace(/["]/g, "'");
+      const errorPath = e.path.join('.');
+      return `${errorPath}: ${errorMessage}`;
+    });
+
+    return `Validate failed: ${formatted.join(';')}`;
+  }
+
+  if (response?.data?.code) {
+    return t(`error.${response?.data?.code}`);
+  }
+
+  if (response?.data?.message) {
+    return response.data.message;
+  }
+
+  // axios error
+  if (response) {
+    return `Request failed: ${response.status} ${response.statusText}: ${JSON.stringify(response.data)}`;
+  }
+
+  return err.message;
+};
+
+export const mergeSx = (initial: any, sx: any) => {
+  if (!sx) {
+    return initial;
+  }
+
+  if (!initial) {
+    return sx;
+  }
+
+  return [initial, ...(Array.isArray(sx) ? sx : [sx])];
+};
+
+export const getChainHost = () => window.blocklet?.preferences?.chainHost || '';
+
+/**
+ *
+ * @param {string} url - 打开一个弹窗
+ * @returns
+ */
+export const openPopup = (url: string, { width = 600, height = 700, name = 'did-domain:popup' } = {}) => {
+  const left = window.screenX + (window.innerWidth - width) / 2;
+  const top = window.screenY + (window.innerHeight - height) / 2;
+
+  const windowFeatures = [
+    `left=${left}`,
+    `top=${top}`,
+    `width=${width}`,
+    `height=${height}`,
+    'resizable=no', // not working
+    'scrollbars=yes',
+    'status=yes',
+    'popup=yes',
+  ];
+
+  // HACK: IOS 必须以这种形式打开，才能被识别为 dialog 模式
+  const popup = window.open('', name, windowFeatures.join(','));
+  if (popup === null) {
+    throw new Error('Failed to open popup');
+  }
+  popup.location.href = withQuery(url, {
+    // NOTICE: 携带当前页面的 origin，用于在 popup 中通过该参数判断是否可以发送 postMessage，即使该参数被伪造，最终也只有该域名能接收到消息，所以没有关系
+    opener: window.location.origin,
+  });
+  return popup;
+};

package/src/locales/en.ts

@@ -0,0 +1,17 @@
+import flat from 'flat';
+
+export default flat({
+  buy: {
+    button: {
+      title: 'Buy DID Domain',
+    },
+    status: {
+      inProgress:
+        'Please wait while we are processing your request, the domain will be automatically resolved to the current app after the purchase...',
+      success: 'Purchase completed!',
+    },
+    error: {
+      failedToCreateSession: 'Failed to create session',
+    },
+  },
+});

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import en from './en';
+import zh from './zh';
+
+export const translations = {
+  zh,
+  en,
+};

package/src/locales/zh.ts

@@ -0,0 +1,16 @@
+import flat from 'flat';
+
+export default flat({
+  buy: {
+    button: {
+      title: '购买 DID 域名',
+    },
+    status: {
+      inProgress: '请稍等，我们正在处理您的请求，购买域名后会自动解析到当前的应用...',
+      success: '购买完成！',
+    },
+    error: {
+      failedToCreateSession: '创建会话失败',
+    },
+  },
+});

package/src/types/shims.d.ts

@@ -0,0 +1,15 @@
+declare module '@arcblock/ux/*';
+
+declare module '@arcblock/did-connect/*';
+
+declare module '*.png';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@blocklet/*';
+
+declare module 'pretty-ms-i18n';
+
+declare var blocklet: import('@blocklet/sdk').WindowBlocklet;

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'; // eslint-disable-line
+import { nodePolyfills } from 'vite-plugin-node-polyfills'; // eslint-disable-line
+
+export default defineConfig({
+  plugins: [nodePolyfills({ protocolImports: true })],
+});