migrate to parcel 2

.github/workflows/deploy-demo.yml

@@ -33,7 +33,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Build
-        run: yarn build
+        run: yarn demo-wallet:build
 
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]

package.json

@@ -14,13 +14,16 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "serve": "yarn workspace @webzjs/demo-wallet run serve",
-    "dev": "yarn run just:build-keys && yarn run snap:start & yarn run demo-wallet:dev",
-    "build": "yarn workspace @webzjs/demo-wallet run build",
-    "demo-wallet:dev": "yarn workspace @webzjs/demo-wallet run dev",
+    "dev": "yarn workspace @webzjs/web-wallet run dev & yarn run snap:start",
+    "demo-wallet:serve": "yarn workspace @webzjs/demo-wallet run serve",
+    "demo-wallet:dev": "yarn run just:build-keys && yarn run snap:start & yarn run web-wallet:dev",
+    "demo-wallet:build": "yarn workspace @webzjs/demo-wallet run build",
+    "web-wallet:dev": "yarn workspace @webzjs/web-wallet run dev",
+    "web-wallet:build": "yarn workspace @webzjs/web-wallet run build",
     "test:e2e": "yarn workspace @webzjs/e2e-tests test",
     "snap:start": "yarn workspace @webzjs/zcash-snap run start",
     "snap:build": "yarn workspace @webzjs/zcash-snap run build",
