[Issue-162][Mythical Telegram App] Update T&C for Leaderboard

Koniverse · Dec 24, 2024 · dca6563 · dca6563
1 parent 2c93475
commit dca6563
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 17 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TermAndConditionModal.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TermAndConditionModal.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { MythButton } from '@subwallet/extension-koni-ui/components/Mythical';
+import ContentGenerator from '@subwallet/extension-koni-ui/components/StaticContent/ContentGenerator';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { preloadImages } from '@subwallet/extension-koni-ui/utils';
 import { SwModal } from '@subwallet/react-ui';
@@ -13,14 +14,20 @@ import styled from 'styled-components';
 interface Props extends ThemeProps {
   onCancel: VoidFunction;
   onOk: VoidFunction;
+  metadata?: Metadata
+}
+
+interface Metadata {
+  title: string;
+  content: string;
 }
 
 export const TERM_AND_CONDITION_MODAL_ID = 'TERM_AND_CONDITION_MODAL_ID';
 const modalId = TERM_AND_CONDITION_MODAL_ID;
 
 function Component (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { className = '', onCancel } = props;
+  const { className = '', metadata, onCancel } = props;
 
   useEffect(() => {
     preloadImages([
@@ -37,21 +44,18 @@ function Component (props: Props): React.ReactElement<Props> {
       id={modalId}
       onCancel={onCancel}
     >
-      <div className={'__cancel-button-header'} onClick={onCancel}></div>
-      <div className={'__modal-title'}>{t('Lorem ipsum')}</div>
+      <div
+        className={'__cancel-button-header'}
+        onClick={onCancel}
+      ></div>
+      <div className={'__modal-title'}>{t(`${metadata?.title || ''}`)}</div>
 
       <div className={'__modal-description'}>
-        {t('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
-          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ' +
-          'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n' +
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' +
-          'dolore magna tempor incididunt ut labore et dolore magna tempor incididunt')}</div>
-      <div className={'__modal-description'}>
-        {t('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
-          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ' +
-          'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n' +
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' +
-          'dolore magna tempor incididunt ut labore et dolore magna tempor incididunt')}</div>
+        <ContentGenerator
+          className={'__content-wrapper'}
+          content={metadata?.content || ''}
+        ></ContentGenerator>
+      </div>
 
       <div className='__buttons-container'>
         <MythButton
@@ -71,6 +75,12 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
     paddingLeft: 16,
     paddingRight: 16,
 
+    '.__modal-description .__content-wrapper': {
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column'
+    },
+
     '&.ant-sw-modal.ant-sw-modal': {
       justifyContent: 'flex-start',
       alignItems: 'center',
@@ -85,7 +95,10 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
     '.ant-sw-modal-content.ant-sw-modal-content': {
       borderRadius: 0,
       maxWidth: 370,
+      maxHeight: 484,
       paddingTop: 24,
+      paddingBottom: 24,
+      height: 'auto',
       backgroundImage: 'url(/images/mythical/leaderboard-terms-conditions-bg.png)',
       backgroundSize: '100% 100%',
       backgroundRepeat: 'no-repeat',
@@ -178,7 +191,7 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
 
       '.__button-background:before': {
         backgroundColor: token.colorWhite,
-        maskImage: 'url(/images/mythical/okay-button-background.png)',
+        maskImage: 'url(/images/mythical/okay-button-background.png)'
         // filter: 'drop-shadow(1.444px 2.167px 0px #000)'
       }
     }

diff --git a/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx
@@ -118,7 +118,7 @@ const Component = ({ className }: Props): React.ReactElement => {
         rightPartNode={
           (
             <button
-              className={'info-button hidden'}
+              className={'info-button'}
               onClick={openTermAndConditionModal}
             >
               <InfoIcon />
@@ -185,6 +185,7 @@ const Component = ({ className }: Props): React.ReactElement => {
       </div>
 
       <TermAndConditionModal
+        metadata={leaderboardInfo?.metadata || ''}
         onCancel={closeTermAndConditionModal}
         onOk={closeTermAndConditionModal}
       />

diff --git a/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx b/packages/extension-koni-ui/src/components/StaticContent/ContentGenerator.tsx
@@ -94,14 +94,62 @@ const Component = ({ className, content }: Props) => {
               onClick={onClickHyperLink(href)}
             >{children}</a>
           );
+        },
+        th (props) {
+          const { children, ...rest } = props;
+
+          return (
+            <th
+              {...rest}
+              className={'custom-th'}
+            >
+              {children}
+            </th>
+          );
+        },
+        thead (props) {
+          const { children, ...rest } = props;
+
+          return (
+            <thead
+              {...rest}
+              className={'custom-thead'}
+            >
+              {children}
+            </thead>
+          );
+        },
+        table (props) {
+          const { children, ...rest } = props;
+
+          return (
+            <table
+              {...rest}
+              className={'custom-table'}
+            >
+              {children}
+            </table>
+          );
+        },
+        td (props) {
+          const { children, ...rest } = props;
+
+          return (
+            <td
+              {...rest}
+              className={'custom-td'}
+            >
+              {children}
+            </td>
+          );
         }
       }}
       remarkPlugins={[gfm]}
     >{content}</ReactMarkdown>
   );
 };
 
-const ContentGenerator = styled(Component)<Props>(({ theme: { token } }: Props) => {
+const ContentGenerator = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
   return {
     '.custom-body': {
       color: token.colorWhite,
@@ -134,6 +182,21 @@ const ContentGenerator = styled(Component)<Props>(({ theme: { token } }: Props)
       paddingInlineStart: 24,
       marginBottom: 0
     },
+    '.custom-th': {
+      paddingLeft: 8,
+      paddingRight: 8,
+      border: `1px solid ${extendToken.mythColorGray1}`
+    },
+    '.custom-thead': {
+      paddingLeft: 8,
+      paddingRight: 8
+    },
+    '.custom-td': {
+      border: `1px solid ${extendToken.mythColorGray1}`
+    },
+    '.custom-table': {
+      marginTop: 12
+    },
     '.custom-img': {
       marginTop: 4,
       marginBottom: 4