fix(widget): used primaryname hook instead of hybridPrimaryName

JustaName-id · Jan 9, 2025 · 90d5919 · 90d5919
1 parent 6af4627
commit 90d5919
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 118 deletions.
diff --git a/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx b/packages/@justweb3/widget/src/lib/components/JustWeb3Button/index.tsx
@@ -6,6 +6,7 @@ import {
   useEnabledMApps,
   useEnsAvatar,
   useMountedAccount,
+  useOffchainResolvers,
   useRecords
 } from '@justaname.id/react';
 import {
@@ -47,6 +48,9 @@ export interface JustWeb3Buttonrops {
   logout?: () => void;
 }
 
+const ENS_MAINNET_RESOLVER = '0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41';
+const ENS_SEPOLIA_RESOLVER = '0x8FADE66B79cC9f707aB26799354482EB93a5B7dD';
+
 export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
   children,
   logout,
@@ -58,7 +62,7 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
   const [openConfiguration, setOpenConfiguration] = useState(false);
   const { plugins, mApps, config } = useContext(JustWeb3Context);
   const { createPluginApi } = useContext(PluginContext);
-  const { address, isConnected } = useMountedAccount();
+  const { address, isConnected, chainId } = useMountedAccount();
   const [mobileDialogOpen, setMobileDialogOpen] = useState(false);
   const { disconnect } = useDisconnect();
   const {
@@ -72,6 +76,8 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
     ens: connectedEns?.ens || '',
   });
 
+  const { offchainResolvers } = useOffchainResolvers();
+
   const { enabledMApps } = useEnabledMApps({
     ens: connectedEns?.ens || '',
   });
