97 arweave wallet kit

app/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@types/react-router-dom": "^5.3.3",
     "arweave-account": "^1.3.6",
+    "arweave-wallet-kit": "1.0.0",
     "bignumber.js": "9.1.1",
     "html-react-parser": "^3.0.4",
     "hyper-async": "1.1.1",
@@ -45,6 +46,6 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "prettier": "^2.8.3",
     "typescript": "^4.9.3",
-    "vite": "^4.2.0"
+    "vite": "^4.3.9"
   }
 }

app/src/main.tsx

@@ -7,16 +7,30 @@ import { App } from 'app';
 import { GlobalStyle } from 'app/styles';
 import { defaultTheme } from 'helpers/themes';
 import { ArweaveProvider } from 'providers/ArweaveProvider';
+import { ArweaveWalletKit } from 'arweave-wallet-kit';
+import { WALLET_PERMISSIONS } from 'helpers/config';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <ThemeProvider theme={defaultTheme}>
-      <ArweaveProvider>
-        <HashRouter>
-          <GlobalStyle />
-          <App />
-        </HashRouter>
-      </ArweaveProvider>
+      <ArweaveWalletKit
+        config={{
+          permissions: WALLET_PERMISSIONS,
+          ensurePermissions: true,
+          appInfo: {
+            name: 'U',
+            logo: 'https://kocmnja3z4bopl4uzdvzujcwtqkm3yyecr4r5ptqqvrq4mxu52ta.arweave.net/J3WXX4OGa6wP5E9oLhNyqlN4deYI7ARjrd5se740ftE',
+          },
+        }}
+        theme
+      >
+        <ArweaveProvider>
+          <HashRouter>
+            <GlobalStyle />
+            <App />
+          </HashRouter>
+        </ArweaveProvider>
+      </ArweaveWalletKit>
     </ThemeProvider>
   </React.StrictMode>
 );

app/src/providers/ArweaveProvider.tsx

@@ -8,6 +8,7 @@ import { AR_WALLETS, WALLET_PERMISSIONS } from 'helpers/config';
 import { getBalanceEndpoint } from 'helpers/endpoints';
 import { language } from 'helpers/language';
 import { STYLING } from 'helpers/styling';
