Merge pull request #103 from Portkey-Wallet/feature/social-start-revamp

feat: revamp social start page

src/app/globals.css

@@ -6,6 +6,24 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+
+  --sds-color-background-default-secondary: #F4F4F4;
+  --sds-color-background-default-default: #FFFFFF;
+  --sds-color-background-warning-tertiary: #FEFCE8;
+  --sds-color-background-brand-default: #0996EE;
+
+  --sds-color-icon-neutral-default: #303030;
+  --sds-color-icon-neutral-tertiary: #767676;
+  --sds-color-icon-warning-on-warning-tertiary: #9C820E;
+
+  --sds-color-text-default-default: #1F1F21;
+  --sds-color-text-default-secondary: #626264;
+  --sds-color-text-brand-on-brand: #DFF0FF;
+  --sds-color-text-warning-on-warning-tertiary: #9C820E;
+
+  --sds-color-border-default-default: #D2D2D3;
+  --sds-color-border-warning-tertiary: #FEDF56;
+
 }
 
 @media (prefers-color-scheme: dark) {
@@ -52,3 +70,23 @@ body {
     }
   }
 }
+
+
+[data-theme="dark"] {
+  --sds-color-background-default-secondary: #1F1F21;
+  --sds-color-background-default-default: #151318;
+  --sds-color-background-warning-tertiary: #231F0D;
+  --sds-color-background-brand-default: #B8E1FF;
+
+  --sds-color-icon-neutral-default: #E3E3E3;
+  --sds-color-icon-neutral-tertiary: #B2B2B2;
+  --sds-color-icon-warning-on-warning-tertiary: #FDD10E;
+
+  --sds-color-text-default-default: #FFFFFF;
+  --sds-color-text-default-secondary: #FFFFFFB2;
+  --sds-color-text-brand-on-brand: #0A4370;
+  --sds-color-text-warning-on-warning-tertiary: #FDD10E;
+
+  --sds-color-border-default-default: #414142;
+  --sds-color-border-warning-tertiary: #6C5A0D;
+}

src/app/social-start/page.tsx

@@ -24,7 +24,7 @@ export default function SocialStart() {
   const onApprove = useCallback(() => {
     setShowAggree(false);
   }, []);
-
+  
   if (params?.actionType !== OPENLOGIN_ACTIONS.LOGIN) return <>`actionType` No Support</>;
   return (
     <div>

src/components/Footer/contants.ts

@@ -0,0 +1,25 @@
+const mediumArr = [
+  {
+    title: 'medium',
+    icon: '/img/footer/icon_medium.svg',
+    href: 'https://medium.com/@PortkeyDID'
+  },{
+    title: 'youtube',
+    icon: '/img/footer/icon_youtube.svg',
+    href: 'https://www.youtube.com/@PortkeyDID'
+  },{
+    title: 'telegram',
+    icon: '/img/footer/icon_telegram.svg',
+    href: 'https://t.me/Portkey_Official_Group'
+  },{
+    title: 'twitter',
+    icon: '/img/footer/icon_twitter.svg',
+    href: 'https://twitter.com/Portkey_DID'
+  },{
+    title: 'github',
+    icon: '/img/footer/icon_github.svg',
+    href: 'https://github.com/Portkey-Wallet/portkey-web'
+  }
+];
+
+export { mediumArr }

src/components/Footer/index.css

@@ -0,0 +1,14 @@
+.medium {
+  display: flex;
+  gap: 24px;
+  padding-top: 25px;
+  border-top: 1px solid var(--sds-color-border-default-default);
+  width: 100%;
+  justify-content: center;
+}
+
+.medium img {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}

src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { mediumArr } from './contants';
+import './index.css';
+
+const Footer = ({className}: {className?: string}) => {
+
+  return <div className={className || 'medium'}>
+  {/* eslint-disable-next-line @next/next/no-img-element */}
+  {mediumArr.map(item => <a key={item.title} href={item.href} target="_blank" rel="noopener noreferrer"><img src={item.icon} alt={item.title} /></a>)}
+</div>
+}
+
+export default Footer

src/pages-components/entry/index.tsx

@@ -8,9 +8,11 @@ import CommonImage from 'src/components/CommonImage';
 import { entryPageData } from 'src/constants/entry';
 import { useStyleProvider } from 'src/utils/mobile';
 import { OpenLoginParamConfig } from 'src/types/auth';
+import { CustomSvg } from '@portkey/did-ui-react';
+import Footer from 'src/components/Footer';
 
 export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => void; authInfo: OpenLoginParamConfig }) {
-  const { logo, errorIcon } = entryPageData;
+  const { errorIcon } = entryPageData;
   const styles = useStyleProvider<Record<string, string>>({
     pcStyle,
     mobileStyle,
@@ -25,7 +27,14 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v
       // eslint-disable-next-line no-empty
     } catch (ignored) {}
   }, []);
-
+  useEffect(() => {
+    const theme = authInfo.theme;
+    if (theme === 'dark') {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  })
   useEffect(() => {
     try {
       if (!authInfo) throw new Error('invalid data');
@@ -42,7 +51,11 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v
       symbol && (raw['Token'] = symbol);
       (amount || typeof amount === 'number') && (raw['Amount'] = amount);
       const realChainId = targetChainId || originChainId;
-      raw['Chain'] = realChainId === `AELF` ? `MainChain ${realChainId}` : `SideChain ${realChainId}`;
+      if(realChainId){
+        raw['Chain'] = realChainId === `AELF` ? `MainChain ${realChainId}` : `SideChain ${realChainId}`;
+      } else {
+        raw['Chain'] = 'Unknown';
+      }
       raw['Guardian Type'] = guardianType;
       const guardianAccount = thirdPartyEmail || identifier;
       raw['Guardian Account'] = guardianAccount;
@@ -60,37 +73,41 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v
     <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>
-            )}
+          {/* <CommonImage src={logo.src} style={{ width: logo.width, height: logo.height }} alt={logo.alt} priority /> */}
+          <CustomSvg type='PortkeyLogo' className={styles.logo}/>
+          <div className={styles.contentWrapper}>
+            <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>
           </div>
           {!!consumedData && (
             <Button type="primary" className={styles.jumpBtn} onClick={onApprove}>
               <div className={styles.jumpBtnText}>Agree</div>
             </Button>
           )}
+          <Footer className={styles.medium}/>
         </div>
       </div>
     </ConfigProvider>