feat(coinbase): add web3s (#955)

* feat(coinbase): add web3s

index.html

@@ -55,4 +55,9 @@
     src="https://platform.twitter.com/widgets.js"
     charset="utf-8"
   ></script>
+  <script
+    src="https://broadcast.coinbase.com/subscribe-button.js"
+    async
+    defer
+  ></script>
 </html>

src/components/Header/Header.styles.tsx

@@ -112,16 +112,16 @@ export const Link = styled(BaseLink)`
 export const WalletWrapper = styled.div`
   display: flex;
   align-items: center;
-`;
 
-export const MobileNavigation = styled(motion.nav)`
-  margin-left: 16px;
+  gap: 16px;
 
   @media (max-width: 428px) {
-    margin-left: 8px;
+    gap: 8px;
   }
 `;
 
+export const MobileNavigation = styled(motion.nav)``;
+
 export const TextWithIcon = styled.div`
   display: flex;
   flex-direction: row;

src/components/Wallet/Wallet.styles.ts

@@ -1,7 +1,19 @@
 import styled from "@emotion/styled";
-import { QUERIES } from "utils";
+import { COLORS, QUERIES } from "utils";
 import { ReactComponent as AcrossLogo } from "assets/across-mobile-logo.svg";
 
+export const WalletWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: baseline;
+
+  gap: 16px;
+
+  @media (max-width: 428px) {
+    gap: 8px;
+  }
+`;
+
 export const ConnectButton = styled.button`
   font-size: ${16 / 16}rem;
   line-height: ${20 / 16}rem;
@@ -77,6 +89,11 @@ export const BalanceButton = styled.button`
   }
 `;
 
+export const SubscribeButton = styled(BalanceButton)`
+  border-color: ${COLORS["aqua"]};
+  color: ${COLORS["aqua"]};
+`;
+
 export const BalanceWallet = styled.div`
   font: inherit;
   padding-right: 12px;

src/components/Wallet/Wallet.tsx

@@ -11,7 +11,9 @@ import {
   BalanceWallet,
   Account,
   Separator,
+  WalletWrapper,
 } from "./Wallet.styles";
+import Web3Subscribe from "./Web3Subscribe";
 
 interface Props {
   setOpenSidebar: React.Dispatch<React.SetStateAction<boolean>>;
@@ -42,22 +44,25 @@ const Wallet: FC<Props> = ({ setOpenSidebar }) => {
   }
 
   return (
-    <BalanceButton onClick={() => setOpenSidebar(true)} data-cy="acx-balance">
-      {SHOW_ACX_NAV_TOKEN && (
-        <>
-          <Logo />
-          <BalanceWallet>0 ACX</BalanceWallet>
-        </>
-      )}
-      {account && (
-        <>
-          {SHOW_ACX_NAV_TOKEN && <Separator />}
-          <Account data-cy="wallet-address">
-            {ensName ?? shortenAddress(account, "..", 4)}
-          </Account>
-        </>
-      )}
-    </BalanceButton>
+    <WalletWrapper>
+      <Web3Subscribe />
+      <BalanceButton onClick={() => setOpenSidebar(true)} data-cy="acx-balance">
+        {SHOW_ACX_NAV_TOKEN && (
+          <>
+            <Logo />
+            <BalanceWallet>0 ACX</BalanceWallet>
+          </>
+        )}
+        {account && (
+          <>
+            {SHOW_ACX_NAV_TOKEN && <Separator />}
+            <Account data-cy="wallet-address">
+              {ensName ?? shortenAddress(account, "..", 4)}
+            </Account>
+          </>
+        )}
+      </BalanceButton>
+    </WalletWrapper>
   );
 };
 export default Wallet;

src/components/Wallet/Web3Subscribe.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from "react";
+import { SubscribeButton } from "./Wallet.styles";
+import { useConnection } from "hooks";
+
+const Web3Subscribe = () => {
+  const { wallet } = useConnection();
+  const [isCBWallet, setIsCBWallet] = useState(false);
+  const [isSubscribed, setISubscribed] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const handleSubscribe = useCallback(() => {
+    if (isCBWallet) {
+      (window as any).CBWSubscribe.toggleSubscription();
+    }
+  }, [isCBWallet]);
+
+  // Check if CBWallet is available
+  useEffect(() => {
+    setIsCBWallet(wallet?.label === "Coinbase Wallet");
+  }, [wallet]);
+
+  useEffect(() => {
+    (window as any).CBWSubscribe.createSubscriptionUI({
+      partnerAddress: "0x7765007Ef1b9B75378F481613D842Fd7613e26f2",
+      partnerName: "Across Protocol",
+      modalTitle: "Subscribe to Across",
+      modalBody: "Subscribe to Across to receive updates and notifications.",
+      onSubscriptionChange: setISubscribed,
+      onLoading: setIsLoading,
+    });
+  }, []);
+
+  const subscribeButtonText = isLoading
+    ? "Loading..."
+    : isSubscribed
+    ? "Unsubscribe"
+    : "Subscribe";
+
+  return isCBWallet ? (
+    <SubscribeButton onClick={handleSubscribe}>
+      {subscribeButtonText}
+    </SubscribeButton>
+  ) : (
+    <></>
+  );
+};
+
+export default Web3Subscribe;