Skip to content

Commit

Permalink
chore: update ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@camewell071
camewell071 committed Feb 1, 2024
1 parent dbbbbb8 commit 579a0e7
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 90 deletions.
83 changes: 83 additions & 0 deletions src/modules/PublicSale/BuyForm/UserLoggedAvatar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { isAddress } from '@ethersproject/address';
import { validate } from 'bitcoin-address-validation';
import React from 'react';
import { Flex, Text } from '@chakra-ui/react';
import s from '@/modules/PublicSale/BuyForm/styles.module.scss';
import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
import Image from 'next/image';
import { CDN_URL_ICONS } from '@/config';
import Avatar from '@/components/Avatar';
import { getUrlAvatarTwitter } from '@/utils/twitter';
import { useAppSelector } from '@/stores/hooks';
import { userSelector } from '@/stores/states/user/selector';

const IMAGE_SIZE = 14;

const UserLoggedAvatar = () => {
const user = useAppSelector(userSelector)
const renderUser = () => {
if (!user) return '';
const isEVM = isAddress(user.twitter_id);
const isBTC = validate(user.twitter_id);
let component: React.ReactNode | undefined = undefined;
if (user.twitter_id && (isEVM || isBTC)) {
component = (
<Flex
className={s.profileBox_content}
onClick={() => {
if (isEVM) {
window.open(`https://etherscan.io/address/${user?.twitter_id}`)
} else {
window.open(`https://mempool.space/address/${user?.twitter_id}`)
}
}}>
{isEVM ? (
<Jazzicon diameter={IMAGE_SIZE} seed={jsNumberForAddress(user?.twitter_id || "")} />
) : (
<Image src={`${CDN_URL_ICONS}/ic-btc-2.svg`} alt="ic bitcoin" width={IMAGE_SIZE} height={IMAGE_SIZE} />
)}
{/*<Text color="black" fontSize="14px" fontWeight="500">{ellipsisCenter({ str: user.twitter_id })}</Text>*/}
</Flex>
)
} else if (user.twitter_id) {
component = (
<Flex
className={s.profileBox_content}
onClick={() => {
setTimeout(() => {
window.open(`https://twitter.com/${user?.twitter_username}`)
})
}}
>
<Avatar
url={getUrlAvatarTwitter(
user?.twitter_avatar as string,
'normal',
)}
address={''}
width={IMAGE_SIZE}
name={user.twitter_name || user.twitter_username || ''}
/>
{/*<Text color="black" fontSize="14px" fontWeight="500">{formatString(user.twitter_name, 12)}</Text>*/}
</Flex>
)
}

if (component) {
return (
<Flex className={s.profileBox}>
{component}
</Flex>
)
}
}

if (!user) return <></>;
return (
<Flex>
{renderUser()}
</Flex>
)
}

export default UserLoggedAvatar;
65 changes: 5 additions & 60 deletions src/modules/PublicSale/BuyForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import Avatar from '@/components/Avatar';
import { getUrlAvatarTwitter } from '@/utils/twitter';
import Image from 'next/image';
import { CDN_URL_ICONS } from '@/config';
import UserLoggedAvatar from '@/modules/PublicSale/BuyForm/UserLoggedAvatar';

interface FormValues {
tokenAmount: string;
Expand Down Expand Up @@ -72,7 +73,6 @@ const Column = forwardRef((props: IColumnProps, ref: any) => {
const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
const cachedTotalUSD =
window.localStorage.getItem('LAST_TOTAL_USDT_NON_BOOST') || '0';
const user = useAppSelector(userSelector)

const [isCreating, setIsCreating] = useState(false);
const [showQrCode, setShowQrCode] = useState(false);
Expand Down Expand Up @@ -168,62 +168,6 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
}));
};

const renderUser = () => {
if (!user) return '';
const isEVM = isAddress(user.twitter_id);
const isBTC = validate(user.twitter_id);
let component: React.ReactNode | undefined = undefined;
if (user.twitter_id && (isEVM || isBTC)) {
component = (
<Flex
className={s.profileBox_content}
onClick={() => {
if (isEVM) {
window.open(`https://etherscan.io/address/${user?.twitter_id}`)
} else {
window.open(`https://mempool.space/address/${user?.twitter_id}`)
}
}}>
{isEVM ? (
<Jazzicon diameter={32} seed={jsNumberForAddress(user?.twitter_id || "")} />
) : (
<Image src={`${CDN_URL_ICONS}/ic-btc-2.svg`} alt="ic bitcoin" width={32} height={32} />
)}
<Text color="black" fontSize="14px" fontWeight="500">{ellipsisCenter({ str: user.twitter_id })}</Text>
</Flex>
)
} else if (user.twitter_id) {
component = (
<Flex
className={s.profileBox_content}
onClick={() => {
setTimeout(() => {
window.open(`https://twitter.com/${user?.twitter_username}`)
})
}}
>
<Avatar
url={getUrlAvatarTwitter(
user?.twitter_avatar as string,
'normal',
)}
address={''}
width={32}
name={user.twitter_name || user.twitter_username || ''}
/>
<Text color="black" fontSize="14px" fontWeight="500">{formatString(user.twitter_name, 12)}</Text>
</Flex>
)
}

if (component) {
return (
<Flex className={s.profileBox}>
{component}
</Flex>
)
}
}

