Skip to content

Commit

Permalink
Merge branch 'develop' into dependabot/npm_and_yarn/react-lottie-play…
Browse files Browse the repository at this point in the history 
…er-2.1.0
  • Loading branch information
@benwolski
benwolski authored Aug 5, 2024
2 parents 7430047 + 6e38e73 commit b111bf0
Show file tree
Hide file tree
Showing 12 changed files with 166 additions and 99 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"react-use-websocket": "^4.8.1",
"simplex-noise": "^4.0.1",
"styled-components": "6.0.3",
"vite": "^5.3.1",
"vite": "^5.3.5",
"vite-plugin-babel-macros": "^1.0.6",
"web-vitals": "^2.1.0"
},
Expand Down
75 changes: 50 additions & 25 deletions src/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,10 +232,6 @@ export default function App() {
path='xp-leaderboard'
element={<Portfolio isLevelsPage isRanksPage />}
/>
<Route
path='account/xp'
element={<Portfolio isLevelsPage />}
/>
<Route
path='account/transactions'
element={<Portfolio specificTab='transactions' />}
Expand All @@ -253,11 +249,37 @@ export default function App() {
element={<Portfolio specificTab='points' />}
/>
<Route
path='account/:address/points'
element={<Portfolio specificTab='points' />}
path='account/xp'
element={<Portfolio isLevelsPage />}
/>
<Route
path='/:address/points'
path='account/xp/history'
element={
<Portfolio isLevelsPage isViewMoreActive />
}
/>
<Route
path='account/:address'
element={<Portfolio />}
/>
<Route
path='account/:address/transactions'
element={<Portfolio specificTab='transactions' />}
/>
<Route
path='account/:address/limits'
element={<Portfolio specificTab='limits' />}
/>
<Route
path='account/:address/liquidity'
element={<Portfolio specificTab='liquidity' />}
/>
<Route
path='account/:address/xp'
element={<Portfolio isLevelsPage />}
/>
<Route
path='account/:address/points'
element={<Portfolio specificTab='points' />}
/>
<Route
Expand All @@ -266,20 +288,33 @@ export default function App() {
<Portfolio isLevelsPage isViewMoreActive />
}
/>
<Route path='/:address' element={<Portfolio />} />
<Route
path='account/xp/history'
element={
<Portfolio isLevelsPage isViewMoreActive />
}
path='/:address/transactions'
element={<Portfolio specificTab='transactions' />}
/>
<Route
path='account/:address'
element={<Portfolio />}
path='/:address/limits'
element={<Portfolio specificTab='limits' />}
/>
<Route
path='account/:address/xp'
path='/:address/liquidity'
element={<Portfolio specificTab='liquidity' />}
/>
<Route
path='/:address/points'
element={<Portfolio specificTab='points' />}
/>
<Route
path='/:address/xp'
element={<Portfolio isLevelsPage />}
/>
<Route
path='/:address/xp/history'
element={
<Portfolio isLevelsPage isViewMoreActive />
}
/>
<Route
path='swap'
element={
Expand Down Expand Up @@ -320,17 +355,7 @@ export default function App() {
element={<ExampleForm />}
/>
)}
<Route path='/:address' element={<Portfolio />} />
<Route
path='/:address/xp'
element={<Portfolio isLevelsPage />}
/>
<Route
path='/:address/xp/history'
element={
<Portfolio isLevelsPage isViewMoreActive />
}
/>

<Route path='/404' element={<NotFound />} />
<Route
path='*'
Expand Down
37 changes: 21 additions & 16 deletions src/App/hooks/useAppChain.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ export const useAppChain = (): {
return output;
}

function has42CharacterStringWith0xAfterSlash(inputString: string) {
// Regular expression to match a forward slash followed by '0x' and then exactly 40 hex characters
const regex = /\/0x[a-fA-F0-9]{40}/;

// Test the input string against the regular expression
return regex.test(inputString);
}

// memoized and validated chain ID from the URL
const chainInURLValidated: string | null = useMemo(
() => getChainFromURL(),
Expand Down Expand Up @@ -105,20 +113,20 @@ export const useAppChain = (): {
// first part seems unnecessary but appears to help stability
const { pathname } = window.location;

const isPathENS = pathname.slice(1)?.endsWith('.eth');
const isPathENS = pathname.slice(1)?.includes('.eth');
/* check if path is 42 character hex string
after removing the first character for /{hex} URLs
or first 9 characters for /account/{hex} */
const isPathHex =
(pathname.slice(1)?.startsWith('0x') &&
pathname.slice(1)?.length == 42) ||
(pathname.slice(9)?.startsWith('0x') &&
pathname.slice(9)?.length == 42);
const isPathUserAddress = isPathENS || isPathHex;
const isPathHexEoaAddress =
has42CharacterStringWith0xAfterSlash(pathname);
const isPathUserAddress =
isPathENS || isPathHexEoaAddress;

const isPathUserXpOrLeaderboard =
pathname.includes('/xp');
const isPathPointsTabOnAccount =
pathname.includes('/points');
const isPathOnAccount = pathname.includes('/account');
const isPathOnExplore = pathname.includes('/explore');

if (chainInURLValidated === incomingChainFromWallet) {
Expand Down Expand Up @@ -154,8 +162,9 @@ export const useAppChain = (): {
}
} else if (
isPathUserAddress ||
isPathUserXpOrLeaderboard ||
isPathOnAccount ||
isPathPointsTabOnAccount ||
isPathUserXpOrLeaderboard ||
isPathOnExplore
) {
if (
Expand Down Expand Up @@ -220,13 +229,10 @@ export const useAppChain = (): {
const { pathname } = window.location;

setActiveNetwork(network);
const isPathENS = pathname.slice(1)?.endsWith('.eth');
const isPathHex =
(pathname.slice(1)?.startsWith('0x') &&
pathname.slice(1)?.length == 42) ||
(pathname.slice(9)?.startsWith('0x') &&
pathname.slice(9)?.length == 42);
const isPathUserAddress = isPathENS || isPathHex;
const isPathENS = pathname.slice(1)?.includes('.eth');
const isPathHexEoaAddress =
has42CharacterStringWith0xAfterSlash(pathname);
const isPathUserAddress = isPathENS || isPathHexEoaAddress;
const isPathUserXpOrLeaderboard = pathname.includes('/xp');
const isPathOnExplore = pathname.includes('/explore');
if (
Expand All @@ -247,7 +253,6 @@ export const useAppChain = (): {
} else {
linkGenCurrent.navigate();
}
window.location.reload();
}

// data from the SDK about the current chain in the connected wallet
Expand Down
42 changes: 40 additions & 2 deletions src/components/Global/TabComponent/TabComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import useMediaQuery from '../../../utils/hooks/useMediaQuery';
import { TradeTableContext } from '../../../contexts/TradeTableContext';
import { ChartContext } from '../../../contexts/ChartContext';
import { FlexContainer } from '../../../styled/Common';
import { useNavigate } from 'react-router-dom';

type tabData = {
label: string;
Expand All @@ -35,8 +36,8 @@ interface TabPropsIF {
setShowPositionsOnlyToggle?: Dispatch<SetStateAction<boolean>>;
isModalView?: boolean;
shouldSyncWithTradeModules?: boolean;
transparent?: boolean;
// this props is for components that do not need outside control such as exchange balance
transparent?: boolean; // this prop is for components that do not need outside control such as exchange balance
isPortfolio?: boolean;
}

export default function TabComponent(props: TabPropsIF) {
Expand All @@ -46,6 +47,7 @@ export default function TabComponent(props: TabPropsIF) {
isModalView = false,
shouldSyncWithTradeModules = true,
transparent = false,
isPortfolio = false,
} = props;
const {
outsideControl,
Expand All @@ -59,6 +61,8 @@ export default function TabComponent(props: TabPropsIF) {
setActiveTradeTab,
} = useContext(TradeTableContext);

const navigate = useNavigate();

const { tradeTableState } = useContext(ChartContext);

const [selectedTab, setSelectedTab] = useState(data[0]);
Expand All @@ -73,15 +77,49 @@ export default function TabComponent(props: TabPropsIF) {
// resetActiveRow();
// }, [selectedTab.label]);

function removeTxTypesFromEnd(inputString: string) {
// Regular expression to match "transactions", "limits", or "liquidity" at the end of the string
const regex = /(transactions|limits|liquidity|points)$/;

// Replace the matched keyword with an empty string
return inputString.replace(regex, '');
}

function ensureEndsWithSlash(inputString: string) {
// Check if the string already ends with a forward slash
if (!inputString.endsWith('/')) {
// If not, add a forward slash to the end
inputString += '/';
}
return inputString;
}

function handleSelectedTab(item: tabData) {
setOutsideControl(false);
setSelectedTab(item);
const path = location.pathname;

const pathNoType = ensureEndsWithSlash(removeTxTypesFromEnd(path));
if (
['transactions', 'limits', 'liquidity'].includes(
item.label.toLowerCase(),
)
) {
setActiveTradeTab(item.label.toLowerCase());
if (isPortfolio) {
console.log({ pathNoType });

item.label.toLowerCase() === 'transactions'
? navigate(`${pathNoType}transactions`)
: item.label.toLowerCase() === 'limits'
? navigate(`${pathNoType}limits`)
: item.label.toLowerCase() === 'liquidity'
? navigate(`${pathNoType}liquidity`)
: null;
}
}
if (isPortfolio && item.label.toLowerCase() === 'points') {
navigate(`${pathNoType}points`);
}
if (tradeTableState === 'Collapsed') toggleTradeTable();
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/Global/Tabs/TableMenu/TableMenuComponents/OrdersMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ interface propsIF {
isOwnerActiveAccount?: boolean;
isOrderFilled: boolean;
isAccountView: boolean;
handleAccountClick: () => void;
handleWalletLinkClick: () => void;
openDetailsModal: () => void;
openActionModal: () => void;
setLimitModalAction: React.Dispatch<React.SetStateAction<LimitModalAction>>;
Expand All @@ -46,7 +46,7 @@ export default function OrdersMenu(props: propsIF) {
isOrderFilled,
isOwnerActiveAccount,
isAccountView,
handleAccountClick,
handleWalletLinkClick,
openDetailsModal,
openActionModal,
setLimitModalAction,
Expand Down Expand Up @@ -87,15 +87,15 @@ export default function OrdersMenu(props: propsIF) {
? useMediaQuery('(max-width: 1600px)')
: useMediaQuery('(max-width: 1450px)')
: isSidebarOpen
? useMediaQuery('(max-width: 2000px)')
: useMediaQuery('(max-width: 1250px)');
? useMediaQuery('(max-width: 2000px)')
: useMediaQuery('(max-width: 1250px)');

// ------------------ END OF MODAL FUNCTIONALITY-----------------

const smallView = tableView === 'small';

const walletButton = (
<Chip ariaLabel='View wallet.' onClick={handleAccountClick}>
<Chip ariaLabel='View wallet.' onClick={handleWalletLinkClick}>
Wallet
<FiExternalLink
size={15}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Global/Tabs/TableMenu/TableMenuComponents/RangesMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ interface propsIF {
position: PositionIF;
isPositionEmpty: boolean;
isPositionInRange: boolean;
handleAccountClick: () => void;
handleWalletLinkClick: () => void;
isAccountView: boolean;
openDetailsModal: () => void;
openActionModal: () => void;
Expand Down Expand Up @@ -111,8 +111,8 @@ function RangesMenu(props: propsIF) {
? useMediaQuery('(max-width: 1300px)')
: useMediaQuery('(max-width: 1150px)')
: sidebar.isOpen
? useMediaQuery('(max-width: 1400px)')
: useMediaQuery('(max-width: 1150px)');
? useMediaQuery('(max-width: 1400px)')
: useMediaQuery('(max-width: 1150px)');

const positionMatchesLoggedInUser =
userMatchesConnectedAccount && isUserConnected;
Expand Down Expand Up @@ -259,7 +259,7 @@ function RangesMenu(props: propsIF) {
// ----------------------

const walletButton = (
<Chip ariaLabel='View wallet.' onClick={props.handleAccountClick}>
<Chip ariaLabel='View wallet.' onClick={props.handleWalletLinkClick}>
Wallet
<FiExternalLink
size={15}
Expand Down
1 change: 1 addition & 0 deletions src/components/Portfolio/PortfolioTabs/PortfolioTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ export default function PortfolioTabs(props: propsIF) {
: accountTabDataWithoutTokens
}
rightTabOptions={false}
isPortfolio={true}
/>
</PortfolioTabsPortfolioTabsContainer>
);
Expand Down
Loading

0 comments on commit b111bf0

Please sign in to comment.