@@ -98,7 +104,21 @@ export const JustWeb3Button: FC<JustWeb3Buttonrops> = ({
         return acc;
       },
       [] as Records[]
-    );
+    ).filter((name) => {
+      const resolverAddress =
+        chainId === 1 ? ENS_MAINNET_RESOLVER : ENS_SEPOLIA_RESOLVER;
+      const offchainResolver = offchainResolvers?.offchainResolvers.find(
+        (resolver) => resolver.chainId === chainId
+      );
+
+      return !(
+        name.records.resolverAddress !== resolverAddress &&
+        name.records.resolverAddress !== offchainResolver?.resolverAddress
+      );
+    })
+      .sort((a, b) => {
+        return a.ens.localeCompare(b.ens);
+      });
   }, [accountEnsNames, accountSubnames]);
 
   const hasTwitterOrX = useMemo(() => {

diff --git a/packages/@justweb3/widget/src/lib/dialogs/ConfigurationDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/ConfigurationDialog/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '@justweb3/ui';
 import { FC, useContext } from 'react';
 import { useDisconnect } from 'wagmi';
-import { JustWeb3Context, useJustWeb3 } from '../../providers';
+import { JustWeb3Context } from '../../providers';
 import { DefaultDialog } from '../DefaultDialog';
 
 export interface ConfigurationDialogProps {
@@ -31,7 +31,6 @@ export const ConfigurationDialog: FC<ConfigurationDialogProps> = ({
   } = useContext(JustWeb3Context);
   const { address, isConnected } = useMountedAccount();
   const { disconnect } = useDisconnect();
-  const { connectedEns, isEnsAuthPending } = useJustWeb3();
 
   const { NameHashJustaNameResolverSet, isSetNameHashJustaNameResolverPending, setNameHashJustaNameResolver } = useSetNameHashJustaNameResolver()
 
@@ -71,33 +70,24 @@ export const ConfigurationDialog: FC<ConfigurationDialogProps> = ({
           : null
       }
     >
-      {!connectedEns || isEnsAuthPending ? (
-        <div
-          style={{
-            position: 'relative',
-            padding: '24px',
-          }}
-        >
-          <LoadingSpinner color={'var(--justweb3-primary-color)'} />
-        </div>
-      ) : (
-        <Flex justify="space-between" direction="column" gap="20px">
-          <Flex direction='row' gap={'10px'} align={'center'} style={{ marginTop: 9 }} >
-            <BackBtn onClick={() => handleOpenDialog(false)} />
-            <H2 style={{
-              fontWeight: 700,
-            }}>Configure</H2>
-          </Flex>
-          <P style={{ fontSize: 12 }}>
-            To use your JustaName primary account across the blockchain ecosystem, you need to configure your resolver.
-          </P>
-          {isSetNameHashJustaNameResolverPending ? <LoadingSpinner color={'var(--justweb3-primary-color)'} /> :
-            <Button disabled={NameHashJustaNameResolverSet} variant='primary' onClick={setNameHashJustaNameResolver} >
-              {NameHashJustaNameResolverSet ? 'Configured' : 'Configure'}
-            </Button>
-          }
+      <Flex justify="space-between" direction="column" gap="20px">
+        <Flex direction='row' gap={'10px'} align={'center'} style={{ marginTop: 9 }} >
+          <BackBtn onClick={() => handleOpenDialog(false)} />
+          <H2 style={{
+            fontWeight: 700,
+          }}>Configure</H2>
         </Flex>
-      )}
+        <P style={{ fontSize: 12 }}>
+          To use your JustaName primary account across the blockchain ecosystem, you need to configure your resolver.
+        </P>
+        {isSetNameHashJustaNameResolverPending ? <Flex style={{
+          position: 'relative'
+        }}> <LoadingSpinner color={'var(--justweb3-primary-color)'} /> </Flex> :
+          <Button disabled={NameHashJustaNameResolverSet} variant='primary' onClick={setNameHashJustaNameResolver} >
+            {NameHashJustaNameResolverSet ? 'Configured' : 'Configure'}
+          </Button>
+        }
+      </Flex>
     </DefaultDialog>
   );
 };
diff --git a/packages/@justweb3/widget/src/lib/dialogs/PrimaryNamesDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/PrimaryNamesDialog/index.tsx
@@ -1,4 +1,4 @@
-import { Records, useAccountEnsNames, useAccountSubnames, useMountedAccount, usePrimaryName, useSetPrimaryName } from '@justaname.id/react';
+import { Records, useAccountEnsNames, useAccountSubnames, useMountedAccount, useOffchainResolvers, usePrimaryName, useSetPrimaryName } from '@justaname.id/react';
 import {
   Avatar,
   BackBtn,
@@ -17,6 +17,9 @@ import { useDisconnect } from 'wagmi';
 import { JustWeb3Context, useJustWeb3 } from '../../providers';
 import { DefaultDialog } from '../DefaultDialog';
 
+const ENS_MAINNET_RESOLVER = '0x4976fb03C32e5B8cfe2b6cCB31c09Ba78EBaBa41';
+const ENS_SEPOLIA_RESOLVER = '0x8FADE66B79cC9f707aB26799354482EB93a5B7dD';
+
 export interface PrimaryNamesDialogProps {
   open: boolean;
   handleOpenDialog: (open: boolean) => void;
@@ -31,13 +34,16 @@ export const PrimaryNamesDialog: FC<PrimaryNamesDialogProps> = ({
   const {
     config: { disableOverlay },
   } = useContext(JustWeb3Context);
-  const { address, isConnected } = useMountedAccount();
+  const { address, isConnected, chainId } = useMountedAccount();
   const { disconnect } = useDisconnect();
   const { connectedEns, isEnsAuthPending } = useJustWeb3();
 
   const { accountSubnames, isAccountSubnamesPending } = useAccountSubnames();
   const { accountEnsNames, isAccountEnsNamesPending } = useAccountEnsNames();
 
+  const { offchainResolvers } =
+    useOffchainResolvers();
+
   const allNames = useMemo(() => {
     return [...accountEnsNames, ...accountSubnames].reduce(
       (acc, subname) => {
@@ -47,7 +53,21 @@ export const PrimaryNamesDialog: FC<PrimaryNamesDialogProps> = ({
         return acc;
       },
       [] as Records[]
-    );
+    ).filter((name) => {
+      const resolverAddress =
+        chainId === 1 ? ENS_MAINNET_RESOLVER : ENS_SEPOLIA_RESOLVER;
+      const offchainResolver = offchainResolvers?.offchainResolvers.find(
+        (resolver) => resolver.chainId === chainId
+      );
+
+      return !(
+        name.records.resolverAddress !== resolverAddress &&
+        name.records.resolverAddress !== offchainResolver?.resolverAddress
+      );
+    })
+      .sort((a, b) => {
+        return a.ens.localeCompare(b.ens);
+      })
   }, [accountEnsNames, accountSubnames]);
 
   const { primaryName, isPrimaryNameLoading } = usePrimaryName({ address, enabled: !!address })

diff --git a/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/index.tsx
@@ -8,6 +8,7 @@ import {
   useJustaName,
   useMountedAccount,
   useOffchainResolvers,
+  usePrimaryName,
 } from '@justaname.id/react';
 import {
   Badge,
@@ -26,7 +27,7 @@ import clsx from 'clsx';
 import React, { FC, Fragment, useMemo, useState } from 'react';
 import { SelectSubnameItem } from '../../components/SelectSubnameItem';
 import { useDebounce } from '../../hooks/useDebounce';
-import { useHybridPrimaryName } from '../../hooks/useHybridPrimaryName';
+// import { useHybridPrimaryName } from '../../hooks/useHybridPrimaryName';
 import { DefaultDialog } from '../DefaultDialog';
 import styles from './SignInDialog.module.css';
 
@@ -83,9 +84,9 @@ export const SignInDialog: FC<SignInDialogProps> = ({
   const { accountSubnames, isAccountSubnamesPending } = useAccountSubnames();
   const { accountEnsNames, isAccountEnsNamesPending } = useAccountEnsNames();
 
-  const { hybridPrimaryName } = useHybridPrimaryName({
-    address: address,
-    chainId: chainId,
+  const { primaryName } = usePrimaryName({
+    address,
+    chainId,
     enabled: !!address && !!chainId,
   })
 
@@ -309,7 +310,7 @@ export const SignInDialog: FC<SignInDialogProps> = ({
                               setSubnameSigningIn('');
                             });
                         }}
-                        isPrimary={subname.ens === hybridPrimaryName}
+                        isPrimary={subname.ens === primaryName}
                       />
                     </Fragment>
                   ))}

diff --git a/packages/@justweb3/widget/src/lib/hooks/useHybridPrimaryName/index.ts b/packages/@justweb3/widget/src/lib/hooks/useHybridPrimaryName/index.ts