greymass · deansallinen · Jun 17, 2024 · Jun 15, 2024 · Jun 17, 2024
diff --git a/package.json b/package.json
@@ -2,7 +2,6 @@
   "name": "root",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "description": "",
   "homepage": "https://github.com/MetaMask/template-snap-monorepo#readme",
   "bugs": {
@@ -14,6 +13,7 @@
   },
   "license": "(MIT-0 OR Apache-2.0)",
   "author": "",
+  "type": "module",
   "workspaces": [
     "packages/*"
   ],

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -1,44 +1,48 @@
 {
-  "name": "site",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "allow-scripts": "yarn workspace root allow-scripts",
-    "start": "vite dev"
-  },
-  "dependencies": {
-    "@metamask/providers": "^17.0.0"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3.1.0",
-    "@metamask/eslint-config": "^12.2.0",
-    "@metamask/eslint-config-browser": "^12.1.0",
-    "@metamask/eslint-config-jest": "^12.1.0",
-    "@metamask/eslint-config-nodejs": "^12.1.0",
-    "@metamask/eslint-config-typescript": "^12.1.0",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/eslint": "^8.56.7",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0-alpha.20",
-    "vite": "^5.0.3"
-  },
-  "type": "module"
+	"name": "site",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"allow-scripts": "yarn workspace root allow-scripts",
+		"start": "vite dev"
+	},
+	"dependencies": {
+		"@metamask/providers": "^17.0.0",
+		"@wharfkit/session": "next",
+		"@wharfkit/transact-plugin-resource-provider": "^1.1.1",
+		"@wharfkit/wallet-plugin-metamask": "next",
+		"@wharfkit/web-renderer": "next"
+	},
+	"devDependencies": {
+		"@eslint/eslintrc": "^3.1.0",
+		"@metamask/eslint-config": "^12.2.0",
+		"@metamask/eslint-config-browser": "^12.1.0",
+		"@metamask/eslint-config-jest": "^12.1.0",
+		"@metamask/eslint-config-nodejs": "^12.1.0",
+		"@metamask/eslint-config-typescript": "^12.1.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.7",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0-alpha.20",
+		"vite": "^5.0.3"
+	},
+	"type": "module"
 }
diff --git a/packages/site/src/components/CreateAccount.svelte b/packages/site/src/components/CreateAccount.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { connectAccount } from '$lib/rpc-methods';
+	import { getPublicKey } from '$lib/rpc-methods';
+	import { onMount } from 'svelte';
 
 	let account = { name: '', publicKey: '' };
 
@@ -24,10 +25,14 @@
 
 		if (typeof name !== 'undefined') {
 			console.log(`Account ${name} created`);
-			connectAccount();
 		}
 	}
 
