aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx6
-rw-r--r--packages/website/ts/components/portal/portal.tsx130
-rw-r--r--packages/website/ts/components/portal/text_header.tsx15
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx56
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx40
-rw-r--r--packages/website/ts/components/relayer_index/relayer_top_tokens.tsx7
-rw-r--r--packages/website/ts/components/ui/animation.tsx6
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx20
-rw-r--r--packages/website/ts/pages/jobs/open_positions.tsx3
-rw-r--r--packages/website/ts/utils/utils.ts6
11 files changed, 138 insertions, 152 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 331899469..ec8d96191 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -42,7 +42,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
} else {
onboardingElement = (
- <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+ <Popper
+ referenceElement={this._getElementForStep()}
+ placement={this._getCurrentStep().placement}
+ positionFixed={true}
+ >
{this._renderPopperChildren.bind(this)}
</Popper>
);
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 11b3b43f4..c9f2b2633 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -107,26 +107,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
const LEFT_COLUMN_WIDTH = 346;
const MENU_PADDING_LEFT = 185;
const LARGE_LAYOUT_MAX_WIDTH = 1200;
-
-const styles: Styles = {
- root: {
- width: '100%',
- height: '100%',
- backgroundColor: colors.lightestGrey,
- },
- body: {
- height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- },
- leftColumn: {
- width: LEFT_COLUMN_WIDTH,
- height: '100%',
- },
- scrollContainer: {
- height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- WebkitOverflowScrolling: 'touch',
- overflow: 'auto',
- },
-};
+const LARGE_LAYOUT_MARGIN = 30;
export class Portal extends React.Component<PortalProps, PortalState> {
private _blockchain: Blockchain;
@@ -245,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
? TokenVisibility.UNTRACKED
: TokenVisibility.TRACKED;
return (
- <div style={styles.root}>
+ <Container>
<DocumentTitle title="0x Portal DApp" />
<TopBar
userAddress={this.props.userAddress}
@@ -259,10 +240,15 @@ export class Portal extends React.Component<PortalProps, PortalState> {
blockchain={this._blockchain}
translate={this.props.translate}
displayType={TopBarDisplayType.Expanded}
- style={{ backgroundColor: colors.lightestGrey }}
+ style={{
+ backgroundColor: colors.lightestGrey,
+ position: 'fixed',
+ // Hack: used to make onboarding z-index logic work for both mobile and desktop
+ zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
+ }}
maxWidth={LARGE_LAYOUT_MAX_WIDTH}
/>
- <div id="portal" style={styles.body}>
+ <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
<Switch>
<Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
<Route
@@ -301,13 +287,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
tokenByAddress={this.props.tokenByAddress}
tokenVisibility={tokenVisibility}
/>
- </div>
- <PortalOnboardingFlow
- blockchain={this._blockchain}
- trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
- refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
- />
- </div>
+ </Container>
+ </Container>
);
}
private _renderMainRoute(): React.ReactNode {
@@ -341,41 +322,48 @@ export class Portal extends React.Component<PortalProps, PortalState> {
}
private _renderWallet(): React.ReactNode {
const startOnboarding = this._renderStartOnboarding();
- const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+ const isMobile = utils.isMobile(this.props.screenWidth);
// We need room to scroll down for mobile onboarding
const marginBottom = isMobile ? '200px' : '15px';
return (
<div>
- {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
- <Container marginBottom={marginBottom}>
- <Wallet
- style={
- !isMobile && this.props.isPortalOnboardingShowing
- ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
- : undefined
- }
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this._blockchain}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- blockchainErr={this.props.blockchainErr}
- dispatcher={this.props.dispatcher}
- tokenByAddress={this.props.tokenByAddress}
- trackedTokens={this._getCurrentTrackedTokens()}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- injectedProviderName={this.props.injectedProviderName}
- providerType={this.props.providerType}
- screenWidth={this.props.screenWidth}
- location={this.props.location}
- trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
- onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
- onAddToken={this._onAddToken.bind(this)}
- onRemoveToken={this._onRemoveToken.bind(this)}
- refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
- />
+ <Container>
+ {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
+ <Container marginBottom={marginBottom}>
+ <Wallet
+ style={
+ !isMobile && this.props.isPortalOnboardingShowing
+ ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+ : undefined
+ }
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this._blockchain}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ blockchainErr={this.props.blockchainErr}
+ dispatcher={this.props.dispatcher}
+ tokenByAddress={this.props.tokenByAddress}
+ trackedTokens={this._getCurrentTrackedTokens()}
+ userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+ injectedProviderName={this.props.injectedProviderName}
+ providerType={this.props.providerType}
+ screenWidth={this.props.screenWidth}
+ location={this.props.location}
+ trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+ onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+ onAddToken={this._onAddToken.bind(this)}
+ onRemoveToken={this._onRemoveToken.bind(this)}
+ refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+ />
+ </Container>
+ {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
</Container>
- {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
+ <PortalOnboardingFlow
+ blockchain={this._blockchain}
+ trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+ refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+ />
</div>
);
}
@@ -551,7 +539,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
private _renderRelayerIndexSection(): React.ReactNode {
return (
<Section
- header={<TextHeader labelText="Explore 0x Relayers" />}
+ header={<TextHeader labelText="0x Relayers" />}
body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />}
/>
);
@@ -709,12 +697,16 @@ interface LargeLayoutProps {
const LargeLayout = (props: LargeLayoutProps) => {
return (
<div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
- <div className="flex-last px2">
- <div style={styles.leftColumn}>{props.left}</div>
- </div>
- <div className="flex-auto px2" style={styles.scrollContainer}>
- {props.right}
+ <div className="flex-last">
+ <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+ {props.left}
+ </Container>
</div>
+ <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
+ <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+ {props.right}
+ </Container>
+ </Container>
</div>
);
};
@@ -725,9 +717,7 @@ interface SmallLayoutProps {
const SmallLayout = (props: SmallLayoutProps) => {
return (
<div className="flex flex-center">
- <div className="flex-auto px3" style={styles.scrollContainer}>
- {props.content}
- </div>
+ <div className="flex-auto px3">{props.content}</div>
</div>
);
}; // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx
index 4aabd47d0..853da3a29 100644
--- a/packages/website/ts/components/portal/text_header.tsx
+++ b/packages/website/ts/components/portal/text_header.tsx
@@ -1,21 +1,16 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
+import { Text } from 'ts/components/ui/text';
+
export interface TextHeaderProps {
labelText: string;
}
-const styles: Styles = {
- title: {
- fontWeight: 'bold',
- fontSize: 20,
- },
-};
-
export const TextHeader = (props: TextHeaderProps) => {
return (
- <div className="py3" style={styles.title}>
+ <Text className="pt3 pb2" fontWeight="bold" fontSize="16px" fontColor={colors.darkestGrey}>
{props.labelText}
- </div>
+ </Text>
);
};
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 23860856b..18b069ae2 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -1,6 +1,6 @@
import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
-import { GridTile } from 'material-ui/GridList';
+import { GridTile as PlainGridTile } from 'material-ui/GridList';
import * as React from 'react';
import { analytics } from 'ts/utils/analytics';
@@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { utils } from 'ts/utils/utils';
export interface RelayerGridTileProps {
relayerInfo: WebsiteBackendRelayerInfo;
@@ -19,29 +21,23 @@ export interface RelayerGridTileProps {
const styles: Styles = {
root: {
boxSizing: 'border-box',
+ // All material UI components have position: relative
+ // which creates a new stacking context and makes z-index stuff impossible. So reset.
+ position: 'static',
},
innerDiv: {
- padding: 6,
height: '100%',
boxSizing: 'border-box',
},
header: {
height: '50%',
width: '100%',
- borderBottomRightRadius: 4,
- borderBottomLeftRadius: 4,
- borderTopRightRadius: 4,
- borderTopLeftRadius: 4,
- borderWidth: 1,
- borderStyle: 'solid',
- borderColor: colors.walletBorder,
},
body: {
- paddingLeft: 6,
- paddingRight: 6,
height: '50%',
width: '100%',
boxSizing: 'border-box',
+ padding: 12,
},
weeklyTradeVolumeLabel: {
fontSize: 14,
@@ -69,7 +65,10 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
const eventLabel = `${props.relayerInfo.name}-${networkName}`;
- const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+ const onClick = () => {
+ analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+ utils.openUrl(link);
+ };
const headerImageUrl = props.relayerInfo.logoImgUrl;
const headerBackgroundColor =
!_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
@@ -77,22 +76,17 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
: FALLBACK_PRIMARY_COLOR;
return (
<Island style={styles.root} Component={GridTile}>
- <div style={styles.innerDiv}>
- <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
- <div
- className="flex items-center"
- style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
- >
- <Image
- className="mx-auto"
- src={props.relayerInfo.logoImgUrl}
- fallbackSrc={FALLBACK_IMG_SRC}
- height={RELAYER_ICON_HEIGHT}
- />
- </div>
- </a>
+ <div style={styles.innerDiv} onClick={onClick}>
+ <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+ <Image
+ className="mx-auto"
+ src={props.relayerInfo.logoImgUrl}
+ fallbackSrc={FALLBACK_IMG_SRC}
+ height={RELAYER_ICON_HEIGHT}
+ />
+ </div>
<div style={styles.body}>
- <div className="py1" style={styles.relayerNameLabel}>
+ <div className="pb1" style={styles.relayerNameLabel}>
{props.relayerInfo.name}
</div>
<Section titleText="Weekly Trade Volume">
@@ -111,6 +105,14 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
);
};
+const GridTile = styled(PlainGridTile)`
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ &:hover {
+ transform: translate(0px, -3px);
+ }
+`;
+
interface SectionProps {
titleText: string;
children?: React.ReactNode;
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d565eb608..4aea1bbbb 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,4 +1,3 @@
-import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import { GridList } from 'material-ui/GridList';
@@ -6,7 +5,6 @@ import * as React from 'react';
import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
import { Retry } from 'ts/components/ui/retry';
-import { colors } from 'ts/style/colors';
import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
import { backendClient } from 'ts/utils/backend_client';
@@ -20,22 +18,6 @@ interface RelayerIndexState {
error?: Error;
}
-const styles: Styles = {
- root: {
- width: '100%',
- },
- item: {
- backgroundColor: colors.white,
- borderBottomRightRadius: 10,
- borderBottomLeftRadius: 10,
- borderTopRightRadius: 10,
- borderTopLeftRadius: 10,
- boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
- overflow: 'hidden',
- padding: 4,
- },
-};
-
const CELL_HEIGHT = 290;
const NUMBER_OF_COLUMNS_LARGE = 3;
const NUMBER_OF_COLUMNS_MEDIUM = 2;
@@ -76,18 +58,16 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
} else {
const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
return (
- <div style={styles.root}>
- <GridList
- cellHeight={CELL_HEIGHT}
- cols={numberOfColumns}
- padding={GRID_PADDING}
- style={styles.gridList}
- >
- {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
- <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
- ))}
- </GridList>
- </div>
+ <GridList
+ cellHeight={CELL_HEIGHT}
+ cols={numberOfColumns}
+ padding={GRID_PADDING}
+ style={{ marginTop: -10, marginBottom: 0 }}
+ >
+ {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
+ <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+ ))}
+ </GridList>
);
}
}
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index b599e7123..f544fc924 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -70,7 +70,10 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
};
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`;
- const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel);
+ const onClick = (event: React.MouseEvent<HTMLElement>) => {
+ event.stopPropagation();
+ analytics.logEvent('Portal', 'Token Click', eventLabel);
+ };
return (
<a
href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)}
@@ -78,7 +81,7 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
style={style}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
- onClick={trackTokenClick}
+ onClick={onClick}
>
{this.props.tokenInfo.symbol}
</a>
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index cbda2993d..136f3d005 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -11,13 +11,15 @@ const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {
const appearFromBottomFrames = keyframes`
from {
- position: absolute;
+ position: fixed;
bottom: -500px;
+ left: 0px;
}
to {
- position: absolute;
+ position: fixed;
bottom: 0px;
+ left: 0px;
}
`;
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 90aec0e7c..a747ef01f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
borderRadius?: StringOrNum;
maxWidth?: StringOrNum;
width?: StringOrNum;
+ minHeight?: StringOrNum;
isHidden?: boolean;
className?: string;
position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f88fd6c24..4cc70badd 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -29,6 +29,7 @@ import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
import {
BlockchainErrs,
ProviderType,
@@ -138,6 +139,12 @@ const USD_DECIMAL_PLACES = 2;
const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
+const ActionButton = styled(FloatingActionButton)`
+ button {
+ position: static !important;
+ }
+`;
+
export class Wallet extends React.Component<WalletProps, WalletState> {
public static defaultProps = {
style: {},
@@ -244,17 +251,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
<ListItem
primaryText={
<div className="flex">
- <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+ <ActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
<ContentAdd />
- </FloatingActionButton>
- <FloatingActionButton
- mini={true}
- zDepth={0}
- className="px1"
- onClick={this.props.onRemoveToken}
- >
+ </ActionButton>
+ <ActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
<ContentRemove />
- </FloatingActionButton>
+ </ActionButton>
<div
style={{
paddingLeft: 10,
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f3d980315..e789795c1 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -11,6 +11,7 @@ import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
import { backendClient } from 'ts/utils/backend_client';
+import { utils } from 'ts/utils/utils';
const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
const HEADER_TEXT = 'Open Positions';
@@ -161,7 +162,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
const url = jobInfo.url;
- window.open(url, '_blank');
+ utils.openUrl(url);
}
}
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 0bd3dbcfa..0cb965f05 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -362,4 +362,10 @@ export const utils = {
const formattedAmount = unitAmount.toFixed(precision);
return `${formattedAmount} ${symbol}`;
},
+ openUrl(url: string): void {
+ window.open(url, '_blank');
+ },
+ isMobile(screenWidth: ScreenWidths): boolean {
+ return screenWidth === ScreenWidths.Sm;
+ },
};