Merge pull request #1305 from near/feat/update_examples

Feat/update examples

Author: gagdiez

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts

@@ -28,9 +28,10 @@ import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
 import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
 import { setupOKXWallet } from "@near-wallet-selector/okx-wallet";
 import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
-import { createWeb3Modal } from "@web3modal/wagmi";
-import { reconnect, http, createConfig, type Config } from "@wagmi/core";
-import { type Chain } from "@wagmi/core/chains";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { createAppKit } from "@reown/appkit/react";
+import { defineChain } from "@reown/appkit/networks";
+import type { CreateConnectorFn } from "@wagmi/core";
 import { injected, walletConnect } from "@wagmi/connectors";
 import { CONTRACT_ID } from "../../../constants";
 
@@ -41,11 +42,13 @@ declare global {
   }
 }
 
-// Get a project ID at https://cloud.walletconnect.com
+// Get a project ID at https://cloud.reown.com
 const projectId = "30147604c5f01d0bc4482ab0665b5697";
 
-const near: Chain = {
+const near = defineChain({
   id: 398,
+  caipNetworkId: "eip155:398",
+  chainNamespace: "eip155",
   name: "NEAR Protocol Testnet",
   nativeCurrency: {
     decimals: 18,
@@ -63,33 +66,42 @@ const near: Chain = {
     },
   },
   testnet: true,
-};
+});
 
-const wagmiConfig: Config = createConfig({
-  chains: [near],
-  transports: {
-    [near.id]: http(),
-  },
-  connectors: [
-    walletConnect({
-      projectId,
-      metadata: {
-        name: "NEAR Guest Book",
-        description: "A guest book with comments stored on the NEAR blockchain",
-        url: "https://near.github.io/wallet-selector",
-        icons: ["https://near.github.io/wallet-selector/favicon.ico"],
-      },
-      showQrModal: false,
-    }),
-    injected({ shimDisconnect: true }),
-  ],
+const connectors: Array<CreateConnectorFn> = [
+  walletConnect({
+    projectId,
+    metadata: {
+      name: "NEAR Guest Book",
+      description: "A guest book with comments stored on the NEAR blockchain",
+      url: "https://near.github.io/wallet-selector",
+      icons: ["https://near.github.io/wallet-selector/favicon.ico"],
+    },
+    showQrModal: false, // showQrModal must be false
+  }),
+  injected({ shimDisconnect: true }),
+];
+
+const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  connectors,
+  networks: [near],
 });
-reconnect(wagmiConfig);
 
-const web3Modal = createWeb3Modal({
-  wagmiConfig: wagmiConfig,
+const web3Modal = createAppKit({
+  adapters: [wagmiAdapter],
   projectId,
-  enableOnramp: false,
+  networks: [near],
+  defaultNetwork: near,
+  enableWalletConnect: true,
+  features: {
+    analytics: true,
+    swaps: false,
+    onramp: false,
+    email: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+    socials: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  },
+  coinbasePreference: "eoaOnly", // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
   allWallets: "SHOW",
 });
 
@@ -158,7 +170,10 @@ export class WalletSelectorComponent implements OnInit {
         setupNearMobileWallet(),
         setupMintbaseWallet({ contractId: CONTRACT_ID }),
         setupBitteWallet({ contractId: CONTRACT_ID }),
-        setupEthereumWallets({ wagmiConfig, web3Modal }),
+        setupEthereumWallets({
+          wagmiConfig: wagmiAdapter.wagmiConfig,
+          web3Modal,
+        }),
       ],
     });