[ECO-2531] Add Bitget to the wallet adapter (#434)

src/typescript/frontend/package.json

@@ -15,6 +15,7 @@
     "@aptos-labs/ts-sdk": "1.27.1",
     "@aptos-labs/wallet-adapter-core": "^4.22.1",
     "@aptos-labs/wallet-adapter-react": "3.7.7",
+    "@bitget-wallet/aptos-wallet-adapter": "^0.1.2",
     "@econia-labs/emojicoin-sdk": "workspace:*",
     "@emoji-mart/data": "https://github.com/econia-labs/emoji-mart/raw/emojicoin-dot-fun/packages/emoji-mart-data/emoji-mart-data-v1.2.1.tgz",
     "@emoji-mart/react": "https://github.com/econia-labs/emoji-mart/raw/emojicoin-dot-fun/packages/emoji-mart-react/emoji-mart-react-v1.1.1.tgz",

src/typescript/frontend/src/components/svg/icons/BitgetIcon.tsx

@@ -0,0 +1,22 @@
+// cspell:word bitget
+import { cn } from "lib/utils/class-name";
+import Image from "next/image";
+
+const BitgetIcon = ({
+  width,
+  height,
+  className,
+}: {
+  width: number;
+  height: number;
+  className: string;
+}) => (
+  <Image
+    className={cn(className, "brightness-0")}
+    width={width}
+    height={height}
+    alt="bitget logo"
+    src="/images/wallets/bitget-logo.png"
+  />
+);
+export default BitgetIcon;

src/typescript/frontend/src/components/svg/icons/OKXIcon.tsx

@@ -15,7 +15,7 @@ const OKXIcon = ({
       width={width + 2}
       height={height + 2}
       alt="okx logo"
-      src="/okx-logo.png"
+      src="/images/wallets/okx-logo.png"
     ></Image>
   );
 };

src/typescript/frontend/src/components/wallet/toasts.tsx

@@ -1,5 +1,6 @@
 import {
   AptosApiError,
+  NetworkToChainId,
   NetworkToNetworkName,
   NetworkToNodeAPI,
   type UserTransactionResponse,
@@ -46,7 +47,12 @@ export const checkNetworkAndToast = (
     .replaceAll("/v1", "")
     .replaceAll("v1", "");
   const isUsingLocalhost = normalizedLocalWalletNetwork === normalizedLocalApplicationNetwork;
-  if (!isUsingLocalhost && network.name !== APTOS_NETWORK && typeof network.name !== "undefined") {
+  if (
+    !isUsingLocalhost &&
+    network.name !== APTOS_NETWORK &&
+    typeof network.name !== "undefined" &&
+    Number(network.chainId ?? -1) !== NetworkToChainId[APTOS_NETWORK]
+  ) {
     const message = (
       <div className="flex flex-col">
         <div>

src/typescript/frontend/src/context/providers.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+// cspell:word bitget
 // cspell:word martianwallet
 // cspell:word pontem
 // cspell:word okwallet
@@ -24,6 +25,7 @@ import { enableMapSet } from "immer";
 import { ConnectToWebSockets } from "./ConnectToWebSockets";
 import { APTOS_NETWORK } from "lib/env";
 import { WalletModalContextProvider } from "./wallet-context/WalletModalContext";
+import { BitgetWallet } from "@bitget-wallet/aptos-wallet-adapter";
 import { PontemWallet } from "@pontem/wallet-adapter-plugin";
 import { RiseWallet } from "@rise-wallet/wallet-adapter";
 import { MartianWallet } from "@martianwallet/aptos-wallet-adapter";
@@ -49,15 +51,21 @@ const data = fetch("https://cdn.jsdelivr.net/npm/@emoji-mart/data@latest/sets/15
     })
 );
 
-const ThemedApp: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const ThemedApp = ({ children }) => {
   const { theme } = useThemeContext();
   const [isOpen, setIsOpen] = useState(false);
   const { isDesktop } = useMatchBreakpoints();
 
   const isMobileMenuOpen = isOpen && !isDesktop;
 
   const wallets = useMemo(
-    () => [new PontemWallet(), new RiseWallet(), new MartianWallet(), new OKXWallet()],
+    () => [
+      new BitgetWallet(),
+      new PontemWallet(),
+      new RiseWallet(),
+      new MartianWallet(),
+      new OKXWallet(),
+    ],
     []
   );
 

src/typescript/frontend/src/context/wallet-context/WalletItem.tsx

@@ -1,3 +1,4 @@
+// cspell:word bitget
 // cspell:word pontem
 import {
   type Wallet,
@@ -16,6 +17,7 @@ import { Arrow } from "components/svg";
 import { useScramble } from "use-scramble";
 import { Emoji } from "utils/emoji";
 import { emoji } from "utils";
+import BitgetIcon from "@icons/BitgetIcon";
 
 const IconProps = {
   width: 28,
@@ -26,6 +28,7 @@ const IconProps = {
 export const WALLET_ICON: { [key: string]: ReactElement } = {
   "okx wallet": <OKXIcon {...IconProps} />,
   petra: <PetraIcon {...IconProps} />,
+  "bitget wallet": <BitgetIcon {...IconProps} />,
   nightly: <NightlyIcon {...IconProps} className="text-ec-blue" />,
   pontem: <PontemIcon {...IconProps} />,
   martian: <MartianIcon {...IconProps} />,

src/typescript/frontend/src/middleware.ts

@@ -59,5 +59,5 @@ export default async function middleware(request: NextRequest) {
 // Note this must be a static string- we can't dynamically construct it.
 export const config = {
   /* eslint-disable-next-line */
-  matcher: `/((?!verify|api|_next/static|_next/image|favicon.ico|logo192.png|icon.png|webclip.png|social-preview.png|okx-logo.png|manifest.json).*)`,
+  matcher: `/((?!verify|api|_next/static|_next/image|favicon.ico|logo192.png|icon.png|webclip.png|social-preview.png|manifest.json|images/wallets).*)`,
 };