Skip to content

Commit

Permalink
[Issue-86] Update UI for invitation
Browse files Browse the repository at this point in the history
  • Loading branch information
lw committed Jul 26, 2024
1 parent 05ad95d commit ee60c43
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 46 deletions.
107 changes: 64 additions & 43 deletions packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo';
import { GameAccountAvatar, GamePoint, Layout } from '@subwallet/extension-koni-ui/components';
import { EmptyList, GameAccountAvatar, GamePoint, Layout } from '@subwallet/extension-koni-ui/components';
import GameAccount from '@subwallet/extension-koni-ui/components/Games/GameAccount';
import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
import { BookaAccount, ReferralRecord } from '@subwallet/extension-koni-ui/connector/booka/types';
Expand All @@ -13,7 +13,7 @@ import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { copyToClipboard, formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
import { Button, Icon } from '@subwallet/react-ui';
import CN from 'classnames';
import { Copy, Plus, UserCirclePlus } from 'phosphor-react';
import { Copy, Plus, UserCirclePlus, Users } from 'phosphor-react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';

Expand Down Expand Up @@ -208,7 +208,7 @@ const Component = ({ className }: Props): React.ReactElement => {
>
<div className='invitation-area'>
<div className='invitation-text'>
{t('Invite your friends and play together !')}
{t('Invite your friends and play together!')}
</div>

<div className='invitation-reward'>
Expand All @@ -221,45 +221,41 @@ const Component = ({ className }: Props): React.ReactElement => {
/>
</div>

{
account && (
<div className='invitation-buttons'>
<Button
block={true}
icon={(
<Icon
customSize={'20px'}
phosphorIcon={UserCirclePlus}
weight={'fill'}
/>
)}
onClick={inviteFriend}
schema={'primary'}
shape={'round'}
size={'xs'}
>
{t('Invite now')}
</Button>

<Button
block={true}
icon={(
<Icon
customSize={'20px'}
phosphorIcon={Copy}
weight={'fill'}
/>
)}
onClick={copyLink}
schema={'secondary'}
shape={'round'}
size={'xs'}
>
{t('Copy Link')}
</Button>
</div>
)
}
<div className='invitation-buttons'>
<Button
block={true}
icon={(
<Icon
customSize={'20px'}
phosphorIcon={UserCirclePlus}
weight={'fill'}
/>
)}
onClick={inviteFriend}
schema={'primary'}
shape={'round'}
size={'xs'}
>
{t('Invite now')}
</Button>

<Button
block={true}
icon={(
<Icon
customSize={'20px'}
phosphorIcon={Copy}
weight={'fill'}
/>
)}
onClick={copyLink}
schema={'secondary'}
shape={'round'}
size={'xs'}
>
{t('Copy Link')}
</Button>
</div>
</div>

<div
Expand All @@ -269,7 +265,7 @@ const Component = ({ className }: Props): React.ReactElement => {
{t('Your friends list')}
</div>

<div className={'friend-list-container'}>
<div className={CN('friend-list-container', { '-empty': !referralList.length })}>
{referralList.map((item, index) => (
<GameAccount
avatar={item.accountInfo.avatar}
Expand All @@ -279,6 +275,17 @@ const Component = ({ className }: Props): React.ReactElement => {
point={item.point}
/>
))}

{
!referralList.length && (
<EmptyList
className={'empty-list-block'}
emptyMessage={t('Please invite now')}
emptyTitle={t('You have no friends yet')}
phosphorIcon={Users}
/>
)
}
</div>
</div>
</Layout.WithSubHeaderOnly>
Expand Down Expand Up @@ -461,8 +468,22 @@ const Invite = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }:
paddingBottom: token.paddingXS
},

'.friend-list-container.-empty': {
flex: '0 1 auto',
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
marginBottom: token.margin
},

'.friend-item': {
marginBottom: token.marginXS
},

'.empty-list-block': {
paddingTop: 24,
paddingBottom: 24,
paddingLeft: token.paddingXS,
paddingRight: token.paddingXS
}
};
});
Expand Down
18 changes: 15 additions & 3 deletions packages/extension-koni-ui/src/components/Layout/base/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

import { Layout } from '@subwallet/extension-koni-ui/components';
import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
import { VISIT_INVITATION_SCREEN_FLAG } from '@subwallet/extension-koni-ui/constants';
import { CUSTOMIZE_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
import { useNotification } from '@subwallet/extension-koni-ui/hooks';
import { ButtonProps, Icon, ModalContext, Tooltip } from '@subwallet/react-ui';
Expand All @@ -11,6 +12,7 @@ import React, { useCallback, useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { useLocalStorage } from 'usehooks-ts';

type Props = {
children?: React.ReactNode;
Expand All @@ -28,6 +30,7 @@ type Props = {

const Component = ({ backgroundImages, backgroundStyle, children, className, onClickFilterIcon, onClickSearchIcon, onTabSelected, showFilterIcon, showGiftIcon, showSearchIcon, showTabBar }: Props) => {
const navigate = useNavigate();
const [isVisitedInvitationScreen, setIsVisitedInvitationScreen] = useLocalStorage(VISIT_INVITATION_SCREEN_FLAG, false);
// @ts-ignore
const { t } = useTranslation();
const { activeModal } = useContext(ModalContext);
Expand All @@ -40,7 +43,8 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, onC

const onOpenInvite = useCallback(() => {
navigate('/invite');
}, [navigate]);
setIsVisitedInvitationScreen(true);
}, [navigate, setIsVisitedInvitationScreen]);

const headerIcons = useMemo<ButtonProps[]>(() => {
const icons: ButtonProps[] = [];
Expand Down Expand Up @@ -81,7 +85,7 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, onC

<Tooltip
className={'invite-tooltip'}
open={true}
open={!isVisitedInvitationScreen}
overlayClassName={'tooltip-overlay'}
placement={'bottomRight'}
title={t('Invite your friend')}
Expand All @@ -91,12 +95,13 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, onC
</Tooltip>
</>
),
className: 'invite-button',
onClick: onOpenInvite
});
}

return icons;
}, [showFilterIcon, showSearchIcon, showGiftIcon, onClickFilterIcon, onOpenCustomizeModal, onClickSearchIcon, t, onOpenInvite]);
}, [showFilterIcon, showSearchIcon, showGiftIcon, onClickFilterIcon, onOpenCustomizeModal, onClickSearchIcon, isVisitedInvitationScreen, t, onOpenInvite]);

const onClickListIcon = useCallback(() => {
navigate('/settings/list');
Expand All @@ -123,5 +128,12 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, onC
};

export const Home = styled(Component)<LayoutBaseProps>(({ theme: { extendToken, token } }: LayoutBaseProps) => ({
'.invite-button': {
position: 'relative'
},

'.invite-tooltip': {
position: 'absolute',
right: 0
}
}));
1 change: 1 addition & 0 deletions packages/extension-koni-ui/src/constants/localStorage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,4 @@ export const APP_INSTRUCTION_DATA = 'static.instruction-data';
export const SHOW_APP_POPUP = 'static.show-app-popup';
export const LATEST_SESSION = 'general.latest-session';
export const UPGRADE_FIREFOX_VERSION = 'general.updated-version-firefox';
export const VISIT_INVITATION_SCREEN_FLAG = 'general.visit-invitation-screen-flag';

0 comments on commit ee60c43

Please sign in to comment.