feat: enable Starknet wallet & message ID parsing on UI

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -17,10 +17,10 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
-    "@hyperlane-xyz/registry": "13.13.0",
-    "@hyperlane-xyz/sdk": "12.4.0",
-    "@hyperlane-xyz/utils": "12.4.0",
-    "@hyperlane-xyz/widgets": "12.4.0",
+    "@hyperlane-xyz/registry": "13.0.0-starknet.1",
+    "@hyperlane-xyz/sdk": "13.0.0-starknet.1",
+    "@hyperlane-xyz/utils": "13.0.0-starknet.1",
+    "@hyperlane-xyz/widgets": "13.0.0-starknet.1",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
@@ -43,7 +43,7 @@
     "cosmjs-types": "^0.9.0",
     "formik": "^2.4.6",
     "framer-motion": "^10.16.4",
-    "next": "^15.0.3",
+    "next": "^15.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-toastify": "^10.0.6",

src/consts/config.ts

@@ -51,7 +51,12 @@ export const config: Config = Object.freeze({
   version,
   transferBlacklist,
   walletConnectProjectId,
-  walletProtocols: [ProtocolType.Ethereum, ProtocolType.Sealevel, ProtocolType.Cosmos],
+  walletProtocols: [
+    ProtocolType.Ethereum,
+    ProtocolType.Sealevel,
+    ProtocolType.Cosmos,
+    ProtocolType.Starknet,
+  ],
   shouldDisableChains: false,
   rpcOverrides,
 });

src/features/transfer/utils.ts

@@ -87,8 +87,12 @@ export function tryGetMsgIdFromTransferReceipt(
     // IBC transfers have no message IDs
     if (receipt.type === ProviderType.CosmJs) return undefined;
 
-    // TODO: Remove this once we have a way to get the message ID from SDK
-    if (receipt.type === ProviderType.Starknet) return undefined;
+    if (receipt.type === ProviderType.Starknet) {
+      receipt = {
+        type: ProviderType.Starknet,
+        receipt: receipt.receipt as any,
+      };
+    }
 
     if (receipt.type === ProviderType.Viem) {
       // Massage viem type into ethers type because that's still what the

src/features/wallet/context/StarknetWalletContext.tsx

@@ -1,6 +1,9 @@
+import { getStarknetChains } from '@hyperlane-xyz/widgets';
 import { Chain } from '@starknet-react/chains';
 import { StarknetConfig, publicProvider, voyager } from '@starknet-react/core';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
+import { InjectedConnector } from 'starknetkit/injected';
+import { useMultiProvider } from '../../chains/hooks';
 
 // temporary using const sepolia chain
 const sepolia: Chain = {
@@ -47,8 +50,35 @@ const sepolia: Chain = {
 };
 
 export function StarknetWalletContext({ children }: PropsWithChildren<unknown>) {
+  const multiProvider = useMultiProvider();
+  const chainsFromRegistry = getStarknetChains(multiProvider);
+  const connectors = useMemo(
+    () => [
+      new InjectedConnector({ options: { id: 'braavos', name: 'Braavos' } }),
+      new InjectedConnector({ options: { id: 'argentX', name: 'Argent X' } }),
+    ],
+    [],
+  );
+
+  // TODO: remove after sepolia is included in registry
+  const uniqueChains = useMemo(() => {
+    const combinedChains = [...chainsFromRegistry, sepolia];
+    const chainMap = combinedChains.reduce((map, chain) => {
+      if (!map.has(chain.id)) {
+        map.set(chain.id, chain);
+      }
+      return map;
+    }, new Map<bigint, Chain>());
+    return Array.from(chainMap.values());
+  }, [chainsFromRegistry]);
+
   return (
-    <StarknetConfig chains={[sepolia]} provider={publicProvider()} explorer={voyager}>
+    <StarknetConfig
+      chains={uniqueChains}
+      provider={publicProvider()}
+      connectors={connectors}
+      explorer={voyager}
+    >
       {children}
     </StarknetConfig>
   );