Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Issue-2099] Update UI for earning done #2102

Merged
merged 1 commit into from
Oct 27, 2023
Merged

[Issue-2099] Update UI for earning done #2102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 88 additions & 24 deletions packages/extension-koni-ui/src/Popup/EarningDone/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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]);
Expand All @@ -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) {
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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', {
Expand All @@ -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}
Expand Down Expand Up @@ -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`,
Expand Down
57 changes: 41 additions & 16 deletions packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Success.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();

Expand Down Expand Up @@ -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>!'}
/>
)
: (
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/extension-koni-ui/src/components/Layout/base/Base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import SelectAccount from '../parts/SelectAccount';

export interface LayoutBaseProps extends Omit<
SwScreenLayoutProps,
'tabBarItems' | 'footer' | 'headerContent' | 'selectedTabBarItem'
'tabBarItems' | 'headerContent' | 'selectedTabBarItem'
>, ThemeProps {
children: React.ReactNode | React.ReactNode[];
showFooter?: boolean;
Expand All @@ -31,7 +31,7 @@ SwScreenLayoutProps,

const specialLanguages: Array<LanguageType> = ['ja', 'ru'];

const Component = ({ children, className, headerIcons, isSetTitleContext = true, onBack, showFooter, ...props }: LayoutBaseProps) => {
const Component = ({ children, className, footer, headerIcons, isSetTitleContext = true, onBack, showFooter, ...props }: LayoutBaseProps) => {
const { isWebUI } = useContext(ScreenContext);
const navigate = useNavigate();
const { goHome } = useDefaultNavigate();
Expand Down Expand Up @@ -155,7 +155,7 @@ const Component = ({ children, className, headerIcons, isSetTitleContext = true,
<SwScreenLayout
{...props}
className={CN(className, customClassName, { 'special-language': specialLanguages.includes(language) })}
footer={showFooter && <Footer />}
footer={showFooter && (footer || <Footer />)}
headerContent={props.showHeader && <SelectAccount />}
headerIcons={headerIcons}
onBack={onBack || defaultOnBack}
Expand Down