[wallet-adapter] Migrate wallet adapter demo to Vite (MystenLabs#4179)

* Migrate wallet adapter demo to Vite * Resolve rebase issues
toga0731 · Aug 23, 2022 · c78a703 · c78a703
1 parent 5d04a96
commit c78a703
Show file tree

Hide file tree

Showing 16 changed files with 1,402 additions and 379 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/wallet-adapter/index.html b/wallet-adapter/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/wallet-adapter/package.json b/wallet-adapter/package.json
@@ -8,6 +8,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.0",
     "@mysten/sui.js": "workspace:*",
+    "@mysten/wallet-adapter-sui-wallet": "workspace:*",
     "@mysten/wallet-adapter-all-wallets": "workspace:*",
     "@mysten/wallet-adapter-base": "workspace:*",
     "@mysten/wallet-adapter-react": "workspace:*",
@@ -21,15 +22,12 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4"
+    "typescript": "^4.7.4"
   },
   "scripts": {
-    "dev": "pnpm -r --filter './packages/**' run build && react-scripts start",
-    "build": "pnpm -r --filter './packages/**' run build && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "pnpm -r --filter './packages/**' run build && vite build",
+    "test": "echo 'No tests.'"
   },
   "eslintConfig": {
     "extends": [
@@ -48,5 +46,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^2.0.1",
+    "vite": "^3.0.9",
+    "vite-tsconfig-paths": "^3.5.0"
   }
 }
diff --git a/wallet-adapter/packages/adapters/integrations/all-wallets/src/index.ts b/wallet-adapter/packages/adapters/integrations/all-wallets/src/index.ts
@@ -1,5 +1,5 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-export * from '@sui-wallet-adapter/sui-wallet';
-export * from '@sui-wallet-adapter/mock-wallet';
+export * from '@mysten/wallet-adapter-sui-wallet';
+export * from '@mysten/wallet-adapter-mock-wallet';
diff --git a/wallet-adapter/packages/adapters/integrations/mock-wallet/src/adapter.ts b/wallet-adapter/packages/adapters/integrations/mock-wallet/src/adapter.ts
@@ -1,76 +1,85 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { MoveCallTransaction, SuiAddress, SuiTransactionResponse } from "@mysten/sui.js";
+import {
+  MoveCallTransaction,
+  SuiAddress,
+  SuiTransactionResponse,
+} from "@mysten/sui.js";
 import { WalletCapabilities } from "@mysten/wallet-adapter-base";
 
-const ALL_PERMISSION_TYPES = [
-    'viewAccount',
-    'suggestTransactions',
-];
+const ALL_PERMISSION_TYPES = ["viewAccount", "suggestTransactions"];
 type AllPermissionsType = typeof ALL_PERMISSION_TYPES;
 type PermissionType = AllPermissionsType[number];
 
 interface SuiWallet {
-    hasPermissions(permissions: readonly PermissionType[]): Promise<boolean>;
-    requestPermissions(): Promise<boolean>;
-    getAccounts(): Promise<SuiAddress[]>;
-    executeMoveCall: (transaction: MoveCallTransaction) => Promise<SuiTransactionResponse>;
-    executeSerializedMoveCall: (transactionBytes: Uint8Array) => Promise<SuiTransactionResponse>;
+  hasPermissions(permissions: readonly PermissionType[]): Promise<boolean>;
+  requestPermissions(): Promise<boolean>;
+  getAccounts(): Promise<SuiAddress[]>;
+  executeMoveCall: (
+    transaction: MoveCallTransaction
+  ) => Promise<SuiTransactionResponse>;
+  executeSerializedMoveCall: (
+    transactionBytes: Uint8Array
+  ) => Promise<SuiTransactionResponse>;
 }
 interface SuiWalletWindow {
-    suiWallet: SuiWallet
+  suiWallet: SuiWallet;
 }
 
 declare const window: SuiWalletWindow;
 
 // Stored as state somewhere (Probably in a place with generics )
