Skip to content

Commit

Permalink
refactor: Layout and MainContainer (#1489)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsimao
danielsimao authored Jul 26, 2023
1 parent a8c910a commit ca68f9e
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 186 deletions.
136 changes: 67 additions & 69 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query
import { BitcoinNetwork } from '@/types/bitcoin';
import { PAGES } from '@/utils/constants/links';

import { Layout, TransactionModal, Wrapper } from './components';
import { Layout, TransactionModal } from './components';
import * as constants from './constants';
import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag';
import TestnetBanner from './legacy-components/TestnetBanner';
Expand Down Expand Up @@ -156,77 +156,75 @@ const App = (): JSX.Element => {
}, [setSelectedAccount, extensions.length]);

return (
<Wrapper>
<Layout>
{process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && <TestnetBanner />}
<Route
render={({ location }) => (
<React.Suspense fallback={<FullLoadingSpinner />}>
{bridgeLoaded ? (
<Switch location={location}>
<Route exact path={PAGES.VAULTS}>
<Vaults />
<Layout>
{process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && <TestnetBanner />}
<Route
render={({ location }) => (
<React.Suspense fallback={<FullLoadingSpinner />}>
{bridgeLoaded ? (
<Switch location={location}>
<Route exact path={PAGES.VAULTS}>
<Vaults />
</Route>
<Route exact path={PAGES.VAULT}>
<Vault />
</Route>
<Route path={PAGES.VAULT}>
<Vaults />
</Route>
<Route path={PAGES.DASHBOARD}>
<Dashboard />
</Route>
<Route path={PAGES.STAKING}>
<Staking />
</Route>
<Route path={PAGES.TX}>
<TX />
</Route>
<Route path={PAGES.BTC}>
<BTC />
</Route>
<Route path={PAGES.SEND_AND_RECEIVE}>
<SendAndReceive />
</Route>
<Route path={PAGES.LOANS}>
<Loans />
</Route>
<Route path={PAGES.SWAP}>
<Swap />
</Route>
<Route path={PAGES.POOLS}>
<Pools />
</Route>
<Route path={PAGES.WALLET}>
<Wallet />
</Route>
{isStrategiesEnabled && (
<Route path={PAGES.STRATEGIES}>
<Strategies />
</Route>
<Route exact path={PAGES.VAULT}>
<Vault />
)}
{isOnboardingEnabled && (
<Route path={PAGES.ONBOARDING}>
<Onboarding />
</Route>
<Route path={PAGES.VAULT}>
<Vaults />
</Route>
<Route path={PAGES.DASHBOARD}>
<Dashboard />
</Route>
<Route path={PAGES.STAKING}>
<Staking />
</Route>
<Route path={PAGES.TX}>
<TX />
</Route>
<Route path={PAGES.BTC}>
<BTC />
</Route>
<Route path={PAGES.SEND_AND_RECEIVE}>
<SendAndReceive />
</Route>
<Route path={PAGES.LOANS}>
<Loans />
</Route>
<Route path={PAGES.SWAP}>
<Swap />
</Route>
<Route path={PAGES.POOLS}>
<Pools />
</Route>
<Route path={PAGES.WALLET}>
<Wallet />
</Route>
{isStrategiesEnabled && (
<Route path={PAGES.STRATEGIES}>
<Strategies />
</Route>
)}
{isOnboardingEnabled && (
<Route path={PAGES.ONBOARDING}>
<Onboarding />
</Route>
)}
<Route path={PAGES.ACTIONS}>
<Actions />
</Route>
<Redirect exact from={PAGES.HOME} to={PAGES.WALLET} />
<Route path='*'>
<NoMatch />
</Route>
</Switch>
) : (
<FullLoadingSpinner />
)}
</React.Suspense>
)}
/>
</Layout>
)}
<Route path={PAGES.ACTIONS}>
<Actions />
</Route>
<Redirect exact from={PAGES.HOME} to={PAGES.WALLET} />
<Route path='*'>
<NoMatch />
</Route>
</Switch>
) : (
<FullLoadingSpinner />
)}
</React.Suspense>
)}
/>
<TransactionModal />
</Wrapper>
</Layout>
);
};

Expand Down
4 changes: 3 additions & 1 deletion src/components/Wrapper/Wrapper.style.tsx → src/components/Layout/Layout.styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import styled from 'styled-components';

import dysonsphere from '@/assets/img/dysonsphere.svg';