+    "just:build": "just build",
     "just:build-keys": "just build-keys"
   },
   "dependencies": {

packages/web-wallet/dist/_headers

@@ -0,0 +1,3 @@
+/*
+    Cross-Origin-Opener-Policy: same-origin
+    Cross-Origin-Embedder-Policy: require-corp

packages/web-wallet/package.json

@@ -9,8 +9,7 @@
   ],
   "scripts": {
     "dev": "node server.js",
-    "build": "parcel build index.html --dist-dir dist",
-    "lint": "eslint ."
+    "build": "parcel build index.html --dist-dir dist"
   },
   "dependencies": {
     "@metamask/providers": "^18.2.0",

packages/web-wallet/server.js

@@ -11,8 +11,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 async function run() {
-  console.log('Starting server...', process.env.SNAP_ORIGIN);
-
   const bundler = new Parcel({
     entries: 'index.html',
     defaultConfig: '@parcel/config-default',

packages/web-wallet/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useInterval } from 'usehooks-ts';
 import { Outlet, useLocation } from 'react-router-dom';
 import { RESCAN_INTERVAL } from './config/constants';
@@ -7,7 +6,6 @@ import { useWebZjsActions } from './hooks';
 import Layout from './components/Layout/Layout';
 
 function App() {
-  console.log('SNAP_ORIGIN', process.env.SNAP_ORIGIN);
   const { triggerRescan } = useWebZjsActions();
   const location = useLocation();
 

packages/web-wallet/src/assets/index.ts

@@ -1,9 +1,9 @@
-import ChainsafeSvg from './chainsafe.svg';
+import ChainsafePNG from './chainsafe.png';
 import FormTransferSvg from './form-transfer.svg';
-import MetaMaskLogoSvg from './metaMask-logo.svg';
-import MetaMaskSnapsLogoSvg from './metamask-snaps-logo.png';
-import ZcashSvg from './zcash.svg';
-import ZcashYellowSvg from './zcash-yellow.svg';
+import MetaMaskLogoPNG from './metaMask-logo.png';
+import MetaMaskSnapsLogoPNG from './metamask-snaps-logo.png';
+import ZcashPNG from './zcash.png';
+import ZcashYellowPNG from './zcash-yellow.png';
 
 // Icons
 import ArrowReceiveSvg from './icons/arrow-receive.svg';
@@ -22,11 +22,11 @@ import CircleSvg from './icons/circle.svg';
 import CircleDashedSvg from './icons/circle-dashed.svg';
 
 export {
-  ChainsafeSvg,
-  MetaMaskLogoSvg,
-  MetaMaskSnapsLogoSvg,
-  ZcashSvg,
-  ZcashYellowSvg,
+  ChainsafePNG,
+  MetaMaskLogoPNG,
+  MetaMaskSnapsLogoPNG,
+  ZcashPNG,
+  ZcashYellowPNG,
   FormTransferSvg,
   ArrowReceiveSvg,
   ArrowTransferSvg,

packages/web-wallet/src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChainsafeSvg } from '../../assets';
+import { ChainsafePNG } from '../../assets';
 
 const Footer = (): React.JSX.Element => {
   return (
@@ -12,7 +12,11 @@ const Footer = (): React.JSX.Element => {
           target="_blank"
         >
           <div className="inline-block w-6 h-6 mr-1">
-            <ChainsafeSvg />
+            <img
+              src={ChainsafePNG}
+              className="w-5 h-[20px]"
+              alt="Chainsafe logo"
+            />
           </div>
           ChainSafe
         </a>

packages/web-wallet/src/components/Header/Header.tsx

@@ -1,29 +1,34 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { MetaMaskLogoSvg, MetaMaskSnapsLogoSvg, ZcashSvg } from '../../assets';
-import Button from '../../components/Button/Button';
+import { MetaMaskLogoPNG, MetaMaskSnapsLogoPNG, ZcashPNG } from '../../assets';
 
 const Header = (): React.JSX.Element => {
   const location = useLocation();
   const isHomePage = location.pathname === '/';
 
   return (
-    <header className="font-inter h-[60px] fixed top-0 left-0 w-full px-16 flex flex-grow items-center justify-between bg-transparent py-3 border-b border-neutral-200">
+    <header className="font-inter h-[60px] fixed top-0 left-0 w-full px-16 flex grow items-center justify-between bg-transparent py-3 border-b border-neutral-200">
       <Link to={'/'}>
         <div className="flex items-center">
-          <div className="h-6 w-6 mr-3">
-            <ZcashSvg className="w-[25px] h-[25px]" />
-          </div>
-          <div className="h-6 w-full max-w-[200px]">
+          <img
+            src={ZcashPNG}
+            className="w-[25px] h-[25px] mr-3"
+            alt="Zcash logo"
+          />
+          <div className="w-full max-w-[200px]">
             {isHomePage ? (
-              <img src={MetaMaskSnapsLogoSvg} alt={'MetaMaskSnapsLogoSvg'} />
+              <img src={MetaMaskSnapsLogoPNG} alt={'MetaMaskSnapsLogoSvg'} />
             ) : (
-              <MetaMaskLogoSvg className="w-[25px] h-[25px]" />
+              <img
+                src={MetaMaskLogoPNG}
+                className="w-[32px] h-[25px]"
+                alt="MetaMask logo"
+              />
             )}
           </div>
         </div>
       </Link>
-      {isHomePage ? (
+      {isHomePage ?? (
         <nav className="flex">
           <a
             target="_blank"
@@ -47,16 +52,6 @@ const Header = (): React.JSX.Element => {
             Snap Registry
           </a>
         </nav>
-      ) : (
-        <Button
-          variant={'secondary'}
-          classNames={'min-w-max '}
-          onClick={() => {
-            // TODO: Clarify sign out functionality
-            console.log('Sign out');
-          }}
-          label={'Sign out'}
-        />
       )}
     </header>
   );

packages/web-wallet/src/components/Input/Input.tsx

@@ -35,7 +35,7 @@ const Input: React.FC<InputProps> = ({
         <input
           {...props}
           id={id}
-          className={`flex-grow bg-transparent focus:outline-none text-[#0e0e0e] text-base font-semibold font-inter ${inputClassName}`}
+          className={`grow bg-transparent focus:outline-hidden text-[#0e0e0e] text-base font-semibold font-inter ${inputClassName}`}
           aria-describedby={`${id}-suffix`}
         />
         <span

packages/web-wallet/src/components/Layout/Layout.tsx

@@ -7,7 +7,7 @@ const Layout = ({ children }: React.PropsWithChildren): React.JSX.Element => {
   return (
     <div className="container mx-auto flex flex-col min-h-screen">
       <Header />
-      <main className="flex-grow flex justify-center py-3 self-stretch mt-[60px] w-full">
+      <main className="grow flex justify-center py-3 self-stretch mt-[60px] w-full">
         {children ? children : <Outlet />}
       </main>
       <Footer />

packages/web-wallet/src/components/Select/Select.tsx

@@ -73,7 +73,7 @@ const Select: React.FC<SelectProps> = ({
         className="relative h-full flex items-center bg-neutral-50 rounded-xl border border-[#afafaf] p-3 cursor-pointer"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <span className="flex-grow bg-transparent focus:outline-none text-[#0e0e0e] text-base font-semibold font-inter">
+        <span className="grow bg-transparent focus:outline-hidden text-[#0e0e0e] text-base font-semibold font-inter">
           {selected ? (
             selected.label
           ) : (

packages/web-wallet/src/context/MetamaskContext.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MetaMaskInpageProvider } from '@metamask/providers';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';

packages/web-wallet/src/main.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { RouterProvider } from 'react-router-dom';

packages/web-wallet/src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MetaMaskLogoSvg, ZcashYellowSvg, FormTransferSvg } from '../assets';
+import { ZcashYellowPNG, FormTransferSvg, MetaMaskLogoPNG } from '../assets';
 import { useNavigate } from 'react-router-dom';
 import { useWebZjsContext } from '../context/WebzjsContext';
 import {
@@ -52,23 +52,27 @@ const Home: React.FC = () => {
           <FormTransferSvg />
         </div>
         <div className="flex flex-col items-start space-y-8">
-          <ZcashYellowSvg />
+          <img src={ZcashYellowPNG} alt="Zcash Logo" />
           <h1 className="font-inter font-semibold text-[5rem] leading-[5rem] we">
             Zcash <br />
             Web Wallet
           </h1>
           <p className="font-inter">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Access the Zcash network from your web browser with the Zcash
+            MetaMask Snap
           </p>
           <button
             disabled={!isFlask}
             onClick={handleRequestSnapAndGetViewingKey}
-            className="flex items-center bg-buttonBlackGradient hover:bg-buttonBlackGradientHover text-white px-6 py-3 rounded-[2rem]"
+            className="flex items-center bg-button-black-gradient hover:bg-button-black-gradient-hover text-white px-6 py-3 rounded-[2rem] cursor-pointer"
           >
             <span>Connect MetaMask Snap</span>
             <div className="ml-3">
-              <MetaMaskLogoSvg />
+              <img
+                src={MetaMaskLogoPNG}
+                className="w-[21px] h-[20px]"
+                alt="MetaMask Logo"
+              />
             </div>
           </button>
           <div className="text-sm">

packages/web-wallet/src/pages/Receive/QrCode.tsx

@@ -20,18 +20,18 @@ function QrCode({ address }: QrCodeProps) {
           {exposeAddress ? (
             <span className="break-words">{address}</span>
           ) : (
-            <span className="overflow-ellipsis overflow-hidden block">
+            <span className="text-ellipsis overflow-hidden block">
               {address}
             </span>
           )}
         </div>
         <div
-          className="flex-grow-0"
+          className="grow-0"
           onClick={() => setExposeAddress(!exposeAddress)}
         >
           {exposeAddress ? <EyeSlashSvg /> : <EyeSvg />}
         </div>
-        <div className="justify-start flex-grow-0">
+        <div className="justify-start grow-0">
           <CopyButton textToCopy={address} />
         </div>
       </div>

packages/web-wallet/src/pages/TransferBalance/TransferBalance.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZcashYellowSvg } from '../../assets';
+import { ZcashYellowPNG } from '../../assets';
 import useTransferBalanceForm from './useTransferBalanceForm';
 import PageHeading from '../../components/PageHeading/PageHeading';
 import useBalance from '../../hooks/useBalance';
@@ -21,7 +21,11 @@ function TransferBalance(): React.JSX.Element {
               Available:
             </span>
             <div className="px-4 py-2 bg-[#e8e8e8] rounded-3xl flex items-center gap-2.5">
-              <ZcashYellowSvg className="w-5 h-5" />
+              <img
+                src={ZcashYellowPNG}
+                alt="Zcash Yellow"
+                className="w-5 h-5"
+              />
               <span className="text-[#434343] text-base font-semibold font-inter leading-tight">
                 {totalBalance} ZEC
               </span>

packages/web-wallet/src/router/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import App from '../App';
 import ProtectedRoute from '../components/ProtectedRoute/ProtectedRoute';