feat: Swingby v3 rebrand (#288)

* feat: add liquidity page (default)

* feat: add new swap page (and set as default page)

* feat: adjust header + remove swap banner

* feat: add Swap liquidity banner

* feat: add liquidity banner for liquidity page

* feat: add language + replace swingby.info with app.swingby.network

* fix: mobile view

* feat: upgrade header

package.json

@@ -37,7 +37,7 @@
     "@apollo/client": "^3.3.11",
     "@moxy/next-router-scroll": "^2.0.3",
     "@react-hook/copy": "^2.0.1",
-    "@swingby-protocol/header": "^2.2.0",
+    "@swingby-protocol/header": "^2.3.0",
     "@swingby-protocol/ip-check": "^2.1.0",
     "@swingby-protocol/pulsar": "^3.15.3",
     "@swingby-protocol/sdk": "^1.0.0-alpha.134",

src/components/Layout/index.tsx

@@ -7,10 +7,8 @@ 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 };
 
@@ -30,10 +28,6 @@ export const Layout = ({ children }: Props) => {
         <OnboardProvider>
           <Header />
 
-          <SwapContainer>
-            <Swap />
-          </SwapContainer>
-
           {children}
         </OnboardProvider>
       </SdkContextProvider>

src/modules/common/utils/textGenerator/index.tsx

@@ -6,7 +6,11 @@ import { PATH } from '../../../env';
 export const titleGenerator = (path: string): JSX.Element => {
   switch (path) {
     case PATH.ROOT:
+      return <FormattedMessage id="pool.swap" />;
+    case PATH.EXPLORER:
       return <FormattedMessage id="home.explorer" />;
+    case PATH.LIQUIDITY:
+      return <FormattedMessage id="pool.liquidity" />;
     case PATH.SWAP + '/[hash]':
       return <FormattedMessage id="home.explorer" />;
     case PATH.POOL:

src/modules/env/index.ts

@@ -11,6 +11,8 @@ export const ROOT_URL =
 
 export enum PATH {
   ROOT = '/',
+  EXPLORER = '/explorer',
+  LIQUIDITY = '/liquidity',
   SWAP = '/swap',
   FLOAT = '/float',
   POOL = '/pool',

src/modules/i18n/files/en.json

@@ -126,6 +126,7 @@
   "swap.message.refunded": "Uh oh, the Skybridge network has encountered an error. Your funds will be sent back to your original address.",
   "swap.message.expired": "The swap is too old and has been invalidated. No funds were received or sent.",
   "pool.liquidity": "Pool Liquidity",
+  "pool.swap": "Swap",
   "pool.your-account": "Your Account",
   "pool.stake-on-farm": "Stake on Swingby farm",
   "pool.claim": "Claim",
@@ -182,6 +183,16 @@
   "pool.earning.no-record": "You don't have any earned record yet. {value}  Let's swap sbBTC and stake on the farm.",
   "pool.farm.wallet-balance": "In wallet: {value}",
   "pool.farm.farm-balance": "In farming: {value}",
+  "liquidity.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "liquidity.mode.network-select-label": "Network:",
+  "liquidity.current-apr-label": "Current APR:",
+  "liquidity.help-url": "What’s sbBTC and how it works",
+  "swap.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "swap.mode.network-select-label": "Network:",
+  "swap.go-to-explorer": "Go to Explorer",
+  "swap.liquidity-label": "Liquidity",
+  "swap.limittx-stat-label": "swap limit/tx:",
+  "swap.fees-stat-label": "fees:",
   "metanodes.no": "No",
   "metanodes.node": "Node",
   "metanodes.location": "Location",

src/modules/i18n/files/ja.json

@@ -82,6 +82,7 @@
   "swap.message.refunded": "ネットワークにてエラーが確認されました。送信済みの資金は送信元アドレスへ返金されます。",
   "swap.message.expired": "一定期間内にて入金が確認されなかった為、当スワップは失効されました。",
   "pool.liquidity": "流動性提供",
+  "pool.swap": "スワップ",
   "pool.your-account": "アカウント",
   "pool.claim": "受取可能額",
   "pool.balance": "バランス (sbBTC)",
@@ -111,6 +112,16 @@
   "pool.withdraw.estimated": "概算",
   "pool.withdraw.estimated2": ":",
   "pool.withdraw.estimated-reason": "ネットワーク上にて入力／出力宛先の一致を検出する為、送信される金額は0.001％以内にランダム化された金額を差し引いております。",
+  "liquidity.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "liquidity.mode.network-select-label": "通信ネットワーク：",
+  "liquidity.current-apr-label": "現在の年率:",
+  "liquidity.help-url": "sbBTCとは何ですか？",
+  "swap.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "swap.mode.network-select-label": "通信ネットワーク：",
+  "swap.go-to-explorer": "エクスプローラーに移動",
+  "swap.liquidity-label": "流動性",
+  "swap.limittx-stat-label": "スワップ制限/取引：",
+  "swap.fees-stat-label": "料金:",
   "metanodes.metanodes": "Metanodes",
   "metanodes.no": "No",
   "metanodes.node": "ノード",

src/modules/i18n/files/zh-TW.json

@@ -83,6 +83,7 @@
   "swap.message.refunded": "糟糕, Skybridge網絡遇到錯誤。您的資金將退回到您的原始錢包地址。",
   "swap.message.expired": "此兌換已失效。沒有收到或發送任何資金。",
   "pool.liquidity": "Pool Liquidity",
+  "pool.swap": "Swap",
   "pool.your-account": "您的賬戶",
   "pool.claim": "認領",
   "pool.balance": "余額 (sbBTC)",
@@ -112,6 +113,16 @@
   "pool.withdraw.estimated": "估算",
   "pool.withdraw.estimated2": ":",
   "pool.withdraw.estimated-reason": "發送金額會隨機更新至0.001％以內的誤差以匹配input和output destinations",
+  "liquidity.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "liquidity.mode.network-select-label": "網絡：",
+  "liquidity.current-apr-label": "當前年利率：",
+  "liquidity.help-url": "什麼是 sbBTC 及其運作方式",
+  "swap.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "swap.mode.network-select-label": "網絡：",
+  "swap.go-to-explorer": "轉到資源管理器",
+  "swap.liquidity-label": "流動性提供者",
+  "swap.limittx-stat-label": "掉期限額/交易：",
+  "swap.fees-stat-label": "費用:",
   "metanodes.metanodes": "Metanodes",
   "metanodes.no": "序數",
   "metanodes.node": "節點",

src/modules/i18n/files/zh.json

@@ -83,6 +83,7 @@
   "swap.message.refunded": "糟糕, Skybridge网络遇到错误。您的资金将退回到您的原始钱包地址。",
   "swap.message.expired": "此兑换已失效。没有收到或发送任何资金。",
   "pool.liquidity": "Pool Liquidity",
+  "pool.swap": "Swap",
   "pool.your-account": "您的账户",
   "pool.claim": "认领",
   "pool.balance": "余额 (sbBTC)",
@@ -112,6 +113,16 @@
   "pool.withdraw.estimated": "估算",
   "pool.withdraw.estimated2": ":",
   "pool.withdraw.estimated-reason": "发送金额会随机更新至0.001％以内的误差以匹配input和output destinations",
+  "liquidity.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "liquidity.mode.network-select-label": "网络:",
+  "liquidity.current-apr-label": "当前年利率:",
+  "liquidity.help-url": "什么是 sbBTC 及其运作方式",
+  "swap.mode.ethereum": "BTC - WBTC (Ethereum)",
+  "swap.mode.network-select-label": "网络:",
+  "swap.go-to-explorer": "转到资源管理器",
+  "swap.liquidity-label": "流动性提供者",
+  "swap.limittx-stat-label": "掉期限额/交易：",
+  "swap.fees-stat-label": "费用:",
   "metanodes.metanodes": "Metanodes",
   "metanodes.no": "序数",
   "metanodes.node": "节点",

src/modules/links/index.tsx

@@ -19,7 +19,7 @@ export const URL = {
   Support: '[email protected]',
   HowItWorks: 'https://skybridge-docs.swingby.network/how-it-works',
   SwapFees: 'https://tbtc-ropsten-node-1.swingby.network/api/v1/swaps/fees',
-  SkybridgeMainnet: 'https://skybridge.info/',
+  SkybridgeMainnet: 'https://app.swingby.network/',
   SkybridgeTestnet: 'https://testnet.skybridge.info/',
   Erc20Bridge: 'https://bridge.swingby.network/',
   YieldFarming: 'https://farm.swingby.network/',

src/modules/scenes/Common/ExplorerMain/index.tsx

@@ -16,6 +16,8 @@ import {
   BrowserFees,
   BrowserMetanodes,
   BrowserPool,
+  BrowserLiquidity,
+  BrowserSwap,
 } from '../../Main';
 
 import { ExplorerMainContainer, HeadLine, TitleH1 } from './styled';
@@ -34,7 +36,11 @@ export const ExplorerMain = () => {
   const switchBrowser = (path: string): JSX.Element => {
     switch (path) {
       case PATH.ROOT:
+        return <BrowserSwap />;
+      case PATH.EXPLORER:
         return <Browser />;
+      case PATH.LIQUIDITY:
+        return <BrowserLiquidity />;
       case PATH.SWAP + '/[hash]':
         return <BrowserDetail />;
       case PATH.FLOAT + '/[hash]':
@@ -58,7 +64,11 @@ export const ExplorerMain = () => {
   const switchRightComponent = (path: string): JSX.Element => {
     switch (path) {
       case PATH.ROOT:
+        return <AccountId />;
+      case PATH.EXPLORER:
         return <Search />;
+      case PATH.LIQUIDITY:
+        return <AccountId />;
       case PATH.SWAP + '/[hash]':
         return <Search />;
       case PATH.FLOAT + '/[hash]':

src/modules/scenes/Common/ExplorerMain/styled.tsx

@@ -16,13 +16,13 @@ export const ExplorerMainContainer = styled.div<ThemeProps>`
   background-image: url(${logos.StarsBgAnimated});
   z-index: 0;
   background-size: ${(props) => (props.isLightTheme ? '80%' : '55%')};
+  padding-top: ${({ theme }) => rem(theme.pulsar.size.country * 2)};
   @media (min-width: ${rem(media.xs)}) {
     height: ${rem(240)};
     display: grid;
     width: 100%;
   }
   @media (min-width: ${rem(media.sm)}) {
-    padding-top: ${({ theme }) => rem(theme.pulsar.size.street)};
     padding-left: ${({ theme }) => rem(theme.pulsar.size.town)};
     padding-right: ${({ theme }) => rem(theme.pulsar.size.town)};
   }
@@ -34,7 +34,6 @@ export const ExplorerMainContainer = styled.div<ThemeProps>`
     height: ${rem(274)};
     padding-left: ${({ theme }) => rem(theme.pulsar.size.closet)};
     padding-right: ${({ theme }) => rem(theme.pulsar.size.closet)};
-    padding-top: ${({ theme }) => rem(theme.pulsar.size.country)};
   }
   @media (min-width: ${rem(media.xl)}) {
     display: grid;

src/modules/scenes/Main/Explorer/StatsInfo/index.tsx

@@ -53,7 +53,7 @@ export const StatsInfo = () => {
   const [volumeType, setVolumeType] = useState<VolumeType>('1W');
 
   const { bridge, defaultBridge, reward, isLoading: isLoadingMetanode } = useToggleMetanode(
-    PATH.ROOT,
+    PATH.EXPLORER,
   );
   const {
     volumes,
@@ -240,7 +240,7 @@ export const StatsInfo = () => {
                               <Tooltip.Content>
                                 <Text variant="accent">
                                   <a
-                                    href="https://skybridge.info/pool"
+                                    href="https://app.swingby.network/liquidity"
                                     target="_blank"
                                     rel="noreferrer"
                                   >

src/modules/scenes/Main/Liquidity/ActionButtonsLiquidity/index.tsx

@@ -0,0 +1,39 @@
+import { useMatchMedia } from '@swingby-protocol/pulsar';
+import { rem } from 'polished';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { PoolMode } from '../../../../pool';
+import { toggleLiquidityMode } from '../../../../store';
+import { StylingConstants } from '../../../../styles';
+
+import { ActionButtonsLiquidityContainer, Buttons, ButtonLiquidity } from './styled';
+
+export const ActionButtonsLiquidity = () => {
+  const dispatch = useDispatch();
+
+  const { media } = StylingConstants;
+  const sm = useMatchMedia({ query: `(min-width: ${rem(media.sm)})` });
+
+  return (
+    <ActionButtonsLiquidityContainer>
+      <Buttons>
+        <ButtonLiquidity
+          variant="primary"
+          size="city"
+          onClick={() => dispatch(toggleLiquidityMode(PoolMode.AddLiquidity))}
+        >
+          <FormattedMessage id="pool.add-liquidity" values={{ value: sm && '+ ' }} />
+        </ButtonLiquidity>
+        <ButtonLiquidity
+          variant="secondary"
+          size="city"
+          onClick={() => dispatch(toggleLiquidityMode(PoolMode.Withdraw))}
+        >
+          <FormattedMessage id="pool.withdraw" />
+        </ButtonLiquidity>
+      </Buttons>
+    </ActionButtonsLiquidityContainer>
+  );
+};