diff --git a/vscode-extension/package.json b/vscode-extension/package.json
index 52b5030..f0e2edf 100644
--- a/vscode-extension/package.json
+++ b/vscode-extension/package.json
@@ -58,6 +58,7 @@
     "@typescript-eslint/parser": "^5.45.0",
     "@vscode/test-electron": "^2.2.0",
     "dotenv": "^16.0.3",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.28.0",
     "glob": "^8.0.3",
     "mocha": "^10.1.0",
@@ -74,6 +75,7 @@
   },
   "dependencies": {
     "axios": "^1.3.4",
+    "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/vscode-extension/src/Sidebar.tsx b/vscode-extension/src/Sidebar.tsx
index 6230cf3..eb27ac2 100644
--- a/vscode-extension/src/Sidebar.tsx
+++ b/vscode-extension/src/Sidebar.tsx
@@ -1,39 +1,50 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import './base.css';
-import { DropDetails } from '@shared/types/common';
-import { generateId } from '@shared/lib/util';
+import { useMachine } from '@xstate/react/lib/useMachine';
+import { GrabContext } from '@shared/types/grab';
+import { grabMachine, initGrabContext } from '@shared/lib/machines/grab';
+import { MessageType } from '@shared/lib/constants';
+import { createGrabHandlers } from '@shared/handlers/grab';
+import { initPeer } from './lib/peer';
+import { decryptFile, hashFile } from '@shared/lib/crypto/browser';
 
 export function Sidebar() {
     const [mode, setMode] = useState<string | null>(null);
     const inputRef = useRef<HTMLInputElement>(null);
     const [peerId, setPeerId] = useState<string>();
+    const contextRef = useRef<GrabContext>(initGrabContext());
+    const timersRef = useRef(new Map<MessageType, NodeJS.Timeout>());
 
-    const connect = async () => {
-        const id = generateId();
+    const [{ value: state }, send] = useMachine(grabMachine);
 
-        const { initPeer } = await import('./lib/peer');
-
-        const peer = await initPeer(id);
-
-        console.log(peer);
-    };
+    const { init } = useMemo(
+        () =>
+            createGrabHandlers({
+                ctx: contextRef.current,
+                timers: timersRef.current,
+                sendEvent: send,
+                logger: {
+                    info: console.info,
+                    error: console.error,
+                    debug: console.debug,
+                },
+                file: {
+                    decrypt: decryptFile,
+                    hash: hashFile,
+                },
+                initPeer,
+                cleanupSession: () => {},
+                apiUri: process.env.REACT_APP_DEADDROP_API_URL!,
+            }),
+        [],
+    );
 
     const startGrab = async () => {
         const dropId = inputRef.current!.value;
 
-        const res = await fetch(
-            `${process.env.REACT_APP_DEADDROP_API_URL!}?id=${dropId}`,
-            {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            },
-        );
-
-        const data = await res.json();
+        contextRef.current.id = dropId;
 
-        setPeerId(data.peerId);
+        await init();
     };
 
     return (
@@ -42,7 +53,9 @@ export function Sidebar() {
             {mode === 'drop' ? (
                 <>
                     <p>dropping</p>
-                    <button onClick={connect}>connect</button>
+                    <button onClick={() => console.log('CONNECT')}>
+                        connect
+                    </button>
                 </>
             ) : mode === 'grab' ? (
                 <>
diff --git a/vscode-extension/src/lib/peer.ts b/vscode-extension/src/lib/peer.ts
index b742d3f..2db951d 100644
--- a/vscode-extension/src/lib/peer.ts
+++ b/vscode-extension/src/lib/peer.ts
@@ -2,5 +2,5 @@ import { createPeer } from '@shared/lib/peer';
 
 // NOTE may need shim
 
-export const initPeer = (id: string) =>
-    createPeer(id, process.env.REACT_APP_PEER_SERVER_URL!);
+export const initPeer = () =>
+    createPeer(process.env.REACT_APP_PEER_SERVER_URL!);
diff --git a/vscode-extension/webpack.config.js b/vscode-extension/webpack.config.js
index 738acfc..ea64478 100644
--- a/vscode-extension/webpack.config.js
+++ b/vscode-extension/webpack.config.js
@@ -1,7 +1,7 @@
 'use strict';
-
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const DotenvWebpackPlugin = require('dotenv-webpack');
 
 /**@type {import('webpack').Configuration}*/
 const config = {
@@ -19,9 +19,7 @@ const config = {
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js'],
-        plugins: [
-            new TsconfigPathsPlugin({ configFile: './tsconfig.json' }),
-        ],
+        plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
     },
     module: {
         rules: [
@@ -41,6 +39,7 @@ const config = {
             },
         ],
     },
+    plugins: [new DotenvWebpackPlugin()],
 };
 
 module.exports = config;