+	onMount(async () => {
+		const publicKey = await getPublicKey();
+		account.publicKey = publicKey;
+	});
+
 	async function createAccount(accountData: AccountData, chainUrl: string) {
 		const data = {
 			accountName: accountData.accountName,
@@ -66,8 +71,8 @@
 		<input type="text" id="account" name="account" bind:value={account.name} />
 	</div>
 	<div>
-		<label for="account">PublicKey:</label>
-		<input type="text" id="account" name="publicKey" bind:value={account.publicKey} />
+		<label for="account">PublicKey from Metamask:</label>
+		<input readonly type="text" id="account" name="publicKey" bind:value={account.publicKey} />
 	</div>
 	<button type="submit">Submit</button>
 </form>
diff --git a/packages/site/src/lib/account.ts b/packages/site/src/lib/account.ts
diff --git a/packages/site/src/lib/rpc-methods.ts b/packages/site/src/lib/rpc-methods.ts
@@ -1,21 +1,9 @@
-import { accountName } from './account';
+import { Chains } from '@wharfkit/common';
 import { invokeSnap } from './snap';
 
-export async function connectAccount() {
-	const result = await invokeSnap({ method: 'eos_connectAccount' });
-	console.log('accountName', result);
-	accountName.set(result);
-}
-
-export async function getConnectedAccount() {
-	const account = await invokeSnap({ method: 'eos_getConnectedAccount' });
-	console.log('account', account);
-	accountName.set(account);
-	// accountPublicKey.set(account.publicKey);
-	// accountPermission.set(account.permission);
-}
-
-export async function testTransaction() {
-	const result = await invokeSnap({ method: 'eos_signTransaction' });
-	console.log('result', result);
+export async function getPublicKey(): Promise<string> {
+	return (await invokeSnap({
+		method: 'antelope_getPublicKey',
+		params: { chainId: String(Chains.Jungle4.id) }
+	})) as string;
 }
diff --git a/packages/site/src/lib/utils.ts b/packages/site/src/lib/utils.ts
diff --git a/packages/site/src/routes/+layout.ts b/packages/site/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;
diff --git a/packages/site/src/routes/+page.svelte b/packages/site/src/routes/+page.svelte
@@ -3,35 +3,84 @@
 	import { onMount } from 'svelte';
 	import { snapProvider, isFlask, isMetaMaskReady, snapsDetected, installedSnap } from '$store';
 	import type { MetaMaskInpageProvider } from '@metamask/providers';
-	import { setSnap, requestSnap, invokeSnap } from '$lib/snap';
+	import { setSnap, requestSnap } from '$lib/snap';
 	import flask_fox from '../assets/flask_fox.svg';
-	import { accountName } from '$lib/account';
 	import CreateAccount from '../components/CreateAccount.svelte';
-	import { connectAccount, getConnectedAccount, testTransaction } from '$lib/rpc-methods';
-	// import type {RpcMethodTypes} from '@greymass/eos-snap';
+	import SessionKit, { Chains, Session } from '@wharfkit/session';
+	import WebRenderer from '@wharfkit/web-renderer';
+	import { type Writable, writable } from 'svelte/store';
+	import { TransactPluginResourceProvider } from '@wharfkit/transact-plugin-resource-provider';
+	import { WalletPluginMetaMask } from '@wharfkit/wallet-plugin-metamask';
 
 	let provider: MetaMaskInpageProvider;
+	const session: Writable<Session | undefined> = writable();
 
 	$: isSnapInstalled = $installedSnap !== null;
 
+	const kit = new SessionKit(
+		{
+			appName: 'Metamask Snap Demo',
+			chains: [Chains.Jungle4],
+			ui: new WebRenderer(),
+			walletPlugins: [new WalletPluginMetaMask()]
+		},
+		{
+			transactPlugins: [new TransactPluginResourceProvider()]
+		}
+	);
+
 	onMount(async () => {
 		snapProvider.set(await getSnapsProvider());
 
 		if ($snapProvider !== null) {
 			provider = $snapProvider; // gotta be a better way of narrowing this type
 			isFlask.set(await checkIsFlask(provider));
 			setSnap();
-			getConnectedAccount();
+		}
+
+		const restored = await kit.restore();
+		if (restored) {
+			session.set(restored);
 		}
 	});
+
+	async function login() {
+		console.log('calling login');
+		const result = await kit.login();
+		session.set(result.session);
+	}
+
+	async function logout() {
+		console.log('calling logout');
+		session.set(undefined);
+		await kit.logout();
+	}
+
+	async function test() {
+		if ($session) {
+			const action = {
+				account: 'eosio.token',
+				name: 'transfer',
+				authorization: [
+					{
+						actor: $session.permissionLevel.actor,
+						permission: $session.permissionLevel.permission
+					}
+				],
+				data: {
+					from: $session.permissionLevel.actor,
+					to: 'teamgreymass',
+					quantity: '0.0001 EOS',
+					memo: 'test with metamask'
+				}
+			};
+			$session.transact({
+				actions: [action]
+			});
+		}
+	}
 </script>
 
-<h1>
-	Welcome to SvelteKit
-	{#if $accountName}
-		{$accountName}
-	{/if}
-</h1>
 <p>Snaps detected: {$snapsDetected}</p>
 <p>Is flask: {$isFlask}</p>
 <p>Is metamask ready: {$isMetaMaskReady}</p>
@@ -45,11 +94,18 @@
 
 <p>The snap will need to be re-installed after any changes to the code.</p>
 
-<button on:click={connectAccount} disabled={!$isMetaMaskReady}> Connect EOS Account </button>
-
-<p>We disable the connection button when an account is already connected.</p>
+{#if isSnapInstalled}
+	{#if $session}
+		<p>Connected account: {String($session.permissionLevel)}</p>
+		<button on:click={test} disabled={!$isMetaMaskReady || !$session}
+			>Test Signing Transaction</button
+		>
+		<button on:click={logout}>Logout</button>
+	{:else}
+		<button on:click={login} disabled={!$isMetaMaskReady}>Login</button>
+	{/if}
 
-<button on:click={testTransaction} disabled={!$isMetaMaskReady}>Test Signing Transaction</button>
-<hr />
+	<hr />
 
-<CreateAccount />
+	<CreateAccount />
+{/if}
diff --git a/packages/site/tsconfig.json b/packages/site/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "moduleResolution": "bundler",
-    "isolatedModules": true,
-    "references": [
-      {
-        "path": "../snap"
-      }
-    ]
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+		"isolatedModules": true,
+		"references": [
+			{
+				"path": "../snap"
+			}
+		]
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
 }
diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@greymass/eos-snap",
-  "version": "0.1.0",
+  "name": "@greymass/test-snap",
+  "version": "0.0.1",
   "description": "The 'Hello, world!' of MetaMask Snaps, now written in TypeScript.",
   "repository": {
     "type": "git",
@@ -30,9 +30,7 @@
     "@metamask/key-tree": "^9.1.1",
     "@metamask/snaps-sdk": "^4.0.0",
     "@wharfkit/antelope": "^1.0.7",
-    "@wharfkit/common": "^1.2.0",
-    "@wharfkit/session": "^1.3.1",
-    "@wharfkit/wallet-plugin-privatekey": "^1.1.0",
+    "@wharfkit/common": "^1.2.2",
     "buffer": "^6.0.3"
   },
   "devDependencies": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const ssr = false;
		export const prerender = false;