Add new layout with side var

.babelrc

@@ -4,7 +4,7 @@
     [
       "babel-plugin-styled-components",
       {
-        "ssr": false
+        "ssr": true
       }
     ]
   ]

next.config.js

@@ -3,4 +3,15 @@ module.exports = {
     locales: ['en', 'ja', 'zh', 'zh-TW'],
     defaultLocale: 'en',
   },
+  future: {
+    webpack5: true,
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack', 'url-loader'],
+    });
+
+    return config;
+  },
 };

package.json

@@ -37,6 +37,7 @@
     "@apollo/client": "^3.3.11",
     "@moxy/next-router-scroll": "^2.0.3",
     "@react-hook/copy": "^2.0.1",
+    "@svgr/webpack": "^6.2.1",
     "@swingby-protocol/header": "^2.1.1",
     "@swingby-protocol/ip-check": "^2.1.0",
     "@swingby-protocol/pulsar": "^3.15.3",
@@ -77,6 +78,7 @@
     "redux-devtools-extension": "^2.13.8",
     "styled-components": "^5.2.1",
     "swr": "^0.4.2",
+    "url-loader": "^4.1.1",
     "web3": "^1.5.2",
     "web3-eth-contract": "^1.6.0"
   },

src/components/Layout/index.tsx

@@ -6,11 +6,8 @@ import { getTransactionFees } from '../../modules/explorer';
 import { OnboardProvider } from '../../modules/onboard';
 import { SdkContextProvider } from '../../modules/sdk-context';
 import { fetchTransactionFees } from '../../modules/store';
-import { Header } from '../Header';
-import { Swap } from '../Swap';
 
 import { CookieConsentHandler } from './CookieConsentHandler';
-import { SwapContainer } from './styled';
 
 type Props = { children: React.ReactNode };
 
