fix(lint): array deps

CHANGELOG.md

@@ -1,12 +1,11 @@
 ## [1.0.2-alpha.1](https://github.com/project-kardeshev/ao-wallet-kit/compare/v1.0.1...v1.0.2-alpha.1) (2024-10-26)
 
-
 ### Bug Fixes
 
-* **build:** update exports in build ([0999b52](https://github.com/project-kardeshev/ao-wallet-kit/commit/0999b52f964ca95324caf34e22518b4bbfac062d))
-* **build:** update exports in build ([1a42fd0](https://github.com/project-kardeshev/ao-wallet-kit/commit/1a42fd08b8347e1328bc87d02065f52a7ed27584))
-* **docs:** add tool for deploying docs ([f8561cd](https://github.com/project-kardeshev/ao-wallet-kit/commit/f8561cde8527787ddfeed48fc96d3e83f454524f))
-* **docs:** update docs config and tooling ([044b400](https://github.com/project-kardeshev/ao-wallet-kit/commit/044b400b2108c05e6c62b50df303fdd41afeab02))
+- **build:** update exports in build ([0999b52](https://github.com/project-kardeshev/ao-wallet-kit/commit/0999b52f964ca95324caf34e22518b4bbfac062d))
+- **build:** update exports in build ([1a42fd0](https://github.com/project-kardeshev/ao-wallet-kit/commit/1a42fd08b8347e1328bc87d02065f52a7ed27584))
+- **docs:** add tool for deploying docs ([f8561cd](https://github.com/project-kardeshev/ao-wallet-kit/commit/f8561cde8527787ddfeed48fc96d3e83f454524f))
+- **docs:** update docs config and tooling ([044b400](https://github.com/project-kardeshev/ao-wallet-kit/commit/044b400b2108c05e6c62b50df303fdd41afeab02))
 
 ## [1.0.1-alpha.1](https://github.com/project-kardeshev/ao-wallet-kit/compare/v1.0.0...v1.0.1-alpha.1) (2024-10-25)
 

src/components/ConnectButton.tsx

@@ -6,7 +6,6 @@ import { useAddress } from '../hooks/active_address';
 import { useBalance } from '../hooks/balance';
 import { useConnection } from '../hooks/connection';
 import { useProfileModal } from '../hooks/profile';
-import { useAns } from '../hooks/useAns';
 import { DefaultTheme, withTheme } from '../theme';
 import { formatAddress } from '../utils/arweave';
 import { Button } from './Button';
@@ -17,7 +16,6 @@ export function ConnectButton({
   showBalance = true,
   showProfilePicture = true,
   onClick,
-  useAns: ansOption = true,
   profileModal: showProfileModal = true,
   ...props
 }: HTMLProps<HTMLButtonElement> & Props) {
@@ -30,9 +28,6 @@ export function ConnectButton({
   // balance
   const balance = useBalance();
 
-  // ans profile
-  const ans = useAns();
-
   // profile modal
   const profileModal = useProfileModal();
 
@@ -58,18 +53,12 @@ export function ConnectButton({
           )}
           <ProfileSection showBalance={showBalance}>
             {showProfilePicture && (
-              <>
-                {(ans?.avatar && ansOption && (
-                  <Avatar src={ans?.avatar} draggable={false} />
-                )) || (
-                  <AvatarPlaceholder>
-                    <AvatarIcon />
-                  </AvatarPlaceholder>
-                )}
-              </>
+              <AvatarPlaceholder>
+                <AvatarIcon />
+              </AvatarPlaceholder>
             )}
-            {(ansOption && ans?.currentLabel) ||
-              formatAddress(address || '', 5)}
+
+            {formatAddress(address || '', 5)}
             <ExpandIcon />
           </ProfileSection>
         </>
@@ -130,15 +119,6 @@ const avatarRadius: Record<Radius, string> = {
   none: '0px',
 };
 
-const Avatar = withTheme(styled.img<{ theme: DefaultTheme }>`
-  user-select: none;
-  border-radius: ${(props) => avatarRadius[props.theme.themeConfig.radius]};
-  object-fit: cover;
-  width: 1.7rem;
-  height: 1.7rem;
-  margin-right: 0.4rem;
-`);
-
 const AvatarIcon = styled(UserIcon)`
   font-size: 1rem !important;
   color: #fff;
@@ -165,6 +145,5 @@ interface Props {
   accent?: string;
   showBalance?: boolean;
   showProfilePicture?: boolean;
-  useAns?: boolean;
   profileModal?: boolean;
 }

src/context/reducer.ts

@@ -5,6 +5,8 @@ export function reducer(
   state: GlobalState = defaultState,
   action: Actions,
 ): GlobalState {
+  console.log('Action:', action);
+  console.log('State:', state);
   switch (action.type) {
     case 'OPEN_MODAL':
       return {

src/hooks/addresses.ts

@@ -51,7 +51,6 @@ export function useAddresses() {
 export function useWalletNames() {
   const [names, setNames] = useState<{ [addr: string]: string }>({});
   const addresses = useAddresses();
-  const { state } = useGlobalState();
   const strategy = useActiveStrategy();
 
   useEffect(() => {
@@ -72,7 +71,7 @@ export function useWalletNames() {
         );
       }
     })();
-  }, [addresses, state?.activeStrategy]);
+  }, [addresses, strategy]);
 
   return names;
 }

src/hooks/ao_signer.ts

@@ -0,0 +1,28 @@
+import { AoSigner } from '@project-kardeshev/ao-sdk';
+import { useEffect, useState } from 'react';
+
+import { useActiveStrategy } from './strategy';
+
+/**
+ * @description Hook to get the AoSigner instance from the active strategy
+ * @returns {AoSigner | undefined}
+ * @example
+ * ```ts
+ * import { useAoSigner } from '@project-kardeshev/ao-wallet-kit';
+ * const aoSigner = useAoSigner();
+ * ```
+ */
+export function useAoSigner() {
+  const strategy = useActiveStrategy();
+  const [signer, setSigner] = useState<AoSigner | undefined>();
+
+  useEffect(() => {
+    if (!strategy) {
+      setSigner(undefined);
+      return;
+    }
+    strategy.createDataItemSigner().then((s) => setSigner(s));
+  }, [strategy]);
+
+  return signer;
+}

src/hooks/balance.ts

@@ -28,7 +28,7 @@ export function useBalance() {
 
       setBalance(Number(bal));
     })();
-  }, [state?.activeAddress]);
+  }, [state?.activeAddress, state?.config?.gatewayConfig]);
 
   return balance;
 }

src/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './useAns';
 export * from './strategy';
 export * from './profile';
 export * from './permissions';
@@ -11,3 +10,4 @@ export * from './balance';
 export * from './addresses';
 export * from './active_address';
 export * from './connection';
+export * from './ao_signer';

src/hooks/permissions.ts

@@ -34,7 +34,7 @@ export function usePermissions(): PermissionType[] {
         payload: await strategy.getPermissions(),
       });
     })();
-  }, [dispatch]);
+  }, [dispatch, strategy]);
 
   return state.givenPermissions;
 }
@@ -152,5 +152,14 @@ export function useSyncPermissions() {
         strategy.removeAddressEvent(addressChangeSync);
       }
     };
-  }, [strategy, requiredPermissions, dispatch]);
+  }, [
+    strategy,
+    dispatch,
+    ensurePermissions,
+    requiredPermissions,
+    state.activeAddress,
+    state.activeStrategy,
+    state.config.appInfo,
+    state.config.gatewayConfig,
+  ]);
 }

src/modals/Connect.tsx

@@ -27,13 +27,13 @@ export function ConnectModal() {
 
   useEffect(() => {
     modalController.setOpen(state?.activeModal === 'connect');
-  }, [state?.activeModal]);
+  }, [state?.activeModal, modalController]);
 
   useEffect(() => {
     if (modalController.open) return;
     setSelectedStrategy(undefined);
     dispatch({ type: 'CLOSE_MODAL' });
-  }, [modalController.open]);
+  }, [modalController.open, dispatch]);
 
   // connection
   const { connected } = useConnection();
@@ -42,7 +42,7 @@ export function ConnectModal() {
   useEffect(() => {
     if (!connected || state?.activeModal !== 'connect') return;
     dispatch({ type: 'CLOSE_MODAL' });
-  }, [connected, state]);
+  }, [connected, state, dispatch]);
 
   // selected strategy
   const [selectedStrategy, setSelectedStrategy] = useState<string>();
@@ -105,7 +105,6 @@ export function ConnectModal() {
         state.config.appInfo,
         state.config.gatewayConfig,
       );
-
       // send success message
       postMessage({
         type: 'connect_result',
@@ -121,13 +120,14 @@ export function ConnectModal() {
         type: 'UPDATE_STRATEGY',
         payload: s.id,
       });
-    } catch {
+    } catch (e) {
       fixupArConnectModal();
       setRetry(true);
       dispatch({
         type: 'UPDATE_STRATEGY',
         payload: false,
       });
+      console.error(e);
     }
 
     setConnecting(false);

src/modals/Profile.tsx

@@ -14,7 +14,6 @@ import { useGatewayURL } from '../hooks/gateway';
 import { useGlobalState } from '../hooks/global';
 import { useModal } from '../hooks/modal';
 import { useActiveStrategy } from '../hooks/strategy';
-import { useAns } from '../hooks/useAns';
 import { DefaultTheme, withTheme } from '../theme';
 import { formatAddress } from '../utils/arweave';
 
@@ -25,7 +24,7 @@ export function ProfileModal() {
 
   useEffect(() => {
     modalController.setOpen(state?.activeModal === 'profile');
-  }, [state?.activeModal]);
+  }, [state?.activeModal, modalController]);
 
   useEffect(() => {
     if (modalController.open) return;
@@ -39,9 +38,6 @@ export function ProfileModal() {
   // load balance
   const balance = useBalance();
 
-  // load ans profile
-  const ans = useAns();
-
   // configured gateway
   const gateway = useGatewayURL();
 
@@ -57,8 +53,8 @@ export function ProfileModal() {
         <Title>Profile</Title>
       </Head>
       <ProfileData>
-        <ProfilePicture profilePicture={ans?.avatar}>
-          {!ans?.avatar && <ProfileIcon />}
+        <ProfilePicture>
+          <ProfileIcon />
           <ActiveStrategy strategyTheme={strategy?.theme}>
             <img
               src={strategy?.logo ? `${gateway}/${strategy.logo}` : ''}
@@ -68,7 +64,7 @@ export function ProfileModal() {
           </ActiveStrategy>
         </ProfilePicture>
         <Title>
-          {ans?.currentLabel || formatAddress(state?.activeAddress || '', 8)}
+          {formatAddress(state?.activeAddress || '', 8)}
           <CopyIcon
             onClick={() =>
               navigator.clipboard.writeText(state.activeAddress || '')

src/modals/RestoreSession.tsx

@@ -48,7 +48,12 @@ export function RestoreSession() {
         });
       }
     })();
-  }, []);
+  }, [
+    state?.config.permissions,
+    state?.config.ensurePermissions,
+    dispatch,
+    modalController,
+  ]);
 
   // remove previous session data
   function clearSession() {
@@ -141,7 +146,6 @@ const BottomModal = withTheme(styled(Modal as any)<any>`
   display: flex;
   align-items: center;
   gap: 1.24rem;
-  padding: 0.75rem 1rem;
   border-radius: ${(props) =>
     radius[props.theme.themeConfig.radius as Radius] + 'px'};
   border-radius: 15px;
@@ -160,13 +164,15 @@ const BottomModal = withTheme(styled(Modal as any)<any>`
 const Text = withTheme(styled.p<{ theme: DefaultTheme }>`
   font-size: 1.05rem;
   font-weight: 500;
+  padding: 10px 20px;
   color: rgb(${(props) => props.theme.primaryText});
   margin: 0px;
 `);
 
 const Buttons = styled.div`
   display: flex;
   align-items: center;
+  padding: 10px 20px;
   gap: 0.6rem;
 
   @media screen and (max-width: 720px) {