fix(build): update exports in build

package.json

@@ -28,15 +28,17 @@
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "browser": "./dist/index.umd.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "browser": "./dist/index.umd.js"
     }
   },
   "files": [
-    "dist",
+    "dist/*",
     "LICENSE",
     "README.md",
     "package.json"
@@ -82,8 +84,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@linaria/vite": "^4.2.11",

src/components/Application.tsx

@@ -1,10 +1,10 @@
 import { styled } from '@linaria/react';
-import type { MouseEventHandler } from 'react';
+import { MouseEventHandler } from 'react';
 
 import { DefaultTheme, withTheme } from '../theme';
 import { Button } from './Button';
 import { Paragraph } from './Paragraph';
-import type { Radius } from './Provider';
+import { Radius } from './Provider';
 import { Title } from './Title';
 
 export function Application({

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 
 import { DefaultTheme, withTheme } from '../theme';
-import type { Radius } from './Provider';
+import { Radius } from './Provider';
 
 const radius: Record<Radius, number> = {
   default: 30,

src/components/ConnectButton.tsx

@@ -1,18 +1,18 @@
 import { ChevronDownIcon, UserIcon } from '@iconicicons/react';
 import { styled } from '@linaria/react';
-import type { HTMLProps } from 'react';
+import { HTMLProps } from 'react';
 
-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 { 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';
-import type { Radius } from './Provider';
+import { Radius } from './Provider';
 
-export default function ConnectButton({
+export function ConnectButton({
   accent,
   showBalance = true,
   showProfilePicture = true,

src/components/Loading.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import type { HTMLProps } from 'react';
+import { HTMLProps } from 'react';
 
 export const Loading = (props: HTMLProps<SVGElement>) => (
   <SvgWrapper

src/components/Modal/Footer.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { DefaultTheme, withTheme } from '../../theme';
 

src/components/Modal/Head.tsx

@@ -1,6 +1,6 @@
 import { CloseIcon } from '@iconicicons/react';
 import { styled } from '@linaria/react';
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { DefaultTheme, withTheme } from '../../theme';
 

src/components/Modal/Modal.tsx

@@ -7,10 +7,10 @@ import {
   Variants,
   motion,
 } from 'framer-motion';
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { version } from '../../../package.json';
-import useMobile from '../../hooks/mobile';
+import { useMobile } from '../../hooks/mobile';
 import { DefaultTheme, Radius, withTheme } from '../../theme';
 
 export function Modal({

src/components/Provider.tsx

@@ -4,16 +4,16 @@ import { Helmet } from 'react-helmet';
 import { WagmiProvider, createConfig, http } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
-import Context, { defaultState } from '../context';
-import type { Config } from '../context/faces';
-import globalReducer from '../context/reducer';
+import { context as Context, defaultState } from '../context';
+import { Config } from '../context/faces';
+import { reducer as globalReducer } from '../context/reducer';
 import { useSyncAddress } from '../hooks/active_address';
 import { useSyncPermissions } from '../hooks/permissions';
 import { ConnectModal } from '../modals/Connect';
 import { ProfileModal } from '../modals/Profile';
-import RestoreSession from '../modals/RestoreSession';
+import { RestoreSession } from '../modals/RestoreSession';
 import StrategyPresets from '../strategy';
-import Strategy from '../strategy/Strategy';
+import { Strategy } from '../strategy/Strategy';
 import { Font, ThemeProvider, darkTheme, lightTheme } from '../theme';
 import { rgbToString } from '../utils/arweave';
 

src/context/faces.ts

@@ -1,6 +1,6 @@
-import type { AppInfo, GatewayConfig, PermissionType } from 'arconnect';
+import { AppInfo, GatewayConfig, PermissionType } from 'arconnect';
 
-import Strategy from '../strategy/Strategy';
+import { Strategy } from '../strategy/Strategy';
 
 /** Basic action */
 export interface Action {

src/context/index.ts

@@ -1,6 +1,6 @@
 import { Dispatch, createContext } from 'react';
 
-import type { Actions, GlobalState } from './faces';
+import { Actions, GlobalState } from './faces';
 
 export const defaultState: GlobalState = {
   activeModal: false,
@@ -12,9 +12,7 @@ export const defaultState: GlobalState = {
   strategies: [],
 };
 
-const context = createContext<{
+export const context = createContext<{
   state: GlobalState;
   dispatch: Dispatch<Actions>;
 }>(undefined as any);
-
-export default context;

src/context/reducer.ts

@@ -1,7 +1,7 @@
-import type { Actions, GlobalState } from './faces';
+import { Actions, GlobalState } from './faces';
 import { defaultState } from './index';
 
-export default function reducer(
+export function reducer(
   state: GlobalState = defaultState,
   action: Actions,
 ): GlobalState {

src/hooks/active_address.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import useGlobalState from './global';
-import useActiveStrategy from './strategy';
+import { useGlobalState } from './global';
+import { useActiveStrategy } from './strategy';
 
 /**
  * Active address in the wallet
  */
-export default function useAddress() {
+export function useAddress() {
   // global context
   const { state } = useGlobalState();
 

src/hooks/addresses.ts

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 
-import useAddress from './active_address';
-import useGlobalState from './global';
-import useActiveStrategy from './strategy';
+import { useAddress } from './active_address';
+import { useGlobalState } from './global';
+import { useActiveStrategy } from './strategy';
 
 /**
  * Addresses added to the wallet
  */
-export default function useAddresses() {
+export function useAddresses() {
   const [addresses, setAddresses] = useState<string[]>([]);
 
   const activeAddress = useAddress();
@@ -23,7 +23,9 @@ export default function useAddresses() {
       // sync with wallet
       const sync = async () => {
         try {
-          setAddresses(await strategy.getAllAddresses());
+          setAddresses(
+            strategy.getAllAddresses ? await strategy.getAllAddresses() : [],
+          );
         } catch (e: any) {
           console.error(
             `[Arweave Wallet Kit] Failed to sync addresses\n${e?.message || e}`,

src/hooks/balance.ts

@@ -1,12 +1,12 @@
 import Arweave from 'arweave/node/common';
 import { useEffect, useState } from 'react';
 
-import useGlobalState from './global';
+import { useGlobalState } from './global';
 
 /**
  * Balance hook
  */
-export default function useBalance() {
+export function useBalance() {
   const [balance, setBalance] = useState(0);
   const { state } = useGlobalState();
 

src/hooks/connection/connect.ts

@@ -1,10 +1,10 @@
-import useGlobalState from '../global';
-import useConnected from './connected';
+import { useGlobalState } from '../global';
+import { useConnected } from './connected';
 
 /**
  * Connect method hook
  */
-export default function useConnect() {
+export function useConnect() {
   const { dispatch } = useGlobalState();
   const connected = useConnected();
 

src/hooks/connection/connected.ts

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
 import { comparePermissions } from '../../utils/arweave';
-import useGlobalState from '../global';
-import usePermissions from '../permissions';
-import useActiveStrategy from '../strategy';
+import { useGlobalState } from '../global';
+import { usePermissions } from '../permissions';
+import { useActiveStrategy } from '../strategy';
 
-export default function useConnected() {
+export function useConnected() {
   const [connected, setConnected] = useState(false);
   const strategy = useActiveStrategy();
   const givenPermissions = usePermissions();

src/hooks/connection/disconnect.ts

@@ -1,12 +1,12 @@
 import { STRATEGY_STORE } from '../../strategy';
-import useGlobalState from '../global';
-import useActiveStrategy from '../strategy';
-import useConnected from './connected';
+import { useGlobalState } from '../global';
+import { useActiveStrategy } from '../strategy';
+import { useConnected } from './connected';
 
 /**
  * Disconnect method hook
  */
-export default function useDisconnect() {
+export function useDisconnect() {
   const strategy = useActiveStrategy();
   const { dispatch } = useGlobalState();
   const connected = useConnected();

src/hooks/connection/index.ts

@@ -1,13 +1,13 @@
-import useConnect from './connect';
-import useConnected from './connected';
-import useDisconnect from './disconnect';
+import { useConnect } from './connect';
+import { useConnected } from './connected';
+import { useDisconnect } from './disconnect';
 
 export { useConnect, useConnected, useDisconnect };
 
 /**
  * Base connection hook
  */
-export default function useConnection() {
+export function useConnection() {
   const connected = useConnected();
   const connect = useConnect();
   const disconnect = useDisconnect();

src/hooks/gateway.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import useGlobalState from './global';
+import { useGlobalState } from './global';
 
-export default function useGatewayURL() {
+export function useGatewayURL() {
   const { state } = useGlobalState();
 
   const url = useMemo(() => {

src/hooks/global.ts

@@ -1,8 +1,8 @@
 import { useContext, useMemo } from 'react';
 
-import context, { defaultState } from '../context';
+import { context, defaultState } from '../context';
 
-export default function useGlobalState() {
+export function useGlobalState() {
   const ctx = useContext(context);
 
   const state = useMemo(

src/hooks/mobile.ts

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 /**
  * Hook to determinate mobile viewport
  */
-export default function useMobile(mobileWidth = 720) {
+export function useMobile(mobileWidth = 720) {
   const [mobile, setMobile] = useState(false);
   const query = useMemo(() => {
     if (typeof window === 'undefined') return null;

src/hooks/modal.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-export default function useModal(defaultOpen = false) {
+export function useModal(defaultOpen = false) {
   const [open, setOpen] = useState(defaultOpen);
 
   return {

src/hooks/permissions.ts

@@ -1,16 +1,16 @@
-import type { PermissionType } from 'arconnect';
+import { PermissionType } from 'arconnect';
 import { useEffect, useRef } from 'react';
 
 import { STRATEGY_STORE } from '../strategy';
 import { comparePermissions } from '../utils/arweave';
-import type { ConnectMsg } from './connection/connect';
-import useGlobalState from './global';
-import useActiveStrategy from './strategy';
+import { ConnectMsg } from './connection/connect';
+import { useGlobalState } from './global';
+import { useActiveStrategy } from './strategy';
 
 /**
  * Given permissions hook
  */
-export default function usePermissions(): PermissionType[] {
+export function usePermissions(): PermissionType[] {
   const { state, dispatch } = useGlobalState();
   const strategy = useActiveStrategy();
 
@@ -136,7 +136,7 @@ export function useSyncPermissions() {
     // there is an active strategy
     let addressChangeSync: any;
 
-    if (strategy) {
+    if (strategy && strategy.addAddressEvent) {
       addressChangeSync = strategy.addAddressEvent(sync);
     }
 
@@ -148,7 +148,7 @@ export function useSyncPermissions() {
 
       // remove sync on address change
       // if there was a listener added
-      if (strategy && addressChangeSync) {
+      if (strategy && addressChangeSync && strategy.removeAddressEvent) {
         strategy.removeAddressEvent(addressChangeSync);
       }
     };

src/hooks/profile.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import useGlobalState from './global';
+import { useGlobalState } from './global';
 
-export default function useProfileModal() {
+export function useProfileModal() {
   // global context
   const { state, dispatch } = useGlobalState();