Merge pull request #26 from labscommunity/kranthi/awk-nextjs-support

refactor: awk next 14 support

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 .env
+*.tgz

package.json

@@ -1,7 +1,7 @@
 {
   "name": "arweave-wallet-kit",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -36,13 +36,13 @@
     "@linaria/core": "^4.2.10",
     "@linaria/react": "^4.3.8",
     "@othent/kms": "2.1.1",
-    "arweave": "^1.12.2",
     "arweave-wallet-connector": "^1.0.2",
     "framer-motion": "^8.1.9",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@linaria/vite": "^4.2.11",
@@ -59,20 +59,17 @@
     "@types/react-helmet": "^6.1.6",
     "@vitejs/plugin-react": "^3.0.0",
     "arconnect": "^1.0.4",
+    "arweave": "^1.15.5",
     "babel-loader": "^8.3.0",
     "prettier": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-preserve-directives": "^0.2.0",
     "storybook": "^7.0.22",
-    "typescript": "^4.9.3",
+    "typescript": "^5",
     "vite": "^4.0.0",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-css-injected-by-js": "^3.1.2",
     "vite-plugin-dts": "^1.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || 17.x || 18.x",
-    "react-dom": "^16.8.0 || 17.x || 18.x"
   }
 }

src/components/Application.tsx

@@ -1,4 +1,4 @@
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import type { MouseEventHandler } from "react";
 import type { Radius } from "./Provider";
 import { Paragraph } from "./Paragraph";

src/components/Button.tsx

@@ -1,4 +1,4 @@
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import type { Radius } from "./Provider";
 import { styled } from "@linaria/react";
 

src/components/ConnectButton.tsx

@@ -1,5 +1,5 @@
 import { ChevronDownIcon, UserIcon } from "@iconicicons/react";
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import useAddress from "../hooks/active_address";
 import useConnection from "../hooks/connection";
 import useProfileModal from "../hooks/profile";

src/components/Modal/Footer.tsx

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

src/components/Modal/Head.tsx

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

src/components/Modal/Modal.tsx