@@ -27,15 +24,7 @@ export const Layout = ({ children }: Props) => {
   return (
     <>
       <SdkContextProvider mode={mode}>
-        <OnboardProvider>
-          <Header />
-
-          <SwapContainer>
-            <Swap />
-          </SwapContainer>
-
-          {children}
-        </OnboardProvider>
+        <OnboardProvider>{children}</OnboardProvider>
       </SdkContextProvider>
 
       <CookieConsentHandler />

src/layout/components/commons/ExternalLink.tsx

@@ -0,0 +1,35 @@
+import { Base, GhostAlt, TextAlt } from './styled';
+
+type ExternalLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  iconOnly?: boolean;
+  size?: 'small' | 'normal' | 'big';
+  variant: 'text-alt' | 'ghost-alt';
+};
+
+export function ExternalLink({
+  variant,
+  href,
+  children,
+  iconOnly = false,
+  size = 'normal',
+}: ExternalLinkProps) {
+  if (variant === 'text-alt')
+    return (
+      <TextAlt size={size} iconOnly={iconOnly} href={href}>
+        {children}
+      </TextAlt>
+    );
+  if (variant === 'ghost-alt')
+    return (
+      <GhostAlt size={size} iconOnly={iconOnly} href={href}>
+        {children}
+      </GhostAlt>
+    );
+  return (
+    <Base size={size} iconOnly={iconOnly} href={href}>
+      {children}
+    </Base>
+  );
+}

src/layout/components/commons/Icon.tsx

@@ -0,0 +1,188 @@
+import React, { CSSProperties } from 'react';
+
+//@ts-ignore-start
+//eslint-disable-next-line import/no-internal-modules
+import Sprite from '../../resources/icons-sprite.svg';
+// @ts-ignore-end
+
+import { SvgIcon } from './styled';
+
+export type LogoIconNames = 'barnbridge';
+
+export type TokenIconNames =
+  | 'bond-square-token'
+  | 'bond-add-token'
+  | 'token-unknown'
+  | 'token-eth'
+  | 'token-btc'
+  | 'token-weth'
+  | 'token-wbtc'
+  | 'token-renbtc'
+  | 'token-usdc'
+  | 'token-usdt'
+  | 'token-dai'
+  | 'token-rai'
+  | 'token-susd'
+  | 'token-gusd'
+  | 'static/token-bond'
+  | 'static/token-uniswap'
+  | 'static/token-staked-aave'
+  | 'token-wmatic'
+  | 'compound'
+  | 'static/aave'
+  | 'cream_finance'
+  | 'aave_polygon'
+  | 'token-all'
+  | 'polygon';
+
+export type NavIconNames =
+  | 'paper-bill-outlined'
+  | 'paper-alpha-outlined'
+  | 'chats-outlined'
+  | 'forum-outlined'
+  | 'bar-charts-outlined'
+  | 'savings-outlined'
+  | 'proposal-outlined'
+  | 'treasury-outlined'
+  | 'bank-outlined'
+  | 'tractor-outlined'
+  | 'wallet-outlined'
+  | 'docs-outlined';
+
+export type ThemeIconNames = 'moon' | 'sun' | 'weather';
+
+export type IconNames =
+  | LogoIconNames
+  | TokenIconNames
+  | NavIconNames
+  | ThemeIconNames
+  | 'mainnet-logo'
+  | 'testnet-logo'
+  | 'polygon-logo'
+  | 'avalanche-logo'
+  | 'binance-logo'
+  | 'right-arrow-circle-outlined'
+  | 'arrow-back'
+  | 'down-arrow-circle'
+  | 'plus-circle'
+  | 'refresh'
+  | 'notification'
+  | 'chevron-right'
+  | 'close-circle-outlined'
+  | 'check-circle-outlined'
+  | 'history-circle-outlined'
+  | 'close'
+  | 'close-tiny'
+  | 'dropdown-arrow'
+  | 'warning-outlined'
+  | 'warning-circle-outlined'
+  | 'gear'
+  | 'node-status'
+  | 'info-outlined'
+  | 'network'
+  | 'pencil-outlined'
+  | 'rate-outlined'
+  | 'plus-circle-outlined'
+  | 'plus-square-outlined'
+  | 'ribbon-outlined'
+  | 'bin-outlined'
+  | 'add-user'
+  | 'search-outlined'
+  | 'link-outlined'
+  | 'arrow-top-right'
+  | 'arrow-top-right-thin'
+  | 'arrow-bottom-right-thin'
+  | 'handshake-outlined'
+  | 'stamp-outlined'
+  | 'circle-plus-outlined'
+  | 'circle-minus-outlined'
+  | 'senior_tranche'
+  | 'junior_tranche'
+  | 'senior-side'
+  | 'junior-side'
+  | 'senior_tranche_simplified'
+  | 'junior_tranche_simplified'
+  | 'withdrawal_regular'
+  | 'withdrawal_instant'
+  | 'statistics'
+  | 'filter'
+  | 'tx-progress'
+  | 'tx-success'
+  | 'tx-failure'
+  | 'burger'
+  | 'hourglass'
+  | 'history'
+  | 'piggybank'
+  | 'file'
+  | 'add-file'
+  | 'file-added'
+  | 'file-deleted'
+  | 'file-clock'
+  | 'file-times'
+  | 'wallet'
+  | 'handshake'
+  | 'padlock-unlock'
+  | 'stopwatch'
+  | 'judge'
+  | 'certificate'
+  | 'chart-up'
+  | 'apy-up'
+  | 'chart'
+  | 'queue'
+  | 'stake'
+  | 'finance'
+  | 'balance'
+  | 'vertical-dots'
+  | 'dropdown'
+  | 'arrow-backward'
+  | 'arrow-forward'
+  | 'science'
+  | 'building'
+  | 'internet'
+  | 'checkbox-checked'
+  | 'checkbox'
+  | 'loader'
+  | 'insured'
+  | 'arbitrum-logo'
+  | 'warn-circle'
+  | 'menu-faucet'
+  | 'menu-yf'
+  | 'menu-dao'
+  | 'menu-sy'
+  | 'menu-sa'
+  | 'menu-se'
+  | 'menu-docs'
+  | 'menu-theme-light'
+  | 'menu-theme-dark'
+  | 'menu-theme-auto'
+  | 'bond-square-token'
+  | 'twitter'
+  | 'discord'
+  | 'github';
+
+export type IconProps = {
+  name: IconNames;
+  width?: number | string;
+  height?: number | string;
+  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue' | 'inherit';
+  rotate?: 0 | 90 | 180 | 270;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function Icon(props: IconProps) {
+  const { name, width = 24, height = 24, rotate, color, className, style, ...rest } = props;
+
+  return (
+    <SvgIcon
+      rotate={rotate ? rotate : 0}
+      color={color}
+      width={width}
+      height={height ?? width}
+      style={style}
+      {...rest}
+    >
+      {name && <use xlinkHref={`${Sprite}#icon__${name}`} />}
+    </SvgIcon>
+  );
+}

src/layout/components/commons/index.ts

@@ -0,0 +1,2 @@
+export { ExternalLink } from './ExternalLink';
+export * from './Icon';