const ContributorBlock = forwardRef((props: any, ref: any) => {
const { className, ...rest } = props;
Expand All @@ -242,9 +186,11 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
fontSize={20}
lineHeight={1}
fontWeight={400}
color={'rgba(0,0,0,0.7)'}
gap={1} alignItems={"center"}
color="rgba(0,0,0,0.7)"
gap={1}
alignItems="center"
>
<UserLoggedAvatar />
Your contribution
<AuthForBuyV2
renderWithoutLogin={(onClick: any) => (
Expand Down Expand Up @@ -380,7 +326,6 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
</Text>
</Flex>
</Flex>
{renderUser()}
</Flex>
<Box mt={'24px'} />
<div className={s.grid}>
Expand Down
7 changes: 1 addition & 6 deletions src/modules/PublicSale/BuyForm/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,16 +269,11 @@

.profileBox {
display: flex;
padding: 4px 8px;
justify-content: center;
border-radius: 100px;
border: 1px solid #ECECEC;
background: #F6F6F6;
border: 1px solid rgba(1, 1, 1, 0.3);
height: fit-content;
width: fit-content;
@include is-mobile {
padding: 4px 16px;
}
&_content {
gap: 8px;
align-items: center;
Expand Down
41 changes: 17 additions & 24 deletions src/modules/PublicSale/components/contributorInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,32 @@ import s from './styles.module.scss';
import HorizontalItem from '@/components/HorizontalItem';
import React from 'react';
import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
import { formatCurrency } from '@/utils/format';
import { ellipsisCenter, formatCurrency, formatString } from '@/utils/format';
import { MAX_DECIMAL, MIN_DECIMAL } from '@/constants/constants';
import { useAppSelector } from '@/stores/hooks';
import { userSelector } from '@/stores/states/user/selector';
import { isAddress } from '@ethersproject/address';
import { validate } from 'bitcoin-address-validation';

const ContributorInfo = ({ data }: {data?: ILeaderBoardPoint}) => {
const user = useAppSelector(userSelector)
const isEVM = isAddress(user?.twitter_id || "");
const isBTC = validate(user?.twitter_id || "");

const ContributorInfo = ({data}: {data?: ILeaderBoardPoint}) => {
return (
<Flex direction={'column'} w={'284px'} gap={3} className={s.container}>
<HorizontalItem className={s.rowData} color={"#000000"} label={'USER'} value={data?.twitter_name} />
{!!user && (isEVM || isBTC) ? (
<HorizontalItem className={s.rowData} color={"#000000"} label="ADDRESS" value={ellipsisCenter({ str: user?.twitter_id, limit: 6 })} />
) : (
<HorizontalItem className={s.rowData} color={"#000000"} label={'USER'} value={formatString(data?.twitter_name, 16)} />
)}
<HorizontalItem className={s.rowData} color={"#000000"} label={'RANK'} value={formatCurrency(data?.ranking, 0, 0, 'BTC', true)} />
{/*<HorizontalItem className={s.rowData} label={'CONTRIBUTION'} value={`$${formatCurrency(data?.usdt_value, MIN_DECIMAL, MIN_DECIMAL, 'BTC', true)}`} />*/}
<HorizontalItem className={s.rowData} color={"#000000"} label={'ALLOCATION'} value={
<Flex gap={1}>
<Flex gap={1} flexDirection="column">
<Text color={'#FF5312'}>{formatCurrency(data?.bvm_balance, MIN_DECIMAL, MAX_DECIMAL)} BVM</Text>
<Text color={'#000000'}>({formatCurrency(data?.bvm_percent, MIN_DECIMAL, MIN_DECIMAL)}%)</Text>
</Flex>
} />
{/*<HorizontalItem className={s.rowData} label={'BOOST'} value={
<Flex gap={1} alignItems={'center'}>
<svg width='14' height='20' viewBox='0 0 14 20' fill='none'
xmlns='http://www.w3.org/2000/svg'>
<path
d='M13.6663 8.18093H8.21179L9.42391 0.908203L0.333008 11.8173H5.78755L4.57543 19.09L13.6663 8.18093Z'
fill='url(#paint0_linear_29823_6261)' />
<defs>
<linearGradient id='paint0_linear_29823_6261' x1='0.333008' y1='9.99911' x2='13.6663'
y2='9.99911' gradientUnits='userSpaceOnUse'>
<stop stop-color='#007659' />
<stop offset='1' stop-color='#35CCA6' />
</linearGradient>
</defs>
</svg>
<Text fontSize={'16px'} fontWeight={'500'} className={s.boost}>{`${formatCurrency(data?.boost, MIN_DECIMAL, MIN_DECIMAL, 'BTC', true)}%`}</Text>
</Flex>
} />*/}
}/>
</Flex>
);
};
Expand Down

0 comments on commit 579a0e7

Please sign in to comment.