initial commit

.github/workflows/deploy.yml

@@ -0,0 +1,21 @@
+name: Build and Deploy
+on: [push]
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+        run: |
+          npm install
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: build # The folder the action should deploy.

package.json

@@ -3,18 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "@metamask/browser-passworder": "4.3.0",
+    "buffer": "6.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.css

@@ -1,21 +1,6 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  height: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -24,6 +9,10 @@
   color: white;
 }
 
+.App-body {
+  padding-left: 20px;
+}
+
 .App-link {
   color: #61dafb;
 }

src/App.js

@@ -1,23 +1,59 @@
-import logo from './logo.svg';
 import './App.css';
+import { useCallback, useState } from 'react';
+import { decrypt } from '@metamask/browser-passworder';
 
 function App() {
+  window.Buffer = window.Buffer || require("buffer").Buffer;
+
+  const [vaultData, setVaultData] = useState('');
+  const [password, setPassword] = useState('');
+  const [decryptedVaultData, setDecryptedVaultData] = useState('');
+  const handleTextAreaOnchange = useCallback((e) => {
+    setVaultData(e.target.value);
+  }, []);
+  const handleClick = useCallback(async () => {
+    const decryptedVault = await decrypt(password, vaultData);
+    setDecryptedVaultData(JSON.stringify(decryptedVault, null, 2));
+  }, [password, vaultData]);
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <h1>Rainbow BX Vault Decryptor</h1>
+      </header>
+      <div className='App-body'>
+      {decryptedVaultData  ? (
+        <pre>
+          {decryptedVaultData}
+        </pre>
+      ) : (
+        <div>
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Step 1 - Open the extension and right click inside on the top right, above the 3 dots icon. <br />
+          Step 2 - Select "Inspect" <br />
+          Step 3 - Select the "Console" tab <br />
+          Step 4 - Paste the following code in the console and press enter: <br /> <br />
+          <pre style={{border: '1px dotted grey', padding: '10px', width: '630px'}}>
+           {`const { vault } = await chrome.storage.local.get('vault'); console.log(vault);`}
+          </pre> <br /> <br />
+          Step 5 - Copy the output and paste it in the text area below. <br />
+          Step 6 - Enter your password and click "Decrypt" <br />
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+
+        <textarea style={{width: '400px', height:'200px'}} value={vaultData} onChange={handleTextAreaOnchange} 
+          placeholder="Paste your vault data here"
+        />
+        <br />
+        <br />
+        <input placeholder="Enter your password here" style={{width: '300px'}} type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <br />
+        <br />
+
+        <button onClick={handleClick}>Decrypt</button>
+        </div>
+      )}
+
+      </div>
     </div>
   );
 }