Merge pull request #91 from JustaName-id/anthonyk/engr-738-jan-sdk-in…

…vitations feat(widget): implemented invitations feature
JustaName-id · Jan 16, 2025 · 0d06bf7 · 0d06bf7
2 parents 08bfb8c + 989de8c
commit 0d06bf7
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 3 deletions.
diff --git a/packages/@justweb3/widget/src/lib/components/SubnameInvitationItem/index.tsx b/packages/@justweb3/widget/src/lib/components/SubnameInvitationItem/index.tsx
@@ -0,0 +1,60 @@
+import { Records, useAcceptSubname, useEnsAvatar, useRejectSubname } from '@justaname.id/react';
+import {
+  Avatar,
+  Button,
+  ClickableItem,
+  Flex
+} from '@justweb3/ui';
+import React from 'react';
+
+export interface SubnameInvitationItemProps {
+  subname: Records;
+  onInvitationChange: () => void;
+}
+
+export const SubnameInvitationItem: React.FC<SubnameInvitationItemProps> = ({
+  subname,
+  onInvitationChange,
+}) => {
+  const { acceptSubname, isAcceptSubnamePending } = useAcceptSubname();
+  const { rejectSubname, isRejectSubnamePending } = useRejectSubname();
+  const { avatar } = useEnsAvatar({
+    ens: subname.ens,
+  });
+  return (
+    <ClickableItem
+      title={subname.ens}
+      style={{
+        width: '100%',
+      }}
+      left={<Avatar src={avatar} initial={subname.ens[0]} />}
+      right={
+        <Flex direction='row' gap='10px' align='center'>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={() => acceptSubname({
+              ens: subname.ens,
+            }).then(onInvitationChange)}
+            style={{ flexGrow: '0.5' }}
+            disabled={isAcceptSubnamePending || isRejectSubnamePending}
+          >
+            Accept
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => rejectSubname({
+              ens: subname.ens,
+            }).then(onInvitationChange)}
+            style={{ flexGrow: '0.5' }}
+            disabled={isAcceptSubnamePending || isRejectSubnamePending}
+          >
+            Decline
+          </Button>
+        </Flex>
+      }
+      loading={isAcceptSubnamePending || isRejectSubnamePending}
+    />
+  );
+};
diff --git a/packages/@justweb3/widget/src/lib/components/index.ts b/packages/@justweb3/widget/src/lib/components/index.ts
@@ -1,4 +1,5 @@
 export * from './SelectSubnameItem';
+export * from './SubnameInvitationItem';
 export * from './Loading';
 export * from './JustaNameFooter';
 export * from './UpdateRecordItem';

diff --git a/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/SignInDialog.module.css b/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/SignInDialog.module.css
@@ -25,7 +25,7 @@
 }
 
 .contentWrapper {
-    max-height: 50vh;
+    max-height: 40vh;
     overflow-y: auto;
     overflow-x: hidden;
 }

diff --git a/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/index.tsx b/packages/@justweb3/widget/src/lib/dialogs/SignInDialog/index.tsx
@@ -1,6 +1,7 @@
 import {
   Records,
   useAccountEnsNames,
+  useAccountInvitations,
   useAccountSubnames,
   useAddSubname,
   useEnsSignIn,
@@ -26,6 +27,7 @@ import {
 import clsx from 'clsx';
 import React, { FC, Fragment, useMemo, useState } from 'react';
 import { SelectSubnameItem } from '../../components/SelectSubnameItem';
+import { SubnameInvitationItem } from '../../components/SubnameInvitationItem';
 import { useDebounce } from '../../hooks/useDebounce';
 import { DefaultDialog } from '../DefaultDialog';
 import styles from './SignInDialog.module.css';
@@ -81,6 +83,10 @@ export const SignInDialog: FC<SignInDialogProps> = ({
   const { isConnected, address } = useMountedAccount();
   const { accountSubnames, isAccountSubnamesPending } = useAccountSubnames();
   const { accountEnsNames, isAccountEnsNamesPending } = useAccountEnsNames();
+  const { invitations, isInvitationsPending, refetchInvitations } = useAccountInvitations({
+    chainId,
+    enabled: !!chainId && !!address,
+  });
 
   const { primaryName, isPrimaryNameLoading, refetchPrimaryName } = usePrimaryName({
     address,
@@ -286,24 +292,33 @@ export const SignInDialog: FC<SignInDialogProps> = ({
           </SPAN>
         </Badge>
         {isAccountSubnamesPending ||
+          isInvitationsPending ||
           isAccountEnsNamesPending ||
           isOffchainResolversPending ? (
           <div className={styles.loadingContainer}>
             <LoadingSpinner color={'var(--justweb3-primary-color)'} />
           </div>
         ) : (
-          <Flex direction="column" gap="20px">
+          <Flex direction="column" gap="10px">
             <TransitionElement
               visible={shouldBeAbleToSelect}
               maxheight="fit-content"
             >
-              <Flex direction="column" gap="20px" justify={'space-between'}>
+              <Flex direction="column" gap="10px" justify={'space-between'}>
                 <H2>Select an ENS</H2>
                 <Flex
                   direction="column"
                   gap="15px"
                   className={clsx(styles.contentWrapper)}
                 >
+                  {invitations.length > 0 && invitations.map((inv, index) => (
+                    <Fragment key={'subname-invitation-' + index}>
+                      <SubnameInvitationItem
+                        subname={inv}
+                        onInvitationChange={refetchInvitations}
+                      />
+                    </Fragment>
+                  ))}
                   {!isPrimaryNameLoading && primarySubname &&
                     <SelectSubnameItem
                       selectedSubname={subnameSigningIn}