Skip to content

Commit

Permalink
Merge pull request #4208 from CrocSwap/add-explore-buttons
Browse files Browse the repository at this point in the history 
add buttons to mobile account view
  • Loading branch information
@benwolski
benwolski authored Oct 11, 2024
2 parents 5f7de8e + e575d31 commit 5ce4589
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 31 deletions.
4 changes: 2 additions & 2 deletions src/App/components/PageHeader/UserMenu/LevelDropdown/LevelDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styles from './LevelDropdown.module.css'
import UserProfileCard from '../UserProfileCard';
import { UserXpDataIF } from '../../../../../contexts/UserDataContext';
import UserLevelDisplay from '../../../../../components/Global/LevelsCard/UserLevelDisplay';
interface LevelDropdownPropsIF {
interface propsIF {
ensName: string;
accountAddress: string;
handleCopyAddress: () => void;
Expand All @@ -11,7 +11,7 @@ interface LevelDropdownPropsIF {

}

export default function LevelDropdown(props: LevelDropdownPropsIF) {
export default function LevelDropdown(props: propsIF) {
const { ensName, handleCopyAddress, connectedUserXp, accountAddressFull } =
props;

Expand Down
7 changes: 3 additions & 4 deletions src/components/Global/LevelsCard/UserLevelDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ import { useContext } from 'react';
import { progressToNextLevel } from '../../../ambient-utils/api';
import { getFormattedNumber } from '../../../ambient-utils/dataLayer';

interface Props {
// xpData: UserXpDataIF
interface propsIF {
currentLevel: number | undefined;
globalPoints: number | undefined;
user: string;
isMobileDropdown?: boolean;
}
export default function UserLevelDisplay(props: Props) {
export default function UserLevelDisplay(props: propsIF) {
const { userAddress, resolvedAddressFromContext } =
useContext(UserDataContext);
const { currentLevel, globalPoints, user, isMobileDropdown } = props;
Expand All @@ -31,7 +30,7 @@ export default function UserLevelDisplay(props: Props) {
})
: '...';

const linkToNavigateTo = user
const linkToNavigateTo: string = user
? `/${user}/xp`
: resolvedAddressFromContext
? `/${resolvedAddressFromContext}/xp`
Expand Down
28 changes: 24 additions & 4 deletions ...onents/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,35 @@
color: var(--text1);
}

.deposit_button {
.button_bank {
display: flex;
flex-direction: column;
gap: 8px;
}

.button_bank > div {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.button_bank button {
font-size: 12px;
outline: none;
padding: 4px;
border-radius: 20px;
}

.dark_button {
background: transparent;
border: 1px solid var(--accent1);
color: var(--accent1);
padding: 4px;
border-radius: 20px;
min-width: 120px;
}

.logout_button {
background-color: var(--accent1);
border: 1px solid var(--accent1);
color: var(--text1);
}

@media only screen and (max-width: 768px) {
Expand Down
57 changes: 43 additions & 14 deletions src/components/Portfolio/PortfolioBanner/PortfolioBannerAccount/PortfolioBannerAccount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import useCopyToClipboard from '../../../../utils/hooks/useCopyToClipboard';
import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
import { getAvatarForProfilePage } from '../../../Chat/ChatRenderUtils';
import useChatApi from '../../../Chat/Service/ChatApi';
import { useNavigate } from 'react-router-dom';

interface propsIF {
ensName: string;
Expand Down Expand Up @@ -71,6 +72,8 @@ export default function PortfolioBannerAccount(props: propsIF) {
setUserProfileNFT,
setUserThumbnailNFT,
isUserConnected,
disconnectUser,
resolvedAddressFromContext
} = useContext<UserDataContextIF>(UserDataContext);

const { NFTData } = useContext<TokenBalanceContextIF>(TokenBalanceContext);
Expand All @@ -83,6 +86,8 @@ export default function PortfolioBannerAccount(props: propsIF) {
chainData: { blockExplorer },
} = useContext<CrocEnvContextIF>(CrocEnvContext);

const navigate = useNavigate();

const isSmallScreen: boolean = useMediaQuery('(max-width: 768px)');

const [showAccountDetails, setShowAccountDetails] =
Expand Down Expand Up @@ -209,7 +214,6 @@ export default function PortfolioBannerAccount(props: propsIF) {
: true,
)}
</div>

<div className={styles.wallet_info}>
<h3
className={styles.address_or_ens}
Expand All @@ -226,8 +230,8 @@ export default function PortfolioBannerAccount(props: propsIF) {
{addressToDisplay && addressToDisplay.length > 8
? trimString(addressToDisplay, 5, 3)
: addressToDisplay}
{addressToDisplay ? <FiCopy size={'12px'} /> : null}
{addressToDisplay ? (
{addressToDisplay && <FiCopy size={'12px'} />}
{addressToDisplay && (
<FiExternalLink
size={'12px'}
onClick={(e) => {
Expand All @@ -237,19 +241,44 @@ export default function PortfolioBannerAccount(props: propsIF) {
e.stopPropagation();
}}
/>
) : null}
)}
</div>
</div>

{isSmallScreen && isUserConnected && (
<button
className={styles.deposit_button}
onClick={() =>
setShowTabsAndNotExchange(!showTabsAndNotExchange)
}
>
Deposit/Withdraw
</button>
{
// differential view for small screens
// some items only appear when viewing your own page
isSmallScreen && (
<div className={styles.button_bank}>
<div>
<button className={styles.dark_button} onClick={() => {
const linkToNavigateTo: string = (ensName || userAddress)
? `/${ensName || userAddress}/xp`
: resolvedAddressFromContext
? `/${resolvedAddressFromContext}/xp`
: `/${userAddress}/xp`;
navigate(linkToNavigateTo);
}}>
Points
</button>
{
isUserConnected &&
<button
className={styles.logout_button}
onClick={() => disconnectUser()}
>
Log Out
</button>
}
</div>
{isUserConnected && <button
className={styles.dark_button}
onClick={() =>
setShowTabsAndNotExchange(!showTabsAndNotExchange)
}
>
Deposit / Withdraw
</button>}
</div>
)}
</div>

Expand Down
27 changes: 20 additions & 7 deletions src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
import medal from '../../../assets/images/icons/medal.svg';
import { AppStateContext } from '../../../contexts/AppStateContext';
import useMediaQuery from '../../../utils/hooks/useMediaQuery';
import { useLocation } from 'react-router-dom';

// interface for React functional component props
interface propsIF {
Expand Down Expand Up @@ -416,23 +417,35 @@ export default function PortfolioTabs(props: propsIF) {

const dataToUse = connectedAccountActive
? accountTabDataWithTokens
: accountTabDataWithoutTokens
: accountTabDataWithoutTokens;

const [activeTab, setActiveTab] = useState<string>('Transactions');
const location = useLocation();

// active tab rendered in DOM
const DEFAULT_TAB = 'Transactions';
const [activeTab, setActiveTab] = useState<string>(DEFAULT_TAB);

const renderTabContent = () => {
// allow the user to reach the Points tab through URL navigation
useEffect(() => {
if (location.pathname.includes('points')) {
setActiveTab('Points');
}
}, [location.pathname]);

// TODO: this file is changing state without changing URL, we should
// TODO: ... refactor to trigger a nav action and update state responsively

const renderTabContent = (): JSX.Element | null => {
const selectedTabData =dataToUse.find(
(tab) => tab.label === activeTab
);
return selectedTabData ? selectedTabData.content : null;
};


const mobileTabs = (
const mobileTabs: JSX.Element = (
<div className={styles.mobile_tabs_container}>
<div className={styles.mobile_tabs_button_container}>
{dataToUse.map((tab) => (
{dataToUse.filter((t) => t.label !== 'Points').map((tab) => (
<button
key={tab.label}
onClick={() => setActiveTab(tab.label)}
Expand All @@ -452,7 +465,7 @@ export default function PortfolioTabs(props: propsIF) {
);


if ( isSmallScreen) return mobileTabs
if ( isSmallScreen) return mobileTabs;
return (
<div className={styles.portfolio_tabs_container}>
<TabComponent
Expand Down
1 change: 1 addition & 0 deletions src/utils/hooks/useLinkGen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const BASE_URL_PATHS = {
tos: '/terms',
testpage: '/testpage',
account: '/account',
accountPoints: '/account/points',
privacy: '/privacy',
faq: '/faq',
faqPoints: '/faq/points',
Expand Down

0 comments on commit 5ce4589

Please sign in to comment.