[Issue-1967] Update responsive

Koniverse · Oct 19, 2023 · b4b764a · b4b764a
1 parent a667579
commit b4b764a
Show file tree

Hide file tree

Showing 19 changed files with 184 additions and 92 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/EarningDone/Content/index.tsx b/packages/extension-koni-ui/src/Popup/EarningDone/Content/index.tsx
@@ -3,12 +3,14 @@
 
 import { ExtrinsicStatus } from '@subwallet/extension-base/background/KoniTypes';
 import { UnlockDotTransactionNft } from '@subwallet/extension-base/types';
-import { CloseIcon, Layout, SocialGroup } from '@subwallet/extension-koni-ui/components';
+import { Layout, SocialGroup } from '@subwallet/extension-koni-ui/components';
 import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
 import { useSelector } from '@subwallet/extension-koni-ui/hooks';
 import { unlockDotCheckSubscribe } from '@subwallet/extension-koni-ui/messaging/campaigns';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { ButtonProps, Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
+import { TwitterLogo } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -74,6 +76,85 @@ const Component: React.FC<Props> = (props: Props) => {
     navigate('/home/earning/');
   }, [navigate]);
 
+  const shareOnTwitter = useCallback(() => {
+    // TODO: add callback
+  }, []);
+
+  const contactUs = useCallback(() => {
+    // TODO: add callback
+  }, []);
+
+  const goToNft = useCallback(() => {
+    navigate('/home/nfts/collections');
+  }, [navigate]);
+
+  const rightFooterButton = useMemo((): ButtonProps | undefined => {
+    if (isWebUI) {
+      return undefined;
+    }
+
+    switch (status) {
+      case ProcessStatus.PROCESSING:
+        return undefined;
+      case ProcessStatus.FAIL:
+        return {
+          block: true,
+          onClick: backToEarning,
+          schema: 'secondary',
+          children: t('Back to Earning')
+        };
+      case ProcessStatus.SUCCESS:
+        return {
+          block: true,
+          onClick: viewInHistory,
+          schema: 'secondary',
+          children: t('View transaction')
+        };
+    }
+  }, [backToEarning, isWebUI, status, t, viewInHistory]);
+
+  const leftFooterButton = useMemo((): ButtonProps | undefined => {
+    if (isWebUI) {
+      return undefined;
+    }
+
+    switch (status) {
+      case ProcessStatus.PROCESSING:
+        return undefined;
+      case ProcessStatus.FAIL:
+        return {
+          block: true,
+          onClick: viewInHistory,
+          schema: 'primary',
+          children: t('View transaction')
+        };
+
+      case ProcessStatus.SUCCESS: {
+        if (nftData?.nftImage) {
+          return {
+            block: true,
+            icon: (
+              <Icon
+                phosphorIcon={TwitterLogo}
+                weight='fill'
+              />
+            ),
+            schema: 'primary',
+            onClick: shareOnTwitter,
+            children: t('Share to Twitter')
+          };
+        } else {
+          return {
+            block: true,
+            onClick: contactUs,
+            schema: 'primary',
+            children: t('Contact us')
+          };
+        }
+      }
+    }
+  }, [contactUs, isWebUI, nftData?.nftImage, shareOnTwitter, status, t, viewInHistory]);
+
   useEffect(() => {
     let unmount = false;
 
@@ -95,22 +176,8 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <Layout.WithSubHeaderOnly
       className={className}
-      {...(!isWebUI
-        ? {
-          leftFooterButton: {
-            block: true,
-            onClick: viewInHistory,
-            children: t('View transaction')
-          },
-          rightFooterButton: {
-            block: true,
-            onClick: backToEarning,
-            children: t('Back to Earning')
-          },
-          subHeaderLeft: <CloseIcon />
-        }
-        : {}
-      )}
+      leftFooterButton={leftFooterButton}
+      rightFooterButton={rightFooterButton}
       title={t('Earning result')}
     >
       <div className={CN('content-container', {
@@ -124,12 +191,22 @@ const Component: React.FC<Props> = (props: Props) => {
         }
         {
           status === ProcessStatus.FAIL && (
-            <EarningDoneFail />
+            <EarningDoneFail
+              backToEarning={backToEarning}
+              viewInHistory={viewInHistory}
+            />
           )
         }
         {
           status === ProcessStatus.SUCCESS && (
-            <EarningDoneSuccess url={nftData?.nftImage || ''} />
+            <EarningDoneSuccess
+              chain={chain}
+              contactUs={contactUs}
+              goToNft={goToNft}
+              shareOnTwitter={shareOnTwitter}
+              url={nftData?.nftImage || ''}
+              viewInHistory={viewInHistory}
+            />
           )
         }
       </div>

diff --git a/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Fail.tsx b/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Fail.tsx
@@ -7,36 +7,21 @@ import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { Button, PageIcon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { XCircle } from 'phosphor-react';
-import React, { useCallback, useContext } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-type Props = ThemeProps;
+interface Props extends ThemeProps {
+  viewInHistory: VoidFunction;
+  backToEarning: VoidFunction;
+}
 
 const Component: React.FC<Props> = (props: Props) => {
-  const { className } = props;
-  const { chain, transactionId } = useParams<{chain: string, transactionId: string}>();
-  const navigate = useNavigate();
+  const { backToEarning, className, viewInHistory } = props;
 
   const { isWebUI } = useContext(ScreenContext);
 
   const { t } = useTranslation();
 
-  const viewInHistory = useCallback(
-    () => {
-      if (chain && transactionId) {
-        navigate(`/home/history/${chain}/${transactionId}`);
-      } else {
-        navigate('/home/history');
-      }
-    },
-    [chain, transactionId, navigate]
-  );
-
-  const backToEarning = useCallback(() => {
-    navigate('/home/earning/');
-  }, [navigate]);
-
   return (
     <div className={CN(className)}>
       <div className='page-icon'>

diff --git a/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Processing.tsx b/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Processing.tsx
@@ -80,12 +80,15 @@ const EarningDoneProcessing = styled(Component)<Props>(({ theme: { token } }: Pr
     },
 
     '.description': {
-      paddingLeft: token.paddingXS,
-      paddingRight: token.paddingXS,
       color: token.colorTextDescription,
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,
-      fontWeight: token.bodyFontWeight
+      fontWeight: token.bodyFontWeight,
+      padding: `0 ${token.size}px`,
+
+      '.web-ui-enable &': {
+        padding: `0 ${token.sizeXS}px`
+      }
     }
   };
 });

diff --git a/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Success.tsx b/packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Success.tsx
@@ -1,7 +1,8 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { baseParseIPFSUrl } from '@subwallet/extension-base/utils';
+import { YieldPoolType } from '@subwallet/extension-base/background/KoniTypes';
+import { baseParseIPFSUrl, detectTranslate } from '@subwallet/extension-base/utils';
 import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
 import { useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -10,18 +11,20 @@ import CN from 'classnames';
 import { TwitterLogo } from 'phosphor-react';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 interface Props extends ThemeProps {
+  chain?: string;
+  contactUs: VoidFunction;
+  goToNft: VoidFunction;
+  shareOnTwitter: VoidFunction;
   url: string;
+  viewInHistory: VoidFunction;
 }
 
 const Component: React.FC<Props> = (props: Props) => {
-  const { className, url } = props;
-  const { chain, transactionId } = useParams<{chain: string, transactionId: string}>();
+  const { chain, className, contactUs, goToNft, shareOnTwitter, url, viewInHistory } = props;
 
-  const navigate = useNavigate();
   const { t } = useTranslation();
 
   const { isWebUI } = useContext(ScreenContext);
@@ -32,37 +35,14 @@ const Component: React.FC<Props> = (props: Props) => {
 
   const [imageDone, setImageDone] = useState(false);
 
-  const viewInHistory = useCallback(
-    () => {
-      if (chain && transactionId) {
-        navigate(`/home/history/${chain}/${transactionId}`);
-      } else {
-        navigate('/home/history');
-      }
-    },
-    [chain, transactionId, navigate]
-  );
-
-  const shareOnTwitter = useCallback(() => {
-    // TODO: add callback
-  }, []);
-
-  const contactUs = useCallback(() => {
-    // TODO: add callback
-  }, []);
-
-  const goToNft = useCallback(() => {
-    navigate('/home/nfts/collections');
-  }, [navigate]);
-
   const onImageLoad = useCallback(() => {
     setImageDone(true);
   }, []);
 
   return (
     <div className={CN(className)}>
       {
-        url && (
+        url && isWebUI && (
           <img
             alt='success-gif'
             className={CN('success-image')}
@@ -86,7 +66,11 @@ const Component: React.FC<Props> = (props: Props) => {
                 ),
                 span: <span />
               }}
-              i18nKey={'<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>'}
+              i18nKey={
+                pool?.type !== YieldPoolType.LENDING
+                  ? detectTranslate('<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>')
+                  : detectTranslate('<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>')
+              }
               values={{
                 poolName: pool?.name || ''
               }}
@@ -260,6 +244,11 @@ const EarningDoneSuccess = styled(Component)<Props>(({ theme: { token } }: Props
       lineHeight: token.lineHeightHeading2,
       fontWeight: token.fontWeightStrong,
       color: token.colorSecondary,
+      padding: `0 ${token.size}px`,
+
+      '.web-ui-enable &': {
+        padding: `0 ${token.sizeXS}px`
+      },
 
       '&.warn': {
         color: token.colorWarning,
@@ -277,16 +266,24 @@ const EarningDoneSuccess = styled(Component)<Props>(({ theme: { token } }: Props
       flexDirection: 'row',
       gap: token.sizeXXS,
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      padding: `0 ${token.size}px`,
+
+      '.web-ui-enable &': {
+        padding: `0 ${token.sizeXS}px`
+      }
     },
 
     '.description': {
-      paddingLeft: token.paddingXS,
-      paddingRight: token.paddingXS,
       color: token.colorTextDescription,
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,
-      fontWeight: token.bodyFontWeight
+      fontWeight: token.bodyFontWeight,
+      padding: `0 ${token.size}px`,
+
+      '.web-ui-enable &': {
+        padding: `0 ${token.sizeXS}px`
+      }
     },
 
     '.highlight': {

diff --git a/packages/extension-koni/public/locales/en/translation.json b/packages/extension-koni/public/locales/en/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }
diff --git a/packages/extension-koni/public/locales/ja/translation.json b/packages/extension-koni/public/locales/ja/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }
diff --git a/packages/extension-koni/public/locales/ru/translation.json b/packages/extension-koni/public/locales/ru/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }
diff --git a/packages/extension-koni/public/locales/vi/translation.json b/packages/extension-koni/public/locales/vi/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }
diff --git a/packages/extension-koni/public/locales/zh/translation.json b/packages/extension-koni/public/locales/zh/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }
diff --git a/packages/web-runner/public/locales/en/translation.json b/packages/web-runner/public/locales/en/translation.json
@@ -1043,5 +1043,7 @@
   "Watch any wallet": "",
   "Enter address": "",
   "Add watch-only wallet": "",
-  "{{name}} must be equal or greater than {{minString}}": ""
+  "{{name}} must be equal or greater than {{minString}}": "",
+  "<main>Yay! You staked</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": "",
+  "<main>Yay! You supplied</main><sub><span>in</span><logo /><span>{{poolName}}</span></sub>": ""
 }