@@ -1,15 +1,15 @@
-import { DefaultTheme, Radius, withTheme } from "../../theme";
+import { type DefaultTheme, type Radius, withTheme } from "../../theme";
 import { version } from "../../../package.json";
 import type { PropsWithChildren } from "react";
 import useMobile from "../../hooks/mobile";
 import { styled } from "@linaria/react";
 import {
   AnimatePresence,
-  ForwardRefComponent,
-  HTMLMotionProps,
+  type ForwardRefComponent,
+  type HTMLMotionProps,
   motion,
-  MotionProps,
-  Variants
+  type MotionProps,
+  type Variants
 } from "framer-motion";
 
 export function Modal({

src/components/Paragraph.tsx

@@ -1,4 +1,4 @@
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import { styled } from "@linaria/react";
 
 export const Paragraph = withTheme(styled.p<{

src/components/Provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { PropsWithChildren, useEffect, useMemo, useReducer } from "react";
-import { darkTheme, Font, lightTheme, ThemeProvider } from "../theme";
+import { type PropsWithChildren, useEffect, useMemo, useReducer } from "react";
+import { darkTheme, type Font, lightTheme, ThemeProvider } from "../theme";
 import { useSyncPermissions } from "../hooks/permissions";
 import { useSyncAddress } from "../hooks/active_address";
 import RestoreSession from "../modals/RestoreSession";

src/components/Title.tsx

@@ -1,4 +1,4 @@
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import { styled } from "@linaria/react";
 import { rgbToString } from "../utils";
 

src/context/index.ts

@@ -1,5 +1,5 @@
 import type { Actions, GlobalState } from "./faces";
-import { Dispatch, createContext } from "react";
+import { type Dispatch, createContext } from "react";
 
 export const defaultState: GlobalState = {
   activeModal: false,

src/modals/Connect.tsx

@@ -6,7 +6,7 @@ import { ChevronLeftIcon } from "@iconicicons/react";
 import type { Radius } from "../components/Provider";
 import { Paragraph } from "../components/Paragraph";
 import { Footer } from "../components/Modal/Footer";
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import { Modal } from "../components/Modal/Modal";
 import type Strategy from "../strategy/Strategy";
 import { Loading } from "../components/Loading";
@@ -104,7 +104,7 @@ export function ConnectModal() {
       );
 
       // send success message
-      postMessage({
+      window.postMessage({
         type: "connect_result",
         res: true
       });
@@ -132,7 +132,7 @@ export function ConnectModal() {
 
   // on connect modal close
   function onClose() {
-    postMessage({
+    window.postMessage({
       type: "connect_result",
       res: false
     });

src/modals/Profile.tsx

@@ -1,7 +1,7 @@
 import { CopyIcon, LogOutIcon, UserIcon } from "@iconicicons/react";
 import type { Radius } from "../components/Provider";
 import { Paragraph } from "../components/Paragraph";
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import useActiveStrategy from "../hooks/strategy";
 import { Modal } from "../components/Modal/Modal";
 import useConnection from "../hooks/connection";

src/modals/RestoreSession.tsx

@@ -1,6 +1,6 @@
 import { STRATEGY_STORE, syncStrategies } from "../strategy";
 import type { Radius } from "../components/Provider";
-import { DefaultTheme, withTheme } from "../theme";
+import { type DefaultTheme, withTheme } from "../theme";
 import { Modal } from "../components/Modal/Modal";
 import type Strategy from "../strategy/Strategy";
 import type { Variants } from "framer-motion";

src/strategy/Strategy.ts

@@ -1,5 +1,4 @@
-import type { SignatureOptions } from "arweave/node/lib/crypto/crypto-interface";
-import type Transaction from "arweave/node/lib/transaction";
+import type Transaction from "arweave/web/lib/transaction";
 import type {
   PermissionType,
   AppInfo,
@@ -34,7 +33,7 @@ export default abstract class Strategy {
   public abstract getAllAddresses?(): Promise<string[]>;
   public abstract sign(
     transaction: Transaction,
-    options?: SignatureOptions
+    options?: any
   ): Promise<Transaction>;
   public abstract getPermissions(): Promise<PermissionType[]>;
   public abstract getWalletNames?(): Promise<{ [addr: string]: string }>;

src/strategy/strategies/Othent.ts

@@ -3,7 +3,7 @@ import type { DataItem, DispatchResult, GatewayConfig, PermissionType } from "ar
 import type Transaction from "arweave/web/lib/transaction";
 import type { AppInfo } from "arweave-wallet-connector";
 import type Strategy from "../Strategy";
-import { Othent, OthentOptions, AppInfo as OthentAppInfo } from "@othent/kms";
+import { Othent, type OthentOptions, type AppInfo as OthentAppInfo } from "@othent/kms";
 
 type ListenerFunction = (address: string) => void;
 

src/theme.ts

@@ -1,4 +1,4 @@
-import { createTheming, ThemingType } from "@callstack/react-theme-provider";
+import { createTheming, type ThemingType } from "@callstack/react-theme-provider";
 
 export const lightTheme: DisplayTheme = {
   primaryText: "0, 0, 0",

tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "importsNotUsedAsValues": "error"
+    "verbatimModuleSyntax": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -13,14 +13,14 @@ export default defineConfig({
     linaria({
       include: ["**/*.{ts,tsx}"],
       babelOptions: {
-        presets: ["@babel/preset-typescript", "@babel/preset-react"]
+        presets: [
+          ["@babel/preset-env", { targets: { node: "current" } }],
+          "@babel/preset-typescript",
+          "@babel/preset-react"
+        ]
       }
     }),
-    cssInjectedByJsPlugin(),
-    banner({
-      content: '"use client";',
-      verify: false
-    })
+    cssInjectedByJsPlugin()
   ],
   build: {
     lib: {
@@ -30,7 +30,7 @@ export default defineConfig({
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: ["react", "react-dom", "arweave", "@othent/kms"],
       output: {
         globals: {
           react: "React",