-export class MockWalletAdapter implements WalletCapabilities{
-    connecting: boolean;
-    connected: boolean;
+export class MockWalletAdapter implements WalletCapabilities {
+  connecting: boolean;
+  connected: boolean;
 
-    getAccounts(): Promise<string[]> {
-        return window.suiWallet.getAccounts();
-    }
-    executeMoveCall(transaction: MoveCallTransaction): Promise<SuiTransactionResponse> {
-        return window.suiWallet.executeMoveCall(transaction);
-    }
-    executeSerializedMoveCall(transactionBytes: Uint8Array): Promise<SuiTransactionResponse> {
-        return window.suiWallet.executeSerializedMoveCall(transactionBytes);
-    }
+  getAccounts(): Promise<string[]> {
+    return window.suiWallet.getAccounts();
+  }
+  executeMoveCall(
+    transaction: MoveCallTransaction
+  ): Promise<SuiTransactionResponse> {
+    return window.suiWallet.executeMoveCall(transaction);
+  }
+  executeSerializedMoveCall(
+    transactionBytes: Uint8Array
+  ): Promise<SuiTransactionResponse> {
+    return window.suiWallet.executeSerializedMoveCall(transactionBytes);
+  }
 
-    name: string;
+  name: string;
 
-    async connect(): Promise<void> {
-        this.connecting = true;
-        if (window.suiWallet) {
-            const wallet = window.suiWallet;
-            try {
-                let given = await wallet.requestPermissions();
-                const newLocal: readonly PermissionType[] = ['viewAccount']
-                let perms = await wallet.hasPermissions(newLocal);
-                console.log(perms);
-                console.log(given);
-                this.connected = true;
-            } catch (err) {
-                console.error(err);
-            } finally {
-                this.connecting = false;
-            }
-        }
+  async connect(): Promise<void> {
+    this.connecting = true;
+    if (window.suiWallet) {
+      const wallet = window.suiWallet;
+      try {
+        let given = await wallet.requestPermissions();
+        const newLocal: readonly PermissionType[] = ["viewAccount"];
+        let perms = await wallet.hasPermissions(newLocal);
+        console.log(perms);
+        console.log(given);
+        this.connected = true;
+      } catch (err) {
+        console.error(err);
+      } finally {
+        this.connecting = false;
+      }
     }
+  }
 
-    // Come back to this later
-    async disconnect(): Promise<void> {
-        if (this.connected == true) {
-            this.connected = false;
-        }
-        console.log("disconnected");
+  // Come back to this later
+  async disconnect(): Promise<void> {
+    if (this.connected == true) {
+      this.connected = false;
     }
+    console.log("disconnected");
+  }
 
-    constructor(name: string) {
-        this.connected = false;
-        this.connecting = false;
-        this.name = name;
-    }
+  constructor(name: string) {
+    this.connected = false;
+    this.connecting = false;
+    this.name = name;
+  }
 }
diff --git a/wallet-adapter/packages/adapters/integrations/sui-wallet/src/adapter.ts b/wallet-adapter/packages/adapters/integrations/sui-wallet/src/adapter.ts
@@ -1,75 +1,84 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { MoveCallTransaction, SuiAddress, SuiTransactionResponse } from "@mysten/sui.js";
+import {
+  MoveCallTransaction,
+  SuiAddress,
+  SuiTransactionResponse,
+} from "@mysten/sui.js";
 import { WalletCapabilities } from "@mysten/wallet-adapter-base";
 
-const ALL_PERMISSION_TYPES = [
-    'viewAccount',
-    'suggestTransactions',
-] as const;
+const ALL_PERMISSION_TYPES = ["viewAccount", "suggestTransactions"] as const;
 type AllPermissionsType = typeof ALL_PERMISSION_TYPES;
 type PermissionType = AllPermissionsType[number];
 
 interface SuiWallet {
-    hasPermissions(permissions: readonly PermissionType[]): Promise<boolean>;
-    requestPermissions(): Promise<boolean>;
-    getAccounts(): Promise<SuiAddress[]>;
-    executeMoveCall: (transaction: MoveCallTransaction) => Promise<SuiTransactionResponse>;
-    executeSerializedMoveCall: (transactionBytes: Uint8Array) => Promise<SuiTransactionResponse>;
+  hasPermissions(permissions: readonly PermissionType[]): Promise<boolean>;
+  requestPermissions(): Promise<boolean>;
+  getAccounts(): Promise<SuiAddress[]>;
+  executeMoveCall: (
+    transaction: MoveCallTransaction
+  ) => Promise<SuiTransactionResponse>;
+  executeSerializedMoveCall: (
+    transactionBytes: Uint8Array
+  ) => Promise<SuiTransactionResponse>;
 }
 interface SuiWalletWindow {
-    suiWallet: SuiWallet
+  suiWallet: SuiWallet;
 }
 
 declare const window: SuiWalletWindow;
 
 // Stored as state somewhere (Probably in a place with generics )
-export class SuiWalletAdapter implements WalletCapabilities{
-    connecting: boolean;
-    connected: boolean;
+export class SuiWalletAdapter implements WalletCapabilities {
+  connecting: boolean;
+  connected: boolean;
 
-    getAccounts(): Promise<string[]> {
-        return window.suiWallet.getAccounts();
-    }
-    executeMoveCall(transaction: MoveCallTransaction): Promise<SuiTransactionResponse> {
-        return window.suiWallet.executeMoveCall(transaction);
-    }
-    executeSerializedMoveCall(transactionBytes: Uint8Array): Promise<SuiTransactionResponse> {
-        return window.suiWallet.executeSerializedMoveCall(transactionBytes);
-    }
+  getAccounts(): Promise<string[]> {
+    return window.suiWallet.getAccounts();
+  }
+  executeMoveCall(
+    transaction: MoveCallTransaction
+  ): Promise<SuiTransactionResponse> {
+    return window.suiWallet.executeMoveCall(transaction);
+  }
+  executeSerializedMoveCall(
+    transactionBytes: Uint8Array
+  ): Promise<SuiTransactionResponse> {
+    return window.suiWallet.executeSerializedMoveCall(transactionBytes);
+  }
 
-    name = "Sui Wallet";
+  name = "Sui Wallet";
 
-    async connect(): Promise<void> {
-        this.connecting = true;
-        if (window.suiWallet) {
-            const wallet = window.suiWallet;
-            try {
-                let given = await wallet.requestPermissions();
-                const newLocal: readonly PermissionType[] = ['viewAccount']
-                let perms = await wallet.hasPermissions(newLocal);
-                console.log(perms);
-                console.log(given);
-                this.connected = true;
-            } catch (err) {
-                console.error(err);
-            } finally {
-                this.connecting = false;
-            }
-        }
+  async connect(): Promise<void> {
+    this.connecting = true;
+    if (window.suiWallet) {
+      const wallet = window.suiWallet;
+      try {
+        let given = await wallet.requestPermissions();
+        const newLocal: readonly PermissionType[] = ["viewAccount"];
+        let perms = await wallet.hasPermissions(newLocal);
+        console.log(perms);
+        console.log(given);
+        this.connected = true;
+      } catch (err) {
+        console.error(err);
+      } finally {
+        this.connecting = false;
+      }
     }
+  }
 
-    // Come back to this later
-    async disconnect(): Promise<void> {
-        if (this.connected == true) {
-            this.connected = false;
-        }
-        console.log("disconnected");
+  // Come back to this later
+  async disconnect(): Promise<void> {
+    if (this.connected == true) {
+      this.connected = false;
     }
+    console.log("disconnected");
+  }
 
-    constructor() {
-        this.connected = false;
-        this.connecting = false;
-    }
+  constructor() {
+    this.connected = false;
+    this.connecting = false;
+  }
 }