diff --git a/apps/desktop/src/setupTests.tsx b/apps/desktop/src/setupTests.tsx
index 9099669dbc..3b80d2a8a9 100644
--- a/apps/desktop/src/setupTests.tsx
+++ b/apps/desktop/src/setupTests.tsx
@@ -113,3 +113,15 @@ jest.spyOn(console, "error").mockImplementation((...args) => {
}
originalError(...args);
});
+
+jest.mock("@walletconnect/core", () => ({
+ Core: jest.fn().mockImplementation(config => ({
+ projectId: config.projectId,
+ })),
+}));
+jest.mock("@reown/walletkit", () => ({
+ WalletKit: jest.fn(),
+}));
+jest.mock("@walletconnect/utils", () => ({
+ WalletConnect: jest.fn(),
+}));
diff --git a/apps/web/package.json b/apps/web/package.json
index 6f6cffb0c1..3fbde0eded 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,6 +34,7 @@
"@emotion/styled": "^11.13.5",
"@hookform/resolvers": "^3.9.1",
"@reduxjs/toolkit": "^2.3.0",
+ "@reown/walletkit": "^1.0.1",
"@tanstack/react-query": "^5.61.5",
"@taquito/beacon-wallet": "^20.1.0",
"@taquito/ledger-signer": "^20.1.0",
@@ -50,6 +51,9 @@
"@umami/state": "workspace:^",
"@umami/tezos": "workspace:^",
"@umami/tzkt": "workspace:^",
+ "@walletconnect/jsonrpc-utils": "^1.0.8",
+ "@walletconnect/types": "^2.16.2",
+ "@walletconnect/utils": "^2.16.2",
"bignumber.js": "^9.1.2",
"bip39": "^3.1.0",
"cross-env": "^7.0.3",
diff --git a/apps/web/src/components/App/App.test.tsx b/apps/web/src/components/App/App.test.tsx
index 1641706292..f1a31b1da7 100644
--- a/apps/web/src/components/App/App.test.tsx
+++ b/apps/web/src/components/App/App.test.tsx
@@ -9,7 +9,29 @@ jest.mock("@chakra-ui/react", () => ({
useBreakpointValue: jest.fn(map => map["lg"]),
}));
+jest.mock("@umami/state", () => {
+ const mockedEmitter = {
+ removeAllListeners: jest.fn(),
+ };
+ return {
+ ...jest.requireActual("@umami/state"),
+ walletKit: {
+ core: {},
+ metadata: {
+ name: "Umami Wallet",
+ description: "Umami Wallet with WalletConnect",
+ url: "https://umamiwallet.com",
+ icons: ["https://umamiwallet.com/assets/favicon-32-45gq0g6M.png"],
+ },
+ on: jest.fn().mockReturnValue(mockedEmitter),
+ },
+ createWalletKit: jest.fn(),
+ };
+});
+
describe("", () => {
+ afterEach(() => jest.restoreAllMocks());
+
it("renders welcome screen for a new user", () => {
render();
diff --git a/apps/web/src/components/App/App.tsx b/apps/web/src/components/App/App.tsx
index bb63400b47..160c292d2a 100644
--- a/apps/web/src/components/App/App.tsx
+++ b/apps/web/src/components/App/App.tsx
@@ -3,13 +3,16 @@ import { useCurrentAccount } from "@umami/state";
import { Layout } from "../../Layout";
import { Welcome } from "../../views/Welcome";
import { BeaconProvider } from "../beacon";
+import { WalletConnectProvider } from "../WalletConnect/WalletConnectProvider";
export const App = () => {
const currentAccount = useCurrentAccount();
return currentAccount ? (
-
+
+
+
) : (
diff --git a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
index 568afcfa36..1bef31a11e 100644
--- a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
+++ b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
@@ -2,23 +2,31 @@ import { Button, Text } from "@chakra-ui/react";
import { useAddPeer } from "@umami/state";
import { BeaconPeers } from "../../beacon";
+import { useOnWalletConnect } from "../../WalletConnect";
import { DrawerContentWrapper } from "../DrawerContentWrapper";
export const AppsMenu = () => {
- const addPeer = useAddPeer();
+ const onBeaconConnect = useAddPeer();
+ const onWalletConnect = useOnWalletConnect();
return (
- Connect with Pairing Request
+ Connect with Pairing Request for Beacon or WalletConnect