[Front] Show only compatible wallet providers in wallet connect (#356)

packages/demo/usecase-demo/package.json

@@ -15,7 +15,6 @@
     "generate-env": "node tools/generateEnv.mjs"
   },
   "dependencies": {
-    "@ensdomains/ensjs": "3.4.4",
     "@fontsource-variable/anybody": "^5.0.19",
     "@fontsource/inter": "^5.0.17",
     "@fontsource/mulish": "^5.0.16",
@@ -34,8 +33,7 @@
     "@tanstack/react-query": "^5.18.1",
     "@tanstack/react-router": "^1.22.3",
     "@vercel/analytics": "^1.3.1",
-    "@web3modal/wagmi": "^3.5.5",
-    "blockies-ts": "^1.0.0",
+    "@web3modal/wagmi": "^5.1.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "medium-zoom": "^1.1.0",
@@ -47,8 +45,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "use-local-storage-state": "^19.1.0",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "wagmi": "^2.12.11",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

packages/demo/usecase-demo/src/modules/activeRentals.query.ts

@@ -1,5 +1,5 @@
+import { Address } from '@/types';
 import { queryOptions } from '@tanstack/react-query';
-import { Address } from 'wagmi';
 import { getDataProtectorClient } from '@/externals/dataProtectorClient.ts';
 
 export function activeRentalsQuery({ userAddress }: { userAddress: Address }) {

packages/demo/usecase-demo/src/modules/activeSubscriptions.query.ts

@@ -1,5 +1,5 @@
+import { Address } from '@/types';
 import { queryOptions } from '@tanstack/react-query';
-import { Address } from 'wagmi';
 import { getDataProtectorClient } from '@/externals/dataProtectorClient.ts';
 
 export function activeSubscriptionsQuery({

packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx

@@ -1,3 +1,4 @@
+import { Address } from '@/types';
 import {
   WorkflowError,
   type ConsumeProtectedDataStatuses,
@@ -6,7 +7,6 @@ import { useMutation } from '@tanstack/react-query';
 import { clsx } from 'clsx';
 import { useEffect, useState } from 'react';
 import { AlertOctagon, CheckCircle, DownloadCloud, Lock } from 'react-feather';
-import { Address } from 'wagmi';
 import { Alert } from '@/components/Alert.tsx';
 import { DocLink } from '@/components/DocLink';
 import { LoadingSpinner } from '@/components/LoadingSpinner.tsx';

packages/demo/usecase-demo/src/modules/profile/LoginGuard.tsx

@@ -1,15 +1,14 @@
 import { useNavigate } from '@tanstack/react-router';
 import { FC, ReactNode, useEffect } from 'react';
 import { AlertCircle } from 'react-feather';
-import { useNetwork, useSwitchNetwork } from 'wagmi';
+import { useSwitchChain, useAccount } from 'wagmi';
 import { Button } from '@/components/ui/button.tsx';
 import { useUserStore } from '@/stores/user.store.ts';
 
 const LoginGuard: FC<{ children: ReactNode }> = ({ children }) => {
   const { isInitialized, isConnected } = useUserStore();
-  const { chain } = useNetwork();
-  const { chains, error, isLoading, pendingChainId, switchNetwork } =
-    useSwitchNetwork();
+  const { chains, error, isPending, switchChain } = useSwitchChain();
+  const { chain } = useAccount();
 
   const navigate = useNavigate();
 
@@ -33,13 +32,13 @@ const LoginGuard: FC<{ children: ReactNode }> = ({ children }) => {
           <p>Oops, you're on the wrong network</p>
           <p>Click on the following button to switch to the right network</p>
           <Button
-            disabled={!switchNetwork || chain?.id === chains[0]?.id}
+            disabled={!isPending || chain?.id === chains[0]?.id}
             key={chains[0]?.id}
-            onClick={() => switchNetwork?.(chains[0]?.id)}
+            onClick={() => switchChain({ chainId: chains[0]?.id })}
             className="mt-4"
           >
             Switch to {chains[0].name}
-            {isLoading && pendingChainId === chains[0]?.id && ' (switching)'}
+            {isPending && ' (switching)'}
           </Button>
           {error && (
             <div className="ml-1 mt-1.5 flex items-center text-red-500">

packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx

@@ -1,9 +1,9 @@
+import { Address } from '@/types';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, Link, useRouter } from '@tanstack/react-router';
 import { clsx } from 'clsx';
 import { EyeOff, Tag } from 'react-feather';
 import { ChevronLeft } from 'react-feather';
-import { Address } from 'wagmi';
 import { Alert } from '@/components/Alert.tsx';
 import { CircularLoader } from '@/components/CircularLoader.tsx';
 import { DocLink } from '@/components/DocLink';

packages/demo/usecase-demo/src/routes/_explore/user.$profileAddress.tsx

@@ -1,11 +1,11 @@
+import { Address } from '@/types.ts';
 import { useQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { clsx } from 'clsx';
-import { useEffect, useState } from 'react';
 import { Info } from 'react-feather';
+import { useEnsName } from 'wagmi';
 import { DocLink } from '@/components/DocLink.tsx';
 import { getDataProtectorClient } from '@/externals/dataProtectorClient.ts';
-import { getEnsForAddress } from '@/externals/getEnsForAddress.ts';
 import cardStyles from '@/modules/home/allCreators/OneCreatorCard.module.css';
 import { OneContentCard } from '@/modules/home/latestContent/OneContentCard.tsx';
 import avatarStyles from '@/modules/profile/profile.module.css';
@@ -35,16 +35,9 @@ export function UserProfile() {
     address: profileAddress,
   });
 
-  const [ensName, setEnsName] = useState();
-
-  useEffect(() => {
-    function getEns() {
-      return getEnsForAddress(profileAddress);
-    }
-    getEns().then((ens) => {
-      ens && setEnsName(ens);
-    });
-  }, []);
+  const { data: ensName } = useEnsName({
+    address: profileAddress as Address,
+  });
 
   const {
     isSuccess,
@@ -80,7 +73,7 @@ export function UserProfile() {
           'relative z-10 mt-20 size-[118px] rounded-full border-4 border-[#D9D9D9] bg-black'
         )}
       />
-      <div className="-mt-10 mb-10 ml-[136px] font-inter text-white">
+      <div className="-mt-10 mb-10 ml-[136px] grid font-inter text-white">
         <div className="group inline-block break-all pr-4 leading-4">
           <span className="inline group-hover:hidden">
             {truncateAddress(profileAddress)}
@@ -92,10 +85,9 @@ export function UserProfile() {
             </span>
           )}
         </div>
+        {ensName && <p>{ensName}</p>}
       </div>
 
-      {ensName && <div>{ensName}</div>}
-
       {isError && (
         <Alert variant="error" className="mt-4">
           <p>
@@ -125,7 +117,7 @@ export function UserProfile() {
           <DocLink className="-mt-3">
             {userCollections.slice(1).map((c) => {
               return (
-                <div>
+                <div key={c.id}>
                   Collection {Number(c.id)} with{' '}
                   {pluralize(c.protectedDatas.length, 'protected data')}.
                 </div>

packages/demo/usecase-demo/src/stores/user.store.ts

@@ -1,4 +1,5 @@
-import type { Address, Connector } from 'wagmi';
+import { Address } from '@/types';
+import type { Connector } from 'wagmi';
 import { create } from 'zustand';
 
 type UserState = {

packages/demo/usecase-demo/src/types.ts

@@ -0,0 +1 @@
+export type Address = `0x${string}`;

packages/demo/usecase-demo/src/utils/injected-wallet-provider/injected-wallet-provider.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from 'eventemitter3';
+import {
+  EIP6963AnnounceProviderEvent,
+  EIP6963ProviderDetail,
+  EIP6963RequestProviderEvent,
+} from './types';
+
+// This class extends EventEmitter to be able to emit events and give our DApp an interface to subscribe to
+export class InjectedWalletProvider extends EventEmitter {
+  // This will hold the details of the providers received
+  providerDetails: EIP6963ProviderDetail[];
+
+  constructor() {
+    super();
+    this.providerDetails = [];
+  }
+
+  // This method processes the provider details announced and adds them to the providerDetails array
+  private providerReceived(providerDetail: EIP6963ProviderDetail): void {
+    this.providerDetails.push(providerDetail);
+    this.emit('providerDetailsUpdated');
+  }
+
+  // This method listens for the 'announceProvider' event and processes the provider details announced
+  subscribe(): void {
+    window.addEventListener(
+      'eip6963:announceProvider',
+      (event: EIP6963AnnounceProviderEvent) => {
+        this.providerReceived(event.detail);
+      }
+    );
+  }
+
+  // This method is used to request wallet providers by firing a 'EIP6963RequestProviderEvent'
+  requestProviders(): void {
+    this.providerDetails = [];
+    window.dispatchEvent(new EIP6963RequestProviderEvent());
+  }
+}

packages/demo/usecase-demo/src/utils/injected-wallet-provider/types.ts

@@ -0,0 +1,43 @@
+// Please refer to EIP-6963 specs: https://eips.ethereum.org/EIPS/eip-6963
+// Declare a global interface to extend the WindowEventMap with a custom event "eip6963:announceProvider"
+declare global {
+  interface WindowEventMap {
+    'eip6963:announceProvider': EIP6963AnnounceProviderEvent;
+  }
+}
+
+// Define a class for the "eip6963:requestProvider" event
+export class EIP6963RequestProviderEvent extends Event {
+  constructor() {
+    super('eip6963:requestProvider');
+  }
+}
+
+// Define an interface for the "eip6963:announceProvider" event
+export interface EIP6963AnnounceProviderEvent extends Event {
+  type: 'eip6963:announceProvider';
+  detail: EIP6963ProviderDetail;
+}
+
+// Define an interface for the provider details
+export interface EIP6963ProviderDetail {
+  info: EIP6963ProviderInfo;
+  provider: EIP1193Provider;
+}
+
+// Define an interface for the provider information
+export interface EIP6963ProviderInfo {
+  uuid: string; // Unique identifier of the wallet extension announcement, keep in mind it changes on every request-announcement cycle
+  name: string; // Name of the wallet extension
+  icon: string; // Icon for the wallet extension
+  rdns: string; // Reverse DNS name of the wallet extension
+}
+
+// Define an interface for the EIP1193 provider.
+// It's the same interface we are used to access with 'window.ethereum'
+export interface EIP1193Provider {
+  request(request: {
+    method: string;
+    params?: Array<unknown> | Record<string, unknown>;
+  }): Promise<unknown>;
+}

packages/demo/usecase-demo/src/utils/localStorageContentMap.ts

@@ -1,4 +1,4 @@
-import { Address } from 'wagmi';
+import { Address } from '@/types';
 import { LOCAL_STORAGE_PREFIX } from '@/utils/localStorage.ts';
 
 type TaskData = {