const StyledWrapper = styled('div')`
const StyledWrapper = styled.div`
background: url(${dysonsphere}) no-repeat;
background-size: 40%;
background-position: right bottom;
background-attachment: fixed;
position: relative;
min-height: 100vh;
`;

export { StyledWrapper };
19 changes: 19 additions & 0 deletions src/components/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Sidebar from '../../legacy-components/Sidebar';
import Topbar from '../../legacy-components/Topbar';
import { StyledWrapper } from './Layout.styles';

interface Props {
className?: string;
children: React.ReactNode;
}

const Layout = ({ className, children }: Props): JSX.Element => (
<Sidebar className={className}>
<StyledWrapper>
<Topbar />
<main>{children}</main>
</StyledWrapper>
</Sidebar>
);

export { Layout };
25 changes: 1 addition & 24 deletions src/components/Layout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1 @@
import clsx from 'clsx';

import Sidebar from '../../legacy-components/Sidebar';
import Topbar from '../../legacy-components/Topbar';
import { MaintenanceBanner } from '../MaintenanceBanner';

interface Props {
className?: string;
children: React.ReactNode;
}

const Layout = ({ className, children }: Props): JSX.Element => {
return (
<Sidebar className={className}>
<div className={clsx('relative', 'min-h-screen')}>
<MaintenanceBanner />
<Topbar />
{children}
</div>
</Sidebar>
);
};

export { Layout };
export { Layout } from './Layout';
29 changes: 29 additions & 0 deletions src/components/MainContainer/MainContainer.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import styled from 'styled-components';

import { Flex, theme } from '@/component-library';

const StyledContainer = styled(Flex)`
padding: ${theme.spacing.spacing4};
width: 100%;
margin-left: auto;
margin-right: auto;
@media ${theme.breakpoints.up('sm')} {
max-width: ${theme.breakpoints.values.sm}px;
}
@media ${theme.breakpoints.up('md')} {
max-width: ${theme.breakpoints.values.md}px;
}
@media ${theme.breakpoints.up('lg')} {
padding: ${theme.spacing.spacing6};
max-width: ${theme.breakpoints.values.lg}px;
}
@media ${theme.breakpoints.up('xl')} {
max-width: ${theme.breakpoints.values.xl}px;
}
`;

export { StyledContainer };
11 changes: 11 additions & 0 deletions src/components/MainContainer/MainContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { FlexProps } from '@/component-library';

import { StyledContainer } from './MainContainer.styles';

type MainContainerProps = FlexProps;

const MainContainer = ({ direction = 'column', gap = 'spacing8', ...props }: MainContainerProps): JSX.Element => (
<StyledContainer direction={direction} gap={gap} {...props} />
);

export { MainContainer };
8 changes: 1 addition & 7 deletions src/components/MainContainer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
import clsx from 'clsx';

const MainContainer = ({ className, ...rest }: React.ComponentPropsWithRef<'div'>): JSX.Element => (
<div className={clsx('p-4', 'lg:p-6', 'space-y-10', 'container', 'mx-auto', className)} {...rest} />
);

export { MainContainer };
export { MainContainer } from './MainContainer';
68 changes: 0 additions & 68 deletions src/components/MaintenanceBanner/index.tsx
View file

This file was deleted.

12 changes: 0 additions & 12 deletions src/components/Wrapper/index.tsx
View file

This file was deleted.

2 changes: 0 additions & 2 deletions src/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export type { LoanApyCellProps } from './LoanPositionsTable';
export { LoanPositionsTable } from './LoanPositionsTable';
export { LoanApyCell } from './LoanPositionsTable';
export { MainContainer } from './MainContainer';
export { MaintenanceBanner } from './MaintenanceBanner';
export type { NotificationsPopoverProps } from './NotificationsPopover';
export { NotificationsPopover } from './NotificationsPopover';
export type { NotificationToastProps, TransactionToastProps } from './NotificationToast';
Expand All @@ -36,4 +35,3 @@ export * from './TransactionDetails';
export type { TransactionFeeDetailsProps } from './TransactionFeeDetails';
export { TransactionFeeDetails } from './TransactionFeeDetails';
export { TransactionModal } from './TransactionModal';
export { Wrapper } from './Wrapper';
2 changes: 1 addition & 1 deletion src/legacy-components/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const Sidebar = ({ className, children }: Props): JSX.Element => {
<div className={clsx(ON_SMALL_SCREEN_CLASS_NAME, 'pl-1', 'pt-1', 'sm:pl-3', 'sm:pt-3')}>
<OpenButton onClick={handleOpen} />
</div>
<main className={clsx('flex-1', 'relative', 'z-0', 'overflow-y-auto', 'focus:outline-none')}>{children}</main>
<div className={clsx('flex-1', 'relative', 'z-0', 'overflow-y-auto', 'focus:outline-none')}>{children}</div>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions src/legacy-components/Topbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const Topbar = (): JSX.Element => {

return (
<>
<div className={clsx('p-4', 'flex', 'items-center', 'justify-end', 'space-x-2')}>
<header className={clsx('p-4', 'flex', 'items-center', 'justify-end', 'space-x-2')}>
<ManualIssueExecutionActionsBadge />
<FundWallet />
{selectedAccount !== undefined && (
Expand Down Expand Up @@ -150,7 +150,7 @@ const Topbar = (): JSX.Element => {
<InterlayDefaultContainedButton className={SMALL_SIZE_BUTTON_CLASSES} onClick={handleAccountModalOpen}>
{accountLabel}
</InterlayDefaultContainedButton>
</div>
</header>
<AuthModal
isOpen={showAccountModal}
onClose={handleAccountModalClose}
Expand Down

2 comments on commit ca68f9e

@vercel
Copy link

@vercel vercel bot commented on ca68f9e Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

interbtc-ui-interlay-testnet – ./

interbtc-ui-interlay-testnet.vercel.app
testnet.interlay.io
interbtc-ui-interlay-testnet-interlay.vercel.app
interbtc-ui-interlay-testnet-git-master-interlay.vercel.app

@vercel
Copy link

@vercel vercel bot commented on ca68f9e Jul 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

interbtc-ui-kintsugi-testnet – ./

interbtc-ui-kintsugi-testnet-interlay.vercel.app
interbtc-ui-kintsugi-testnet-git-master-interlay.vercel.app
interbtc-ui.vercel.app
kintnet.interlay.io

Please sign in to comment.