6 |
9 |
10 | );
11 | };
12 |
13 | export default Loader;
14 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/types/snap.ts:
--------------------------------------------------------------------------------
1 | export type GetSnapsResponse = Record
8 |
13 | );
14 | };
15 |
16 | export default Dashboard;
17 |
--------------------------------------------------------------------------------
/docs/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 4rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | @media screen and (max-width: 996px) {
14 | .heroBanner {
15 | padding: 2rem;
16 | }
17 | }
18 |
19 | .buttons {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/types/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | interface Window {
3 | ethereum: MetaMaskInpageProvider & {
4 | setProvider?: (provider: MetaMaskInpageProvider) => void;
5 | detected?: MetaMaskInpageProvider[];
6 | providers?: MetaMaskInpageProvider[];
7 | };
8 | }
9 |
10 | interface WindowEventMap {
11 | 'eip6963:requestProvider': EIP6963RequestProviderEvent;
12 | 'eip6963:announceProvider': EIP6963AnnounceProviderEvent;
13 | }
14 | }
15 |
16 | export {};
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Common
2 | target
3 | node_modules
4 | .DS_STORE
5 | dist
6 |
7 | # Package Manager
8 | .parcel-cache
9 | .yarn/*
10 | !.yarn/patches
11 | !.yarn/plugins
12 | !.yarn/releases
13 | !.yarn/sdks
14 | !.yarn/versions
15 |
16 | # Developer tools
17 | .idea
18 | .vscode
19 |
20 | # e2e Tests package
21 | packages/e2e-tests/dist/*
22 | !/packages/e2e-tests/dist/serve.json
23 |
24 | # Web wallet
25 | packages/web-wallet/dist/*
26 | !packages/web-wallet/dist/_headers
27 | !packages/web-wallet/dist/_redirects
28 |
29 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client';
2 |
3 | import { RouterProvider } from 'react-router-dom';
4 | import { router } from './router';
5 | import { WebZjsProvider } from './context/WebzjsContext';
6 | import { MetaMaskProvider } from './context/MetamaskContext';
7 |
8 | createRoot(document.getElementById('root')!).render(
9 |
10 |
12 |
9 |
11 | {children ? children :
13 |
14 |
15 | );
16 | };
17 |
18 | export default Layout;
19 |
--------------------------------------------------------------------------------
/packages/snap/src/utils/dialogs.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Heading, Text, Link } from '@metamask/snaps-sdk/jsx';
2 |
3 | export const installDialog = async () => {
4 | await snap.request({
5 | method: 'snap_dialog',
6 | params: {
7 | type: 'alert',
8 | content: (
9 |
12 |
19 |
13 |
17 | 14 | {title} 15 |
16 |{children}
18 | onClick(tabName)}
16 | className={cn(
17 | 'px-4 py-2 justify-center items-center gap-1.5 flex rounded-3xl cursor-pointer',
18 | {
19 | 'bg-[#e8e8e8] text-black font-semibold': isActive,
20 | 'bg-transparent text-[#afafaf]': !isActive,
21 | },
22 | )}
23 | >
24 |
29 | );
30 | };
31 |
32 | export default Tab;
33 |
--------------------------------------------------------------------------------
/crates/webzjs-wallet/src/bindgen/proposal.rs:
--------------------------------------------------------------------------------
1 | use super::wallet::NoteRef;
2 | use wasm_bindgen::prelude::*;
3 | use zcash_client_backend::fees::StandardFeeRule;
4 |
5 | /// A handler to an immutable proposal. This can be passed to `create_proposed_transactions` to prove/authorize the transactions
6 | /// before they are sent to the network.
7 | ///
8 | /// The proposal can be reviewed by calling `describe` which will return a JSON object with the details of the proposal.
9 | #[wasm_bindgen]
10 | pub struct Proposal {
11 | inner: zcash_client_backend::proposal::Proposal
25 | {isActive ?
28 | {label}
27 |
24 | {copied && (
25 |
39 | );
40 | };
41 |
42 | export default CopyButton;
43 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/router/index.tsx:
--------------------------------------------------------------------------------
1 | import { createBrowserRouter } from 'react-router-dom';
2 | import App from '../App';
3 | import ProtectedRoute from '../components/ProtectedRoute/ProtectedRoute';
4 | import Home from '../pages/Home';
5 | import Dashboard from '../pages/Dashboard';
6 | import AccountSummary from '../pages/AccountSummary';
7 | import TransferBalance from '../pages/TransferBalance/TransferBalance';
8 | import Receive from '../pages/Receive/Receive';
9 | import { ShieldBalance } from 'src/pages/ShieldBalance/ShieldBalance';
10 |
11 | const router = createBrowserRouter([
12 | {
13 | path: '/',
14 | element:
29 | Address copied!
30 |
31 | )}
32 |
38 |
14 |
15 | {siteConfig.title}
16 |
17 |
26 | {siteConfig.tagline}
18 |
19 |
22 | Beginner Tutorial - 5min ⏱️
23 |
24 |
25 |
18 |
35 | );
36 | }
37 |
38 | export default TransactionStatusCard;
39 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/pages/Receive/QrCode.tsx:
--------------------------------------------------------------------------------
1 | import QRCode from 'react-qr-code';
2 | import { EyeSlashSvg, EyeSvg } from '../../assets';
3 | import { useState } from 'react';
4 | import CopyButton from '../../components/CopyButton/CopyButton';
5 |
6 | interface QrCodeProps {
7 | address: string; // Unified or transparent
8 | }
9 |
10 | function QrCode({ address }: QrCodeProps) {
11 | const [exposeAddress, setExposeAddress] = useState(false);
12 |
13 | return (
14 | <>
15 |
19 |
34 |
20 |
25 |
21 | {headText}
22 |
23 | {icon}
24 |
26 |
30 |
27 | {statusMessage}
28 |
29 |
31 | {props.children}
32 |
33 |
16 | {address &&
18 |
19 |
38 |
39 | );
40 | }
41 | export default QrCode;
42 |
--------------------------------------------------------------------------------
/packages/e2e-tests/e2e/tx_request.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from "@playwright/test";
2 |
3 | import type * as WebZJSWallet from "@chainsafe/webzjs-wallet";
4 | import type * as WebZJSRequests from "@chainsafe/webzjs-requests";
5 |
6 | declare global {
7 | interface Window {
8 | initialized: boolean;
9 | WebZJSWallet: typeof WebZJSWallet;
10 | WebZJSRequests: typeof WebZJSRequests;
11 | }
12 | }
13 |
14 | test.beforeEach(async ({ page }) => {
15 | await page.goto("/");
16 | await page.waitForFunction(() => window.initialized === true);
17 | });
18 |
19 | test("decode from uri", async ({ page }) => {
20 | let result = await page.evaluate(async () => {
21 | const uri =
22 | "zcash:u1mcxxpa0wyyd3qpkl8rftsa6n7tkh9lv8u8j3zpd9f6qz37dqwur38w6tfl5rpv7m8g8mlca7nyn7qxr5qtjemjqehcttwpupz3fk76q8ft82yh4scnyxrxf2jgywgr5f9ttzh8ah8ljpmr8jzzypm2gdkcfxyh4ad93c889qv3l4pa748945c372ku7kdglu388zsjvrg9dskr0v9zj?amount=1&message=Thank%20you%20for%20your%20purchase";
23 | let request = window.WebZJSRequests.TransactionRequest.from_uri(uri);
24 | return {
25 | total: request.total(),
26 | to: request.payment_requests()[0].recipient_address(),
27 | message: request.payment_requests()[0].message(),
28 | };
29 | });
30 | expect(result.total).toBe(100000000n); // 1 ZEC
31 | expect(result.to).toBe(
32 | "u1mcxxpa0wyyd3qpkl8rftsa6n7tkh9lv8u8j3zpd9f6qz37dqwur38w6tfl5rpv7m8g8mlca7nyn7qxr5qtjemjqehcttwpupz3fk76q8ft82yh4scnyxrxf2jgywgr5f9ttzh8ah8ljpmr8jzzypm2gdkcfxyh4ad93c889qv3l4pa748945c372ku7kdglu388zsjvrg9dskr0v9zj"
33 | );
34 | expect(result.message).toBe("Thank you for your purchase");
35 | });
36 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/components/Input/Input.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ErrorMessage from '../ErrorMessage/ErrorMessage';
3 |
4 | interface InputProps extends React.InputHTMLAttributes
20 | {exposeAddress ? (
21 | {address}
22 | ) : (
23 |
24 | {address}
25 |
26 | )}
27 |
28 | setExposeAddress(!exposeAddress)}
31 | >
32 | {exposeAddress ?
34 |
35 |
37 |
26 | {label && (
27 |
33 | )}
34 |
50 | );
51 | };
52 |
53 | export default Input;
54 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/hooks/snaps/useMetaMask.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | import { useMetaMaskContext } from '../../context/MetamaskContext';
4 | import { useRequest } from './useRequest.ts';
5 | import { GetSnapsResponse } from '../../types';
6 | import { defaultSnapOrigin } from '../../config';
7 |
8 | /**
9 | * A Hook to retrieve useful data from MetaMask.
10 | * @returns The information.
11 | */
12 | export const useMetaMask = () => {
13 | const { provider, setInstalledSnap, installedSnap } = useMetaMaskContext();
14 | const request = useRequest();
15 | const [isFlask, setIsFlask] = useState(false);
16 |
17 | const snapsDetected = provider !== null;
18 |
19 | /**
20 | * Detect if the version of MetaMask is Flask.
21 | */
22 | const detectFlask = async () => {
23 | const clientVersion = await request({
24 | method: 'web3_clientVersion',
25 | });
26 |
27 | const isFlaskDetected = (clientVersion as string[])?.includes('flask');
28 |
29 | setIsFlask(isFlaskDetected);
30 | };
31 |
32 | /**
33 | * Get the Snap informations from MetaMask.
34 | */
35 | const getSnap = async () => {
36 | const snaps = (await request({
37 | method: 'wallet_getSnaps',
38 | })) as GetSnapsResponse;
39 |
40 | setInstalledSnap(snaps[defaultSnapOrigin] ?? null);
41 | };
42 |
43 | useEffect(() => {
44 | const detect = async () => {
45 | if (provider) {
46 | await detectFlask();
47 | await getSnap();
48 | }
49 | };
50 |
51 | detect().catch(console.error);
52 | }, [provider]);
53 |
54 | return { isFlask, snapsDetected, installedSnap, getSnap };
55 | };
56 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/assets/icons/coins.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/.github/workflows/deploy-demo.yml:
--------------------------------------------------------------------------------
1 | name: Build and Web Wallet demo to Netlify
2 |
3 | on:
4 | # Runs on pushes targeting the default branch
5 | push:
6 | branches: ['main']
7 | # Allows you to run this workflow manually from the Actions tab
8 | workflow_dispatch:
9 |
10 | jobs:
11 | build:
12 | runs-on: ubuntu-22.04
13 | steps:
14 | - uses: actions/checkout@v4
15 |
16 | - name: Install Just
17 | uses: extractions/setup-just@v2
18 |
19 | - name: install wasm-pack
20 | uses: jetli/wasm-pack-action@v0.4.0
21 | with:
22 | version: latest
23 |
24 | - name: build pkg
25 | run: just build
26 |
27 | - uses: actions/setup-node@v4
28 | with:
29 | node-version: lts/*
30 | - run: corepack enable
31 |
32 | - name: Install dependencies
33 | run: yarn install --immutable
34 |
35 | - name: Build
36 | run: yarn web-wallet:build
37 | env:
38 | SNAP_ORIGIN: npm:@chainsafe/webzjs-zcash-snap
39 |
40 | - name: Deploy to Netlify
41 | uses: nwtgck/actions-netlify@v3.0
42 | with:
43 | publish-dir: './packages/web-wallet/dist'
44 | production-branch: main
45 | github-token: ${{ secrets.GITHUB_TOKEN }}
46 | deploy-message: "Deploy from GitHub Actions"
47 | enable-pull-request-comment: false
48 | enable-commit-comment: true
49 | overwrites-pull-request-comment: true
50 | env:
51 | NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
52 | NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
53 | timeout-minutes: 1
54 |
--------------------------------------------------------------------------------
/packages/snap/src/rpc/getViewingKey.tsx:
--------------------------------------------------------------------------------
1 | import { UnifiedSpendingKey } from '@chainsafe/webzjs-keys';
2 | import { getSeed } from '../utils/getSeed';
3 | import { Box, Copyable, Divider, Heading, Text } from '@metamask/snaps-sdk/jsx';
4 |
5 | type Network = 'main' | 'test';
6 |
7 | export async function getViewingKey(
8 | origin: string,
9 | network: Network = 'main',
10 | accountIndex: number = 0,
11 | ) {
12 |
13 | try {
14 | // Retrieve the BIP-44 entropy from MetaMask
15 | const seed = await getSeed();
16 |
17 | // Generate the UnifiedSpendingKey and obtain the Viewing Key
18 | const spendingKey = new UnifiedSpendingKey(network, seed, accountIndex);
19 | const viewingKey = spendingKey.to_unified_full_viewing_key().encode(network);
20 |
21 | const dialogApproved = await snap.request({
22 | method: 'snap_dialog',
23 | params: {
24 | type: 'confirmation',
25 | content: (
26 |
35 |
41 |
45 | {suffix}
46 |
47 |
48 |
13 | 
18 |
30 |
31 | {isHomePage ?? (
32 |
55 | )}
56 |
19 | {isHomePage ? (
20 | 
21 | ) : (
22 | 
27 | )}
28 |
29 |
24 | {currentStep !== 3 && (
25 |
26 |
42 | )}
43 | {currentStep === TransferStep.INPUT && (
44 |
63 | );
64 | }
65 |
66 | export default TransferBalance;
67 |
--------------------------------------------------------------------------------
/packages/snap/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@chainsafe/webzjs-zcash-snap",
3 | "version": "0.2.7",
4 | "description": "Zcash Metmamask Snap that utilizes WebZjs.",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/ChainSafe/WebZjs.git"
8 | },
9 | "license": "(MIT-0 OR Apache-2.0)",
10 | "main": "./dist/bundle.js",
11 | "files": [
12 | "dist/",
13 | "images/logo.svg",
14 | "snap.manifest.json"
15 | ],
16 | "scripts": {
17 | "allow-scripts": "yarn workspace root allow-scripts",
18 | "build": "mm-snap build",
19 | "build:clean": "yarn clean && yarn build",
20 | "build:prePublish": "bash ./build_prePublish.sh",
21 | "build:local": "./build_local.sh",
22 | "clean": "rimraf dist",
23 | "lint": "eslint --color --ext .ts src/",
24 | "lint:fix": "yarn run lint --fix",
25 | "prepublishOnly": "mm-snap manifest",
26 | "serve": "mm-snap serve",
27 | "start": "mm-snap watch",
28 | "test": "jest"
29 | },
30 | "dependencies": {
31 | "@chainsafe/webzjs-keys": "0.1.0",
32 | "@metamask/snaps-sdk": "^6.17.1",
33 | "buffer": "^6.0.3",
34 | "superstruct": "^2.0.2"
35 | },
36 | "devDependencies": {
37 | "@chainsafe/eslint-config": "^2.2.4",
38 | "@jest/globals": "^29.5.0",
39 | "@metamask/auto-changelog": "^4.0.0",
40 | "@metamask/eslint-config": "^14.0.0",
41 | "@metamask/eslint-config-jest": "^14.0.0",
42 | "@metamask/eslint-config-nodejs": "^14.0.0",
43 | "@metamask/eslint-config-typescript": "^14.0.0",
44 | "@metamask/snaps-cli": "^6.5.2",
45 | "@metamask/snaps-jest": "^8.8.1",
46 | "@types/react": "18.2.4",
47 | "@types/react-dom": "18.2.4",
48 | "@typescript-eslint/eslint-plugin": "^6.21.0",
49 | "@typescript-eslint/parser": "^5.42.1",
50 | "eslint": "8",
51 | "eslint-config-prettier": "^9.1.0",
52 | "eslint-plugin-import": "~2.31.0",
53 | "eslint-plugin-jest": "^27.1.5",
54 | "eslint-plugin-jsdoc": "^41.1.2",
55 | "eslint-plugin-n": "^15.7.0",
56 | "eslint-plugin-prettier": "^5.2.1",
57 | "eslint-plugin-promise": "^6.1.1",
58 | "jest": "^29.5.0",
59 | "prettier": "^3.3.3",
60 | "prettier-plugin-packagejson": "^2.5.3",
61 | "rimraf": "^3.0.2",
62 | "ts-jest": "^29.1.0",
63 | "typescript": "^4.7.4"
64 | },
65 | "publishConfig": {
66 | "access": "public",
67 | "registry": "https://registry.npmjs.org/"
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/packages/e2e-tests/e2e/web_wallet.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 | import { WebWallet } from '@chainsafe/webzjs-wallet';
3 | import type * as WebZJSWallet from '@chainsafe/webzjs-wallet';
4 |
5 | import type * as WebZJSKeys from '@chainsafe/webzjs-keys';
6 |
7 | declare global {
8 | interface Window {
9 | webWallet: WebWallet;
10 | WebZJSKeys: typeof WebZJSKeys;
11 | WebZJSWallet: typeof WebZJSWallet;
12 | }
13 | }
14 |
15 | const SEED =
16 | 'mix sample clay sweet planet lava giraffe hand fashion switch away pool rookie earth purity truly square trumpet goose move actor save jaguar volume';
17 | const BIRTHDAY = 2657762;
18 |
19 | test.beforeEach(async ({ page }) => {
20 | await page.goto('/');
21 | await page.waitForFunction(() => (window as any).initialized === true);
22 | await page.evaluate(
23 | async ({ seed, birthday }) => {
24 | await window.webWallet.create_account('account-0', seed, 0, birthday);
25 | },
26 | { seed: SEED, birthday: BIRTHDAY },
27 | );
28 | });
29 |
30 | test('Account was added', async ({ page }) => {
31 | let result = await page.evaluate(async () => {
32 | let summary = await window.webWallet.get_wallet_summary();
33 | return summary?.account_balances.length;
34 | });
35 | expect(result).toBe(1);
36 | });
37 |
38 | test('Wallet can be serialized', async ({ page }) => {
39 | let result = await page.evaluate(async () => {
40 | let bytes = await window.webWallet.db_to_bytes();
41 | return bytes;
42 | });
43 | });
44 |
45 | test('Accont can be added from ufvk', async ({ page }) => {
46 | let result = await page.evaluate(async () => {
47 | let seed = new Uint8Array(Array.from({ length: 32 }, (_, i) => i + 1));
48 | let birthday = 2657762;
49 | let usk = new window.WebZJSKeys.UnifiedSpendingKey('main', seed, 0);
50 | let ufvk = usk.to_unified_full_viewing_key();
51 |
52 | const keysSeedFingerprint = new window.WebZJSKeys.SeedFingerprint(seed);
53 | const seedFingerprint = window.WebZJSWallet.SeedFingerprint.from_bytes(
54 | keysSeedFingerprint.to_bytes(),
55 | );
56 |
57 |
58 | await window.webWallet.create_account_ufvk(
59 | 'account-0',
60 | ufvk.encode('main'),
61 | seedFingerprint,
62 | 0,
63 | birthday,
64 | );
65 |
66 |
67 | let summary = await window.webWallet.get_wallet_summary();
68 | return summary?.account_balances.length;
69 | });
70 | expect(result).toBe(2);
71 | });
72 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/assets/icons/warning.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/assets/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/web-wallet/src/components/TransferCards/TransferResult.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import { TransferBalanceFormType } from '../../pages/TransferBalance/useTransferBalanceForm';
3 | import React from 'react';
4 | import { CheckSVG, WarningSVG } from '../../assets';
5 | import Button from '../Button/Button';
6 | import TransactionStatusCard from '../TransactionStatusCard/TransactionStatusCard';
7 | import { PcztTransferStatus } from 'src/hooks/usePCZT';
8 | import Loader from 'src/components/Loader/Loader';
9 |
10 | interface TransferResultProps {
11 | pcztTransferStatus: PcztTransferStatus;
12 | resetForm: TransferBalanceFormType['resetForm'];
13 | isShieldTransaction?: boolean;
14 | }
15 |
16 | export function TransferResult({
17 | pcztTransferStatus,
18 | resetForm,
19 | isShieldTransaction,
20 | }: TransferResultProps): React.JSX.Element {
21 | const navigate = useNavigate();
22 |
23 | const actionWord = isShieldTransaction ? 'Shielding' : 'Transfer';
24 |
25 | switch (pcztTransferStatus) {
26 | case PcztTransferStatus.SEND_SUCCESSFUL:
27 | return
27 |
28 | Available shielded balance:
29 |
30 |
41 |
31 | 
36 |
37 | {zatsToZec(shieldedBalance)} ZEC
38 |
39 |
40 |