SOV-4463: BOB Gateway example integration

apps/frontend/package.json

@@ -6,6 +6,8 @@
   "dependencies": {
     "@apollo/client": "3.7.1",
     "@apollo/react-hooks": "4.0.0",
+    "@gobob/bob-sdk": "^3.1.0",
+    "@gobob/sats-wagmi": "^0.3.17",
     "@loadable/component": "5.15.2",
     "@sovryn-zero/lib-base": "0.2.1",
     "@sovryn-zero/lib-ethers": "0.2.5",
@@ -26,6 +28,7 @@
     "@sovryn/tailwindcss-config": "*",
     "@sovryn/ui": "*",
     "@sovryn/utils": "0.0.2",
+    "@tanstack/react-query": "^5.59.0",
     "@uniswap/permit2-sdk": "1.2.0",
     "bitcoin-address-validation": "2.2.1",
     "chart.js": "4.1.1",

apps/frontend/src/app/3_organisms/Header/Header.constants.tsx

@@ -69,4 +69,8 @@ export const menuItemsMapping: MenuItem[] = [
     text: t(translations.header.nav.bitocracy),
     url: '/bitocracy',
   },
+  {
+    text: t(translations.header.nav.bobGateway),
+    url: '/bob-gateway',
+  },
 ];

apps/frontend/src/app/5_pages/BobGateway/BobGateway.constants.tsx

@@ -0,0 +1,64 @@
+import { GatewaySDK } from '@gobob/bob-sdk';
+import { QueryClient } from '@tanstack/react-query';
+
+import React from 'react';
+
+export const bobGateway = new GatewaySDK('bob');
+
+export const strategies = [
+  {
+    strategyAddress: '0x0A0A0F6d572488093763C13AF7aB55597477aBDB',
+    toToken: 'wBTC',
+    tokenA: 'SolvBTC.BBN',
+    tokenB: 'UniBTC',
+    category: 'Liquidity providing',
+    incentives: (
+      <div className="flex flex-col">
+        <span>20x/20x Spice </span>
+        <span>+ Supply APR </span>
+        <span>+ SolvXP</span>
+        <span>+ Babylon Points</span>
+        <span>+ Diamond</span>
+      </div>
+    ),
+    about:
+      'Maximize your rewards with liquid Bitcoin staking. This pool facilitates seamless swaps between SolvBTC.BBN and UniBTC, two Liquid Staking Tokens (LSTs) representing BTC. With a 20x Spice multiplier, it offers high incentives for liquidity providers looking to optimize yield while staying fully exposed to BTC derivatives.',
+  },
+
+  {
+    strategyAddress: '0x2a4F027cb568F2F3f7b2F7008b92C3B0eFc8DCfD',
+    toToken: 'wBTC',
+    tokenA: 'WBTC',
+    tokenB: 'SolvBTC.BBN',
+    category: 'Liquidity providing',
+    incentives: (
+      <div className="flex flex-col">
+        <span>7x/20x Spice</span>
+        <span>+ Supply APR</span>
+        <span>+ SolvXP</span>
+        <span>+ Babylon Points</span>
+      </div>
+    ),
+    about:
+      'Combine wrapped BTC liquidity with staking rewards. This pool pairs wBTC with SolvBTC.BBN, allowing users to move between a widely-used BTC wrapper and an interest-bearing LST. Liquidity providers earn a 7x Spice multiplier on wBTC and a 20x multiplier on SolvBTC.BBN, making it an attractive option for BTC holders looking to gain exposure to liquid staking rewards.',
+  },
+
+  {
+    strategyAddress: '0x9509e42a304b408A17403a0a439692DBe8b68F6c',
+    toToken: 'wBTC',
+    tokenA: 'WBTC',
+    tokenB: 'UniBTC',
+    category: 'Liquidity providing',
+    incentives: (
+      <div className="flex flex-col">
+        <span>7x/20x Spice</span>
+        <span>+ Supply APR</span>
+        <span>+ Diamond</span>
+      </div>
+    ),
+    about:
+      'Combine wrapped BTC liquidity with staking rewards. This pool pairs wBTC with UniBTC, allowing users to move between a widely-used BTC wrapper and an interest-bearing LST. Liquidity providers earn a 7x Spice multiplier on wBTC and a 20x multiplier on UniBTC, making it an attractive option for BTC holders looking to gain exposure to liquid staking rewards.',
+  },
+];
+
+export const queryClient = new QueryClient();

apps/frontend/src/app/5_pages/BobGateway/BobGateway.tsx

