feat: 🎸 show approve detial

.prettierrc

@@ -0,0 +1,21 @@
+{
+  "jsxBracketSameLine": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.less",
+      "options": {
+        "parser": "less"
+      }
+    }
+  ]
+}

src/app/social-start/page.tsx

@@ -1,30 +1,37 @@
-"use client";
-import React, { useMemo } from "react";
-import { useSearchParams } from "next/navigation";
-import { base64toJSON } from "src/utils";
-import { OPENLOGIN_ACTIONS } from "src/constants/social";
-import SocialAuth from "src/pages-components/social-auth";
-import { OpenLoginParamConfig } from "src/types/auth";
+'use client';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { base64toJSON } from 'src/utils';
+import { OPENLOGIN_ACTIONS } from 'src/constants/social';
+import SocialAuth from 'src/pages-components/social-auth';
+import { OpenLoginParamConfig } from 'src/types/auth';
+import JumpEntry from 'src/pages-components/entry';
 
 export default function SocialStart() {
   const searchParams = useSearchParams();
-  const b64Params = searchParams.get("b64Params") || "";
+  const b64Params = searchParams.get('b64Params') || '';
 
   const params = useMemo(() => {
     try {
       const data = base64toJSON(b64Params);
-      console.log(data, "b64Params===");
+      console.log(data, 'b64Params===');
       return data as any;
     } catch (error) {
       return {};
     }
   }, [b64Params]);
+  const [showAgree, setShowAggree] = useState<boolean>(true);
+  const onApprove = useCallback(() => {
+    setShowAggree(false);
+  }, []);
+
+  if (params?.actionType !== OPENLOGIN_ACTIONS.LOGIN) return <>`actionType` No Support</>;
   return (
     <div>
-      {params?.actionType === OPENLOGIN_ACTIONS.LOGIN ? (
-        <SocialAuth authInfo={params as OpenLoginParamConfig} />
+      {params.approveDetail && showAgree ? (
+        <JumpEntry authInfo={params as OpenLoginParamConfig} onApprove={onApprove} />
       ) : (
-        <>`actionType` No Support</>
+        <SocialAuth authInfo={params as OpenLoginParamConfig} />
       )}
     </div>
   );

src/components/CommonImage/index.tsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx';
+import Image, { ImageProps } from 'next/image';
+import styles from './styles.module.css';
+
+export default function CommonImage({ className, style, layout = 'fill', alt = 'img', ...props }: ImageProps) {
+  return (
+    <div className={clsx(styles['common-img'], className)} style={style}>
+      <Image {...props} layout={layout} alt={alt} />
+    </div>
+  );
+}

src/components/CommonImage/styles.module.css

@@ -0,0 +1,3 @@
+.common-img {
+  position: relative;
+}

src/constants/entry.ts

@@ -0,0 +1,14 @@
+export const entryPageData = {
+  logo: {
+    src: '/portkeyLogoBlack.svg',
+    width: 230,
+    height: 78,
+    alt: 'Portkey Logo',
+  },
+  errorIcon: {
+    src: '/error.svg',
+    width: 16,
+    height: 16,
+    alt: 'Error Icon',
+  },
+};

src/pages-components/entry/index.tsx

@@ -0,0 +1,98 @@
+import pcStyle from './pc-styles.module.css';
+import mobileStyle from './mobile-styles.module.css';
+import { Button, ConfigProvider } from 'antd';
+import { useCallback, useEffect, useState } from 'react';
+import { getCountry, translateOperationEnumToStr } from 'src/utils/model';
+
+import CommonImage from 'src/components/CommonImage';
+import { entryPageData } from 'src/constants/entry';
+import { useStyleProvider } from 'src/utils/mobile';
+import { OpenLoginParamConfig } from 'src/types/auth';
+
+export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => void; authInfo: OpenLoginParamConfig }) {
+  const { logo, errorIcon } = entryPageData;
+  const styles = useStyleProvider<Record<string, string>>({
+    pcStyle,
+    mobileStyle,
+  });
+  const [consumedData, setConsumedData] = useState<{ [x: string]: string | number | boolean } | undefined>({});
+  const [ip, setIp] = useState<string | undefined>('--');
+
+  const checkUserIp = useCallback(async (serviceUrl: string) => {
+    try {
+      const country = await getCountry(serviceUrl);
+      setIp(country);
+      // eslint-disable-next-line no-empty
+    } catch (ignored) {}
+  }, []);
+
+  useEffect(() => {
+    try {
+      if (!authInfo) throw new Error('invalid data');
+      console.log(authInfo, 'entryPrams===');
+      const { approveDetail, serviceURI } = authInfo;
+      if (!approveDetail) return onApprove?.();
+      const { symbol, amount, originChainId, targetChainId, operationType, guardian } = approveDetail;
+      const { guardianType, identifier, thirdPartyEmail } = guardian;
+      if (!serviceURI || !guardianType) {
+        throw new Error('invalid data');
+      }
+      const raw: any = {};
+      raw['Operation Type'] = translateOperationEnumToStr(operationType);
+      symbol && (raw['Token'] = symbol);
+      (amount || typeof amount === 'number') && (raw['Amount'] = amount);
+      const realChainId = targetChainId || originChainId;
+      raw['Chain'] = realChainId === `AELF` ? `MainChain ${realChainId}` : `SideChain ${realChainId}`;
+      raw['Guardian Type'] = guardianType;
+      const guardianAccount = thirdPartyEmail || identifier;
+      raw['Guardian Account'] = guardianAccount;
+      raw['Time'] = new Date().toLocaleString();
+      raw['IP'] = ip;
+      setConsumedData(raw);
+      checkUserIp(serviceURI);
+    } catch (e) {
+      console.error(e);
+      setConsumedData(undefined);
+    }
+  }, [authInfo, checkUserIp, ip, onApprove]);
+
+  return (
+    <ConfigProvider>
+      <div className={styles.container}>
+        <div className={styles.wrapper}>
+          <CommonImage src={logo.src} style={{ width: logo.width, height: logo.height }} alt={logo.alt} priority />
+          <div className={styles.introductionText}>
+            {'Verification details are as follows. Proceed only if all data matches:'}
+          </div>
+          <div className={styles.dashboard}>
+            {consumedData ? (
+              Object.entries(consumedData).map(([key, value]) => {
+                return (
+                  <div className={styles.infoLine} key={key}>
+                    <div className={styles.infoTitle}>{key}</div>
+                    <div className={styles.infoContent}>{value}</div>
+                  </div>
+                );
+              })
+            ) : (
+              <div className={styles.infoLine}>
+                <CommonImage
+                  src={errorIcon.src}
+                  style={{ width: errorIcon.width, height: errorIcon.height }}
+                  alt={errorIcon.alt}
+                  priority
+                />
+                <div className={styles.errorText}>Invalid parameter.</div>
+              </div>
+            )}
+          </div>
+          {!!consumedData && (
+            <Button type="primary" className={styles.jumpBtn} onClick={onApprove}>
+              <div className={styles.jumpBtnText}>Agree</div>
+            </Button>
+          )}
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}

src/pages-components/entry/mobile-styles.module.css

@@ -0,0 +1,127 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 200%;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 44px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.introductionText {
+  max-width: 320px;
+  color: var(--Light-Mode-Neutral-01-Primary-Text, #101114);
+  font-family: Roboto-Regular;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 40px;
+}
+
+.dashboard {
+  display: flex;
+  padding: 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  width: 320px;
+  margin-top: 16px;
+  border-radius: 6px;
+  background: var(--Light-Mode-Neutral-07-Container-BG, #f5f6f7);
+}
+
+.infoLine {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.infoTitle {
+  color: var(--Light-Mode-Neutral-03-Tertiary-Text, #979aa1);
+  font-family: Roboto-Regular;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  width: 102px;
+  word-break: break-all;
+}
+
+.infoContent {
+  width: 146px;
+  color: var(--Light-Mode-Neutral-01-Primary-Text, #101114);
+  font-family: Roboto-Regular;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  margin-left: 32px;
+  word-break: break-all;
+}
+
+.jumpBtn {
+  margin-top: 48px;
+  width: 320px;
+  height: 48px;
+  background-color: #5b8ef4;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.jumpBtnText {
+  color: #fff;
+  text-align: center;
+  font-family: Roboto-Regular;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 137.5% */
+}
+
+.errorText {
+  color: var(--Light-Mode-Neutral-01-Primary-Text, #101114);
+  font-family: Roboto-Regular;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  margin-left: 8px;
+}
+
+.footer {
+  width: 320px;
+  position: absolute;
+  bottom: 0;
+}
+
+.footerMedia {
+  display: flex;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+  border-top: 0 !important;
+}
+
+.footerMediaPortkeyText {
+  padding-top: 16px;
+  padding-bottom: 26px;
+}