+import { useConnection } from 'arweave-wallet-kit';
 
 export const WalletListContainer = styled.div`
   height: 100%;
@@ -94,6 +95,7 @@ function WalletList(props: { handleConnect: () => void }) {
 
 export function ArweaveProvider(props: ArweaveProviderProps) {
   const wallets = AR_WALLETS;
+  const { connect, disconnect } = useConnection();
 
   const [walletModalVisible, setWalletModalVisible] =
     React.useState<boolean>(false);
@@ -106,17 +108,11 @@ export function ArweaveProvider(props: ArweaveProviderProps) {
   // const [arProfile, setArProfile] = React.useState<ProfileType | null>(null);
 
   async function handleConnect() {
-    await window?.arweaveWallet
-      ?.connect(WALLET_PERMISSIONS as any)
-      .then(() => {
-        setWalletModalVisible(false);
-      })
-      .catch((e: any) => {
-        alert(e);
-      });
+    connect();
   }
 
   async function handleDisconnect() {
+    await disconnect();
     await window?.arweaveWallet?.disconnect();
     setWalletAddress(null);
   }

app/src/wallet/WalletConnect/WalletConnect.tsx

@@ -7,6 +7,7 @@ import { useArweaveProvider } from 'providers/ArweaveProvider';
 import { CloseHandler } from 'wrappers/CloseHandler';
 
 import * as S from './styles';
+import { useConnection } from 'arweave-wallet-kit';
 
 export default function WalletConnect(props: { callback?: () => void }) {
   const arProvider = useArweaveProvider();
@@ -15,6 +16,8 @@ export default function WalletConnect(props: { callback?: () => void }) {
   const [showDropdown, setShowDropdown] = React.useState<boolean>(false);
   const [copied, setCopied] = React.useState<boolean>(false);
 
+  const { connect } = useConnection();
+
   React.useEffect(() => {
     setTimeout(() => {
       setShowWallet(true);
@@ -25,7 +28,7 @@ export default function WalletConnect(props: { callback?: () => void }) {
     if (arProvider.walletAddress) {
       setShowDropdown(true);
     } else {
-      arProvider.setWalletModalVisible(true);
+      connect();
     }
   }
 

app/vite.config.ts

@@ -1,34 +1,34 @@
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import { defineConfig } from 'vite';
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
 export default defineConfig({
   base: "",
   plugins: [react()],
   resolve: {
     alias: [
-      { find: 'app', replacement: path.resolve(__dirname, 'src/app/') },
-      { find: 'api', replacement: path.resolve(__dirname, 'src/api/') },
-      { find: 'assets', replacement: path.resolve(__dirname, 'src/assets/') },
+      { find: "app", replacement: path.resolve(__dirname, "src/app/") },
+      { find: "api", replacement: path.resolve(__dirname, "src/api/") },
+      { find: "assets", replacement: path.resolve(__dirname, "src/assets/") },
       {
-        find: 'components',
-        replacement: path.resolve(__dirname, 'src/components/'),
+        find: "components",
+        replacement: path.resolve(__dirname, "src/components/"),
       },
-      { find: 'global', replacement: path.resolve(__dirname, 'src/global/') },
-      { find: 'helpers', replacement: path.resolve(__dirname, 'src/helpers/') },
+      { find: "global", replacement: path.resolve(__dirname, "src/global/") },
+      { find: "helpers", replacement: path.resolve(__dirname, "src/helpers/") },
       {
-        find: 'navigation',
-        replacement: path.resolve(__dirname, 'src/navigation/'),
+        find: "navigation",
+        replacement: path.resolve(__dirname, "src/navigation/"),
       },
       {
-        find: 'providers',
-        replacement: path.resolve(__dirname, 'src/providers/'),
+        find: "providers",
+        replacement: path.resolve(__dirname, "src/providers/"),
       },
-      { find: 'routes', replacement: path.resolve(__dirname, 'src/routes/') },
-      { find: 'views', replacement: path.resolve(__dirname, 'src/views/') },
-      { find: 'wallet', replacement: path.resolve(__dirname, 'src/wallet/') },
+      { find: "routes", replacement: path.resolve(__dirname, "src/routes/") },
+      { find: "views", replacement: path.resolve(__dirname, "src/views/") },
+      { find: "wallet", replacement: path.resolve(__dirname, "src/wallet/") },
       {
-        find: 'wrappers',
-        replacement: path.resolve(__dirname, 'src/wrappers/'),
+        find: "wrappers",
+        replacement: path.resolve(__dirname, "src/wrappers/"),
       },
     ],
   },

contracts/scripts/deploy-contract-test.mjs

@@ -1,5 +1,9 @@
 import { WarpFactory, SourceType, defaultCacheOptions } from 'warp-contracts';
-import { DeployPlugin, ArweaveSigner } from 'warp-contracts-plugin-deploy';
+import {
+  DeployPlugin,
+  ArweaveSigner,
+  InjectedArweaveSigner,
+} from 'warp-contracts-plugin-deploy';
 import { map, omit } from 'ramda';
 import BigNumber from 'bignumber.js';
 
@@ -33,29 +37,44 @@ async function deploy(folder) {
     },
   };
 
-  const deployed = await warp.deploy(
-    {
-      // wallet: new ArweaveSigner(jwk),
-      wallet: jwk,
-      initState: JSON.stringify({
-        ...initialState,
-      }),
-      src: contractSrc,
-      evaluationManifest: {
-        evaluationOptions: {
-          sourceType: SourceType.BOTH,
-          internalWrites: true,
-          allowBigInt: true,
-          unsafeClient: 'skip',
-        },
+  const { contractTxId, srcTxId } = await warp.deploy({
+    wallet: new InjectedArweaveSigner(jwk),
+    initState: JSON.stringify({ ...initialState }),
+    src: contractSrc,
+    evaluationManifest: {
+      evaluationOptions: {
+        sourceType: SourceType.BOTH,
+        internalWrites: true,
+        allowBigInt: true,
+        unsafeClient: 'skip',
       },
     },
-    {
-      disabledBundling: true,
-    }
-  );
-  console.log(`SEQ contractTxId ${deployed.contractTxId}`);
-  await waitForConfirmation(deployed.contractTxId);
+  });
+
+  // const deployed = await warp.deploy(
+  //   {
+  //     // wallet: new ArweaveSigner(jwk),
+  //     wallet: jwk,
+  //     initState: JSON.stringify({
+  //       ...initialState,
+  //     }),
+  //     src: contractSrc,
+  //     evaluationManifest: {
+  //       evaluationOptions: {
+  //         sourceType: SourceType.BOTH,
+  //         internalWrites: true,
+  //         allowBigInt: true,
+  //         unsafeClient: 'skip',
+  //       },
+  //     },
+  //   },
+  //   {
+  //     disabledBundling: true,
+  //   }
+  // );
+  console.log(`SEQ contractTxId ${contractTxId}, ${srcTxId}`);
+  // console.log(`SEQ contractTxId ${deployed.contractTxId}`);
+  // await waitForConfirmation(deployed.contractTxId);
 }
 deploy(process.argv[2]).catch(console.log);