@@ -0,0 +1,48 @@
+import { Network, SatsWagmiConfig } from '@gobob/sats-wagmi';
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import React, { FC } from 'react';
+
+import { t } from 'i18next';
+import { Helmet } from 'react-helmet-async';
+
+import { Heading, Paragraph, ParagraphSize } from '@sovryn/ui';
+
+import { translations } from '../../../locales/i18n';
+import { queryClient } from './BobGateway.constants';
+import { BitcoinWallet } from './components/BitcoinWallet/BitcoinWallet';
+import { BobGatewayForm } from './components/BobGatewayForm/BobGatewayForm';
+import { BobGatewayOrders } from './components/BobGatewayOrders/BobGatewayOrders';
+
+const BobGateway: FC = () => (
+  <>
+    <Helmet>
+      <title>{t(translations.bobGatewayPage.meta.title)}</title>
+    </Helmet>
+    <div className="px-0 container md:mx-9 mx-0 md:mb-2 mb-7 mt-8">
+      <Heading className="text-center mb-3 lg:text-2xl">
+        {t(translations.bobGatewayPage.meta.title)}
+      </Heading>
+
+      <Paragraph
+        className="text-center mb-6 lg:mb-10"
+        size={ParagraphSize.base}
+      >
+        {t(translations.bobGatewayPage.description)}
+      </Paragraph>
+
+      <QueryClientProvider client={queryClient}>
+        <SatsWagmiConfig network={Network.mainnet} queryClient={queryClient}>
+          <div className="px-0 md:mx-9 mx-0 md:mb-2 mb-7">
+            <div className="flex justify-end m-4">
+              <BitcoinWallet />
+            </div>
+            <BobGatewayForm />
+            <BobGatewayOrders />
+          </div>
+        </SatsWagmiConfig>
+      </QueryClientProvider>
+    </div>
+  </>
+);
+export default BobGateway;

apps/frontend/src/app/5_pages/BobGateway/components/BitcoinWallet/BitcoinWallet.tsx

@@ -0,0 +1,99 @@
+import { useAccount, useConnect, useDisconnect } from '@gobob/sats-wagmi';
+
+import React, { FC, useCallback, useEffect, useState } from 'react';
+
+import { t } from 'i18next';
+import { nanoid } from 'nanoid';
+
+import {
+  Button,
+  ButtonSize,
+  ButtonStyle,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  NotificationType,
+  WalletIdentity,
+} from '@sovryn/ui';
+
+import { useNotificationContext } from '../../../../../contexts/NotificationContext';
+import { translations } from '../../../../../locales/i18n';
+import { getBitcoinWalletIcon } from './BitcoinWallet.utils';
+
+export const BitcoinWallet: FC = () => {
+  const { addNotification } = useNotificationContext();
+  const { connectors, connect } = useConnect();
+  const { address: btcAddress } = useAccount();
+  const { disconnect } = useDisconnect();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onCopyAddress = useCallback(() => {
+    addNotification({
+      type: NotificationType.success,
+      title: t(translations.copyAddress),
+      content: '',
+      dismissible: true,
+      id: nanoid(),
+    });
+  }, [addNotification]);
+
+  useEffect(() => {
+    if (btcAddress && isOpen) {
+      setIsOpen(false);
+    }
+  }, [btcAddress, isOpen]);
+
+  if (!btcAddress) {
+    return (
+      <>
+        <Button
+          text={t(translations.connectWalletButton.connectBTC)}
+          onClick={() => setIsOpen(true)}
+        />
+        <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <DialogHeader
+            onClose={() => setIsOpen(false)}
+            title={t(translations.connectWalletButton.connectBTC)}
+          />
+          <DialogBody className="p-6">
+            <div className="flex flex-col gap-4 mx-8">
+              {connectors.map(connector => (
+                <Button
+                  className="w-full flex items-center gap-2"
+                  size={ButtonSize.large}
+                  key={connector.id}
+                  style={ButtonStyle.secondary}
+                  text={
+                    <>
+                      {getBitcoinWalletIcon(connector) && (
+                        <img
+                          alt={connector.name}
+                          src={getBitcoinWalletIcon(connector)}
+                          width={24}
+                        />
+                      )}
+                      {connector.name}
+                    </>
+                  }
+                  onClick={() => connect({ connector })}
+                />
+              ))}
+            </div>
+          </DialogBody>
+        </Dialog>
+      </>
+    );
+  }
+  return (
+    <WalletIdentity
+      onDisconnect={disconnect}
+      onCopyAddress={onCopyAddress}
+      address={btcAddress}
+      dropdownClassName="z-[10000000]"
+      submenuLabels={{
+        copyAddress: t(translations.connectWalletButton.copyAddress),
+        disconnect: t(translations.connectWalletButton.disconnect),
+      }}
+    />
+  );
+};

apps/frontend/src/app/5_pages/BobGateway/components/BitcoinWallet/BitcoinWallet.utils.ts

@@ -0,0 +1,26 @@
+import { SatsConnector } from '@gobob/sats-wagmi';
+
+import BinanceIcon from '../../../../../assets/images/BitcoinWallets/Binance.svg';
+import LeatherIcon from '../../../../../assets/images/BitcoinWallets/Leather.svg';
+import MetaMaskIcon from '../../../../../assets/images/BitcoinWallets/MetaMask.svg';
+import UniSatIcon from '../../../../../assets/images/BitcoinWallets/UniSat.svg';
+import XversIcon from '../../../../../assets/images/BitcoinWallets/Xvers.svg';
+
+export const getBitcoinWalletIcon = (connector: SatsConnector) => {
+  if (connector.icon) {
+    return connector.icon;
+  }
+
+  switch (connector.id) {
+    case 'xverse':
+      return XversIcon;
+    case 'unisat':
+      return UniSatIcon;
+    case 'binancew3w':
+      return BinanceIcon;
+    case 'metamask_snap':
+      return MetaMaskIcon;
+    case 'leather':
+      return LeatherIcon;
+  }
+};