Space - id integration (#1322)

* feat: integrating spaceid in uiweb * fix: fixed project id setting error * fix: removed unnecessary code * fix: added space id * Update AddWallets.tsx * fix: made some optimisations * fix: fixed lint issues --------- Co-authored-by: KlausMikhaelson <[email protected]>
push-protocol · May 29, 2024 · 794666e · 794666e
1 parent 06254e6
commit 794666e
Show file tree

Hide file tree

Showing 15 changed files with 5,242 additions and 7,897 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx
@@ -2,7 +2,7 @@ import { ChatPreviewSearchList } from '@pushprotocol/uiweb';
 import styled from 'styled-components';
 
 const ChatPreviewSearchListTest = () => {
-  const walletAddress = "0xFA3F8E79fb9B03e7a04295594785b91588Aa4DC8";
+  const walletAddress = 'fabio.eth';
   return (
     <>
       <Conatiner>

diff --git a/packages/examples/sdk-frontend-react/src/app/constants.ts b/packages/examples/sdk-frontend-react/src/app/constants.ts
@@ -1,3 +1,2 @@
 // the unique id for a chat or the receivers's wallet ddress or domain name
-export const CHAT_ID =
-  '34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4';
+export const CHAT_ID = 'allen.bnb';
diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
@@ -10,6 +10,7 @@
     "@livepeer/react": "^2.6.0",
     "@pushprotocol/socket": "^0.5.0",
     "@unstoppabledomains/resolution": "^8.5.0",
+    "@web3-name-sdk/core": "^0.1.15",
     "@web3-onboard/coinbase": "^2.2.5",
     "@web3-onboard/core": "^2.21.1",
     "@web3-onboard/injected-wallets": "^2.10.5",

diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx
@@ -42,7 +42,7 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
       setFormattedAddress(address);
       if (!options.chatPreviewPayload?.chatGroup) {
         try {
-          const result = await resolveWeb3Name(address, user);
+          const result = await resolveWeb3Name(address, user?.env);
           if (result) setWeb3Name(result);
         } catch (e) {
           // console.debug(e);

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -93,7 +93,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   // To setup web3 name, asynchrounously
   const setupWeb3Name = async (address: string) => {
     console.debug('UIWeb::ChatProfile::setupWeb3Name sending address for resolution', address);
-    const result = await resolveWeb3Name(address, user);
+    const result = await resolveWeb3Name(address, user?.env);
     console.debug('UIWeb::ChatProfile::setupWeb3Name got result as ', address, result);
 
     setInitialized((prevState) => ({
@@ -372,7 +372,7 @@ const AddonComponentSection = styled(Section)`
 
   @media ${device.mobileL} {
     gap: 5px;
-  } ;
+  }
 `;
 
 const ImageItem = styled.div`

diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { IUser } from '@pushprotocol/restapi';
+import { IUser, CONSTANTS } from '@pushprotocol/restapi';
 import { ethers } from 'ethers';
 import styled from 'styled-components';
 
@@ -15,7 +15,7 @@ import { ProfileContainer } from '../reusables';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { UpdateUserProfileModal } from './UpdateUserProfileModal';
 
-import { CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config';
+import { Constants, CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config';
 import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg';
 import UserProfileIcon from '../../../icons/userCircleGear.svg';
 import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../../../types';
@@ -50,7 +50,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
     (async () => {
       const fetchedUser = await fetchChatProfile({ user });
       if (fetchedUser) {
-        const result = await resolveWeb3Name(fetchedUser?.wallets, user);
+        const result = await resolveWeb3Name(fetchedUser?.wallets, user?.env);
         setWeb3Name(result);
         setUserProfile(fetchedUser);
       }

diff --git a/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx b/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx
@@ -62,7 +62,6 @@ export const AddWallets = ({
   };
 
   const handleSearch = async ({ searchedText }: { searchedText: string }): Promise<void> => {
-    //fix ens search
     const newChatUser = await getNewChatUser({
       searchText: searchedText,
       fetchChatProfile: fetchUserProfile,

diff --git a/packages/uiweb/src/lib/components/supportChat/AddressInfo.tsx b/packages/uiweb/src/lib/components/supportChat/AddressInfo.tsx
@@ -1,32 +1,34 @@
-import { ethers } from 'ethers';
 import React, { useContext, useEffect, useState } from 'react';
+
 import styled from 'styled-components';
-import { Constants, ENV, InfuraAPIKey, allowedNetworks } from '../../config';
+import { ethers } from 'ethers';
+
+import { ChatProps } from './Chat';
+
 import { SupportChatPropsContext } from '../../context';
-import { copyToClipboard, pCAIP10ToWallet, resolveWeb3Name, } from '../../helpers';
+import { Constants, ENV, InfuraAPIKey, allowedNetworks } from '../../config';
+
+import { copyToClipboard, pCAIP10ToWallet, resolveWeb3Name } from '../../helpers';
 import { CopySvg } from '../../icons/CopySvg';
-import { ChatProps } from './Chat';
 
 export const AddressInfo: React.FC = () => {
-
   const { supportAddress, env, theme, user } = useContext<ChatProps>(SupportChatPropsContext);
 
   const [ensName, setEnsName] = useState<string>('');
   const [pushUser, setPushUser] = useState<any>({});
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const walletAddress = pCAIP10ToWallet(supportAddress!);
-  const l1ChainId = (allowedNetworks[env!]?.includes(1)) ? 1 : 5;
+  const l1ChainId = allowedNetworks[env!]?.includes(1) ? 1 : 5;
   const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);
 
   useEffect(() => {
     const getUser = async () => {
-if(user){
-  const fetchedUser = await user.info();
- const ensNameResult = await resolveWeb3Name(supportAddress!, user) 
-  setEnsName(ensNameResult!)
-setPushUser(fetchedUser);
-}
-
+      if (user) {
+        const fetchedUser = await user.info();
+        const ensNameResult = await resolveWeb3Name(supportAddress!, user?.env);
+        setEnsName(ensNameResult!);
+        setPushUser(fetchedUser);
+      }
     };
     getUser();
   }, [supportAddress, user]);
@@ -36,20 +38,13 @@ setPushUser(fetchedUser);
       <Section>
         <ImgSpan>
           <Image
-            src={
-              pushUser?.profile?.picture
-                ? pushUser?.profile.picture
-                : Constants.DEFAULT_PROFILE_PICTURE
-            }
+            src={pushUser?.profile?.picture ? pushUser?.profile.picture : Constants.DEFAULT_PROFILE_PICTURE}
             alt="address profile"
           />
         </ImgSpan>
         <Span theme={theme}>
           {ensName && `${ensName}`}
-          {!ensName &&
-            `${walletAddress.substring(0, 8)}...${walletAddress.substring(
-              walletAddress.length - 8
-            )}`}
+          {!ensName && `${walletAddress.substring(0, 8)}...${walletAddress.substring(walletAddress.length - 8)}`}
         </Span>
       </Section>
       {!isCopied && (

diff --git a/packages/uiweb/src/lib/config/constants.ts b/packages/uiweb/src/lib/config/constants.ts
@@ -60,7 +60,7 @@ const TESTNET_NETWORK = {
   ARBITRUM: 'eip155:421614',
   FUSE: 'eip155:123',
   BERACHAIN: 'eip155:80085',
-  CYBER_CONNECT: 'eip155:111557560'
+  CYBER_CONNECT: 'eip155:111557560',
 };
 const MAINET_NETWORK = {
   ETHEREUM: 'eip155:1',
@@ -70,7 +70,7 @@ const MAINET_NETWORK = {
   POLYGON_ZK_EVM: 'eip155:1101',
   ARBITRUM: 'eip155:42161',
   FUSE: 'eip155:122',
-  CYBER_CONNECT: "eip155:7560"
+  CYBER_CONNECT: 'eip155:7560',
 };
 
 export const BLOCKCHAIN_NETWORK = {
@@ -88,7 +88,7 @@ export const allowedNetworks = {
     10, // for optimism mainnet
     42161, // for arbitrum mainnet
     122, // for fuse mainnet
-    7569 // for cyber connect mainnet
+    7569, // for cyber connect mainnet
   ],
   dev: [
     11155111, // for eth sepolia
@@ -99,7 +99,7 @@ export const allowedNetworks = {
     123, // for fuse testnet
     80085, // for berachain testnet
     2442, // polygon zkevm
-    111557560 // cyber connect testnet
+    111557560, // cyber connect testnet
   ],
   staging: [
     // 42, //for kovan
@@ -111,7 +111,7 @@ export const allowedNetworks = {
     123, // for fuse testnet
     80085, // for berachain testnet
     2442, // polygon zkevm
-    111557560 // cyber connect testnet
+    111557560, // cyber connect testnet
   ],
   local: [
     11155111, // for eth sepolia
@@ -122,7 +122,7 @@ export const allowedNetworks = {
     123, // for fuse testnet
     80085, // for berachain testnet
     2442, // polygon zkevm
-    111557560 // cyber connect testnet
+    111557560, // cyber connect testnet
   ],
 };
 
@@ -152,10 +152,8 @@ export const FILE_ICON = (extension: string) =>
 
 // Livekit Server URLs
 export const LIVEKIT_SERVER_URL = 'https://spacev2-demo-17wvllxz.livekit.cloud';
-export const LIVEKIT_SERVER_WEBSOCKET_URL =
-  'wss://spacev2-demo-17wvllxz.livekit.cloud';
-export const LIVEKIT_TOKEN_GENERATOR_SERVER_URL =
-  'https://ms-lk-server.onrender.com';
+export const LIVEKIT_SERVER_WEBSOCKET_URL = 'wss://spacev2-demo-17wvllxz.livekit.cloud';
+export const LIVEKIT_TOKEN_GENERATOR_SERVER_URL = 'https://ms-lk-server.onrender.com';
 export const GUEST_MODE_ACCOUNT = '0x0000000000000000000000000000000000000001';
 
 export const pushBotAddress = "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666";
diff --git a/packages/uiweb/src/lib/helpers/address.ts b/packages/uiweb/src/lib/helpers/address.ts
@@ -1,8 +1,8 @@
-import type { InfuraProvider, Web3Provider } from '@ethersproject/providers';
-import { CONSTANTS, Env, PushAPI, SignerType } from '@pushprotocol/restapi';
+import { SignerType, CONSTANTS } from '@pushprotocol/restapi';
 import { ethers } from 'ethers';
-import { CoreContractChainId, InfuraAPIKey } from '../config';
-import { getUdResolver } from './udResolver';
+import { ENV, allowedNetworks } from '../config';
+import { createWeb3Name } from '@web3-name-sdk/core';
+import { getUdResolverClient } from './udResolver';
 
 /**
  *
@@ -46,69 +46,29 @@ export const pCAIP10ToWallet = (wallet: string): string => {
   return wallet;
 };
 
-export const resolveEns = (address: string, provider: Web3Provider) => {
+export const resolveWeb3Name = async (address: string, env: ENV) => {
+  env = env || CONSTANTS.ENV.PROD;
   const walletLowercase = pCAIP10ToWallet(address).toLowerCase();
   const checksumWallet = ethers.utils.getAddress(walletLowercase);
-  // let provider = ethers.getDefaultProvider('mainnet');
-  // if (
-  //   window.location.hostname == 'app.push.org' ||
-  //   window.location.hostname == 'staging.push.org' ||
-  //   window.location.hostname == 'dev.push.org' ||
-  //   window.location.hostname == 'alpha.push.org' ||
-  //   window.location.hostname == 'w2w.push.org'
-  // ) {
-  //   provider = new ethers.providers.InfuraProvider(
-  //     'mainnet',
-  //     appConfig.infuraAPIKey
-  //   );
-  // }
-
-  provider.lookupAddress(checksumWallet).then((ens) => {
-    if (ens) {
-      return ens;
-    } else {
-      return null;
-    }
-  });
-};
-
-export const getProvider = (user: PushAPI | undefined): any => {
-  const envKey = user ? user.env : CONSTANTS.ENV.PROD; // Default to 'PROD' if user.env is not in Constants.ENV
-  const chainId = CoreContractChainId[envKey as keyof typeof CoreContractChainId]; // Use 'as' to assert the type
-  const provider = new ethers.providers.InfuraProvider(chainId, InfuraAPIKey);
-
-  return provider;
-};
-
-export const resolveWeb3Name = async (address: string, user: PushAPI | undefined) => {
-  const walletLowercase = pCAIP10ToWallet(address).toLowerCase();
-  const checksumWallet = ethers.utils.getAddress(walletLowercase);
-
-  // get provider
-  const provider = getProvider(user);
+  const web3NameClient = createWeb3Name();
 
   let result: string | null = null;
 
   try {
-    const ens = await provider.lookupAddress(checksumWallet);
-    if (ens) {
-      result = ens;
-    } else {
-      try {
-        const udResolver = getUdResolver(user ? user.env : CONSTANTS.ENV.PROD);
-        if (!udResolver) {
-          throw new Error('UIWeb::helpers::address::resolveWeb3Name::Error in UD resolver');
-        }
+    result = await web3NameClient.getDomainName({
+      address: checksumWallet,
+      queryChainIdList: allowedNetworks[env],
+    });
+    if (!result) {
+      const udResolverClient = getUdResolverClient(env);
+      if (!udResolverClient) {
+        throw new Error('UIWeb::helpers::address::resolveWeb3Name::Error in UD resolver');
+      }
+      // attempt reverse resolution on provided address
+      const udDomainName = await udResolverClient.reverse(checksumWallet);
 
-        // attempt reverse resolution on provided address
-        const udName = await udResolver.reverse(checksumWallet);
-        if (udName) {
-          result = udName;
-        } else {
-          result = null;
-        }
-      } catch (err) {
-        console.error('UIWeb::helpers::address::resolveWeb3Name::Error in resolving via UD', err);
+      if (udDomainName) {
+        result = udDomainName;
       }
     }
   } catch (err) {

diff --git a/packages/uiweb/src/lib/helpers/chat/search.ts b/packages/uiweb/src/lib/helpers/chat/search.ts
@@ -1,12 +1,10 @@
 import type { Env, IFeeds, IUser, PushAPI } from '@pushprotocol/restapi';
-import { add } from 'date-fns';
 import { ethers } from 'ethers';
-import { CoreContractChainId, ENV, InfuraAPIKey, ProfilePicture } from '../../config';
-import type { FetchProfileParams, GetProfileParams } from '../../hooks';
 import type { ChatFeedsType, NotificationFeedsType, ParsedNotificationType, Web3NameListType } from '../../types';
 import { pCAIP10ToWallet, walletToPCAIP10 } from '../address';
-import { getUdResolver } from '../udResolver';
+import { getUdResolverClient } from '../udResolver';
 import { displayDefaultUser } from './user';
+import { createWeb3Name } from '@web3-name-sdk/core';
 
 export const getObjectsWithMatchingKeys = (
   obj: ChatFeedsType,
@@ -60,23 +58,19 @@ export const getNewChatUser = async ({
 };
 
 export const getAddress = async (searchText: string, env: Env) => {
-  const udResolver = getUdResolver(env);
-  const provider = new ethers.providers.InfuraProvider(CoreContractChainId[env], InfuraAPIKey);
+  const udResolverClient = getUdResolverClient(env);
+  const web3NameClient = createWeb3Name();
   let address: string | null = null;
   if (searchText.includes('.')) {
     try {
-      if (!udResolver) throw new Error('No udResolver available for the network');
-      address = await udResolver?.owner(searchText);
-    } catch (err) {
-      try {
-        address = await provider.resolveName(searchText);
-      } catch (err) {
-        console.debug(err);
+      address = await web3NameClient.getAddress(searchText);
+      if (!address) {
+        if (!udResolverClient) throw new Error('No udResolverClient available for the network');
+        address = await udResolverClient?.owner(searchText);
       }
-
+    } catch (err) {
       console.debug(err);
     }
-
     return address || null;
   } else if (await ethers.utils.isAddress(pCAIP10ToWallet(searchText))) {
     return searchText;