Merge branch 'webapp' into koni/dev/issue-2097

packages/extension-koni-ui/package.json

@@ -51,6 +51,7 @@
     "classnames": "^2.3.2",
     "file-saver": "^2.0.5",
     "i18next": "^21.9.2",
+    "mobile-detect": "^1.4.5",
     "moment": "^2.29.4",
     "phosphor-react": "^1.4.1",
     "querystring": "^0.2.1",

packages/extension-koni-ui/src/Popup/Account/NewSeedPhrase.tsx

@@ -127,7 +127,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   };
 
   useEffect(() => {
-    if (isPopup && isFirefox() && hasMasterPassword && !isOpenWindowRef.current) {
+    if (isPopup && isFirefox && hasMasterPassword && !isOpenWindowRef.current) {
       isOpenWindowRef.current = true;
       windowOpen({ allowedPath: '/accounts/new-seed-phrase' }).then(window.close).catch(console.log);
     }

packages/extension-koni-ui/src/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult.tsx

@@ -77,7 +77,6 @@ const getTableItems = (
   const priceId = relayChainSlug === 'polkadot' ? 'polkadot' : 'kusama';
   const symbol = relayChainSlug === 'polkadot' ? 'DOT' : 'KSM';
   const price = priceMap[priceId] || 0;
-  const dateNow = Date.now();
 
   contributionsMap[relayChainSlug].forEach((c) => {
     if (!crowdloanFundInfoMap[c.fund_id]) {
@@ -90,7 +89,7 @@ const getTableItems = (
       return;
     }
 
-    if (!fundInfo.endTime || new Date(fundInfo.endTime).getTime() < dateNow) {
+    if (!fundInfo.endTime) {
       return;
     }
 
@@ -127,10 +126,6 @@ const getAcalaTableItem = (
     return;
   }
 
-  if (new Date(fundInfo.endTime).getTime() < Date.now()) {
-    return;
-  }
-
   const price = priceMap.polkadot || 0;
 
   const contributedValue = getBalanceValue(value || '0', 10);

packages/extension-koni-ui/src/Popup/EarningDone/Content/index.tsx

@@ -8,17 +8,17 @@ import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenConte
 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 { openInNewTab } from '@subwallet/extension-koni-ui/utils';
+import { Button, ButtonProps, Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { TwitterLogo } from 'phosphor-react';
+import { ArrowCircleRight, TwitterLogo } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { TwitterShareButton } from 'react-share';
 import styled from 'styled-components';
 
 import { EarningDoneFail, EarningDoneProcessing, EarningDoneSuccess } from './parts';
-import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
 
 type Props = ThemeProps;
 
@@ -139,6 +139,10 @@ const Component: React.FC<Props> = (props: Props) => {
     openInNewTab('https://linktr.ee/subwallet.app')();
   }, []);
 
+  const joinQuest = useCallback(() => {
+    openInNewTab('https://airlyft.one/subwallet/stake-dot-earn-many-by-subwallet')();
+  }, []);
+
   const goToNft = useCallback(() => {
     navigate('/home/nfts/collections');
   }, [navigate]);
@@ -158,15 +162,20 @@ const Component: React.FC<Props> = (props: Props) => {
           schema: 'secondary',
           children: t('Back to Earning')
         };
+
       case ProcessStatus.SUCCESS:
-        return {
-          block: true,
-          onClick: viewInHistory,
-          schema: 'secondary',
-          children: t('View transaction')
-        };
+        if (nftData?.nftImage) {
+          return undefined;
+        } else {
+          return {
+            block: true,
+            onClick: viewInHistory,
+            schema: 'secondary',
+            children: t('View transaction')
+          };
+        }
     }
-  }, [backToEarning, isWebUI, status, t, viewInHistory]);
+  }, [backToEarning, isWebUI, nftData?.nftImage, status, t, viewInHistory]);
 
   const leftFooterButton = useMemo((): ButtonProps | undefined => {
     if (isWebUI) {
@@ -186,19 +195,7 @@ const Component: React.FC<Props> = (props: Props) => {
 
       case ProcessStatus.SUCCESS: {
         if (nftData?.nftImage) {
-          return {
-            block: true,
-            icon: (
-              <Icon
-                phosphorIcon={TwitterLogo}
-                weight='fill'
-              />
-            ),
-            schema: 'primary',
-            onClick: shareOnTwitter,
-            disabled: !enableShare,
-            children: t('Share to Twitter')
-          };
+          return undefined;
         } else {
           return {
             block: true,
@@ -209,7 +206,64 @@ const Component: React.FC<Props> = (props: Props) => {
         }
       }
     }
-  }, [contactUs, isWebUI, nftData?.nftImage, shareOnTwitter, status, t, viewInHistory, enableShare]);
+  }, [contactUs, isWebUI, nftData?.nftImage, status, t, viewInHistory]);
+
+  const footer = useMemo(() => {
+    if (isWebUI) {
+      return undefined;
+    }
+
+    switch (status) {
+      case ProcessStatus.PROCESSING:
+      case ProcessStatus.FAIL:
+        return undefined;
+
+      case ProcessStatus.SUCCESS: {
+        if (nftData?.nftImage) {
+          return (
+            <div className='footer-button-container'>
+              <Button
+                block={true}
+                disabled={!enableShare}
+                icon={(
+                  <Icon
+                    phosphorIcon={ArrowCircleRight}
+                    weight='fill'
+                  />
+                )}
+                onClick={joinQuest}
+              >
+                {t('Join quest now')}
+              </Button>
+              <Button
+                block={true}
+                disabled={!enableShare}
+                icon={(
+                  <Icon
+                    phosphorIcon={TwitterLogo}
+                    weight='fill'
+                  />
+                )}
+                onClick={shareOnTwitter}
+                schema='secondary'
+              >
+                {t('Share to Twitter')}
+              </Button>
+              <Button
+                block={true}
+                onClick={viewInHistory}
+                schema='secondary'
+              >
+                {t('View transaction')}
+              </Button>
+            </div>
+          );
+        } else {
+          return undefined;
+        }
+      }
+    }
+  }, [enableShare, isWebUI, joinQuest, nftData?.nftImage, shareOnTwitter, status, t, viewInHistory]);
 
   useEffect(() => {
     let unmount = false;
@@ -232,8 +286,10 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <Layout.WithSubHeaderOnly
       className={className}
+      footer={footer}
       leftFooterButton={leftFooterButton}
       rightFooterButton={rightFooterButton}
+      showFooter={!!footer}
       title={t('Earning result')}
     >
       <div className={CN('content-container', {
@@ -260,6 +316,7 @@ const Component: React.FC<Props> = (props: Props) => {
               contactUs={contactUs}
               enableShare={enableShare}
               goToNft={goToNft}
+              joinQuest={joinQuest}
               shareOnTwitter={shareOnTwitter}
               url={nftData?.nftImage || ''}
               viewInHistory={viewInHistory}
@@ -325,6 +382,13 @@ const EarningDoneContent = styled(Component)<Props>(({ theme: { extendToken, tok
       }
     },
 
+    '.footer-button-container': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: token.size,
+      padding: `${token.padding}px 0`
+    },
+
     '.ant-sw-screen-layout-footer-button-container': {
       flexDirection: 'column',
       padding: `0 ${token.padding}px`,

packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Success.tsx

@@ -9,7 +9,7 @@ import { useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks'
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, Button, Icon, Image, Logo } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { TwitterLogo } from 'phosphor-react';
+import { ArrowCircleRight, TwitterLogo } from 'phosphor-react';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
@@ -19,13 +19,14 @@ interface Props extends ThemeProps {
   contactUs: VoidFunction;
   goToNft: VoidFunction;
   shareOnTwitter: VoidFunction;
+  joinQuest: VoidFunction;
   url: string;
   enableShare: boolean;
   viewInHistory: VoidFunction;
 }
 
 const Component: React.FC<Props> = (props: Props) => {
-  const { chain, className, contactUs, enableShare, goToNft, shareOnTwitter, url, viewInHistory } = props;
+  const { chain, className, contactUs, enableShare, goToNft, joinQuest, shareOnTwitter, url, viewInHistory } = props;
 
   const { t } = useTranslation();
 
@@ -128,7 +129,7 @@ const Component: React.FC<Props> = (props: Props) => {
                     />
                   )
                 }}
-                i18nKey={'T&C: From Oct 24 to Nov 7, each address that initiates transactions on each protocol on the SubWallet Earning Dashboard is eligible for 01 free NFT. Check your NFT <highlight>here</highlight>!'}
+                i18nKey={'T&C: From Oct 24 to Nov 7, each address that initiates transactions on each protocol on the SubWallet Earning Dashboard is eligible for 01 free NFT. NFT holders can join quest on Airlyft to earn up to 10 USDT. Check your NFT <highlight>here</highlight>!'}
               />
             )
             : (
@@ -142,19 +143,37 @@ const Component: React.FC<Props> = (props: Props) => {
             {
               url
                 ? (
-                  <Button
-                    block={true}
-                    disabled={!enableShare}
-                    icon={(
-                      <Icon
-                        phosphorIcon={TwitterLogo}
-                        weight='fill'
-                      />
-                    )}
-                    onClick={shareOnTwitter}
-                  >
-                    {t('Share to Twitter')}
-                  </Button>
+                  (
+                    <div className='button-top'>
+                      <Button
+                        block={true}
+                        disabled={!enableShare}
+                        icon={(
+                          <Icon
+                            phosphorIcon={ArrowCircleRight}
+                            weight='fill'
+                          />
+                        )}
+                        onClick={joinQuest}
+                      >
+                        {t('Join quest now')}
+                      </Button>
+                      <Button
+                        block={true}
+                        disabled={!enableShare}
+                        icon={(
+                          <Icon
+                            phosphorIcon={TwitterLogo}
+                            weight='fill'
+                          />
+                        )}
+                        onClick={shareOnTwitter}
+                        schema='secondary'
+                      >
+                        {t('Share to Twitter')}
+                      </Button>
+                    </div>
+                  )
                 )
                 : (
                   <Button
@@ -240,6 +259,12 @@ const EarningDoneSuccess = styled(Component)<Props>(({ theme: { token } }: Props
       padding: `0 ${token.sizeXS}px`
     },
 
+    '.button-top': {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: token.size
+    },
+
     '.title': {
       fontSize: token.fontSizeHeading2,
       lineHeight: token.lineHeightHeading2,

packages/extension-koni-ui/src/Popup/Keyring/CreatePassword.tsx

@@ -1,6 +1,7 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
 import { AlertBox, InfoIcon, InstructionContainer, InstructionContentType, Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { CREATE_RETURN, REQUEST_CREATE_PASSWORD_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { DEFAULT_ROUTER_PATH } from '@subwallet/extension-koni-ui/constants/router';
@@ -49,7 +50,15 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   const navigate = useNavigate();
   const previousInfo = (useLocation().state || {}) as { prevPathname: string, prevState: any };
 
-  const { isNoAccount } = useSelector((state: RootState) => state.accountState);
+  const { accounts } = useSelector((state: RootState) => state.accountState);
+
+  const needMigrate = useMemo(
+    () => !!accounts
+      .filter((acc) => acc.address !== ALL_ACCOUNT_KEY && !acc.isExternal && !acc.isInjected)
+      .filter((acc) => !acc.isMasterPassword)
+      .length
+    , [accounts]
+  );
 
   const [returnPath, setReturnStorage] = useLocalStorage(CREATE_RETURN, DEFAULT_ROUTER_PATH);
 
@@ -132,10 +141,16 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   }, [inactiveModal]);
 
   useEffect(() => {
-    if (!isNoAccount && !isWebUI) {
+    if (needMigrate && !isWebUI) {
       activeModal(REQUEST_CREATE_PASSWORD_MODAL);
     }
-  }, [activeModal, isWebUI, isNoAccount]);
+  }, [activeModal, isWebUI, needMigrate]);
+
+  const onConfirmPasswordKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      form.submit();
+    }
+  }, [form]);
 
   useFocusFormItem(form, FormFieldName.PASSWORD, !checkActive(REQUEST_CREATE_PASSWORD_MODAL));
 
@@ -151,7 +166,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
             icon: FooterIcon
           }
           : undefined}
-        showBackButton={isNoAccount}
+        showBackButton={!needMigrate}
         subHeaderIcons={[
           {
             icon: <InfoIcon />,
@@ -208,6 +223,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
                 statusHelpAsTooltip={true}
               >
                 <Input
+                  onKeyDown={onConfirmPasswordKeyPress}
                   placeholder={t('Confirm password')}
                   type='password'
                 />