From 8220dfe44c02fa181b92e63f049fc2b3be6d29e1 Mon Sep 17 00:00:00 2001 From: sripwoud Date: Wed, 26 Jun 2024 12:55:14 +0200 Subject: [PATCH 1/8] feat9web): download all artifacts as tarball --- apps/web/src/constants.ts | 1 + apps/web/src/containers/DownloadButton.tsx | 16 ++++++++++------ apps/web/src/containers/FileSelect.tsx | 19 ++++++++++++------- apps/web/src/hooks/index.ts | 1 + apps/web/src/hooks/useDownloadUrl.ts | 9 +++++++++ apps/web/src/hooks/useStore.ts | 5 +++++ 6 files changed, 38 insertions(+), 13 deletions(-) create mode 100644 apps/web/src/hooks/useDownloadUrl.ts diff --git a/apps/web/src/constants.ts b/apps/web/src/constants.ts index d06a71b..5c8b83e 100644 --- a/apps/web/src/constants.ts +++ b/apps/web/src/constants.ts @@ -2,3 +2,4 @@ export const artifacts = ['wasm', 'zkey'] export const owner = 'privacy-scaling-explorations' export const repo = 'snark-artifacts' export const cdnUrl = 'https://snark-artifacts.pse.dev' +export const npmRegistryUrl = 'https://registry.npmjs.org' diff --git a/apps/web/src/containers/DownloadButton.tsx b/apps/web/src/containers/DownloadButton.tsx index e656496..da3c89f 100644 --- a/apps/web/src/containers/DownloadButton.tsx +++ b/apps/web/src/containers/DownloadButton.tsx @@ -1,13 +1,17 @@ -import { cdnUrl } from '../constants' -import { useStore } from '../hooks' +import { useDownloadUrl, useStore } from '../hooks' export function DownloadButton() { - const { selectedFile, selectedProject, selectedVersion } = useStore() + const { selectedFile, tickedDownloadAll } = useStore() + const disabled = !(selectedFile || tickedDownloadAll) + const downloadUrl = useDownloadUrl() const onClick = () => { - const url = `${cdnUrl}/${selectedProject}/${selectedVersion}/${selectedFile}` - window.location.href = url + window.location.href = downloadUrl } - return + return ( + + ) } diff --git a/apps/web/src/containers/FileSelect.tsx b/apps/web/src/containers/FileSelect.tsx index b4d0118..1d62f74 100644 --- a/apps/web/src/containers/FileSelect.tsx +++ b/apps/web/src/containers/FileSelect.tsx @@ -3,9 +3,9 @@ import { Options } from '../components' import { useFiles, useStore } from '../hooks' export function FileSelect() { - const { selectedFile, setSelectedFile } = useStore() + const { selectedFile, setSelectedFile, tickedDownloadAll, toggleTickedDownloadAll } = useStore() const { data: files, isLoading, isFetched, isSuccess, isError, error } = useFiles() - const onChange = (e: ChangeEvent) => { + const onSelectChange = (e: ChangeEvent) => { const file = e.target as HTMLSelectElement setSelectedFile(file.value) } @@ -17,13 +17,18 @@ export function FileSelect() { return (
- - { - /* - */ - } + + +
) } diff --git a/apps/web/src/hooks/index.ts b/apps/web/src/hooks/index.ts index 1555139..61cf2ba 100644 --- a/apps/web/src/hooks/index.ts +++ b/apps/web/src/hooks/index.ts @@ -1,3 +1,4 @@ +export * from './useDownloadUrl' export * from './useFiles' export * from './useStore' export * from './useVersions' diff --git a/apps/web/src/hooks/useDownloadUrl.ts b/apps/web/src/hooks/useDownloadUrl.ts new file mode 100644 index 0000000..4d1b51e --- /dev/null +++ b/apps/web/src/hooks/useDownloadUrl.ts @@ -0,0 +1,9 @@ +import { cdnUrl, npmRegistryUrl } from '../constants' +import { useStore } from './useStore' + +export const useDownloadUrl = () => { + const { selectedFile, selectedProject, selectedVersion, tickedDownloadAll } = useStore() + return tickedDownloadAll + ? `${npmRegistryUrl}/@zk-kit/${selectedProject}-artifacts/-/${selectedProject}-artifacts-${selectedVersion}.tgz` + : `${cdnUrl}/${selectedProject}/${selectedVersion}/${selectedFile}` +} diff --git a/apps/web/src/hooks/useStore.ts b/apps/web/src/hooks/useStore.ts index a78ca5a..3d47655 100644 --- a/apps/web/src/hooks/useStore.ts +++ b/apps/web/src/hooks/useStore.ts @@ -3,11 +3,14 @@ import { atom, useAtom } from 'jotai' const selectedFileAtom = atom('') const selectedProjectAtom = atom('') const selectedVersionAtom = atom('') +const tickedDownloadAllAtom = atom(false) export const useStore = () => { const [selectedFile, setSelectedFile] = useAtom(selectedFileAtom) const [selectedProject, setSelectedProject] = useAtom(selectedProjectAtom) const [selectedVersion, setSelectedVersion] = useAtom(selectedVersionAtom) + const [tickedDownloadAll, setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) + const toggleTickedDownloadAll = () => setTickedDownloadAll(prev => !prev) return { selectedFile, @@ -18,5 +21,7 @@ export const useStore = () => { selectedVersion, resetSelectedVersion: () => setSelectedVersion(''), setSelectedVersion, + tickedDownloadAll, + toggleTickedDownloadAll, } } From bf1e5d4c1c71e0249beca3b4dbba2080e09d936d Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 10:26:43 +0200 Subject: [PATCH 2/8] fix: reset file if on all checkbox toggle Handle reset effects in useHook instead of components' input handlers --- apps/web/src/containers/ProjectSelect.tsx | 4 +--- apps/web/src/containers/VersionSelect.tsx | 7 +++--- apps/web/src/hooks/useStore.ts | 28 ++++++++++++++++++----- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/apps/web/src/containers/ProjectSelect.tsx b/apps/web/src/containers/ProjectSelect.tsx index ac5a58e..b614607 100644 --- a/apps/web/src/containers/ProjectSelect.tsx +++ b/apps/web/src/containers/ProjectSelect.tsx @@ -4,11 +4,9 @@ import { Options } from '../components' import { useStore } from '../hooks' export function ProjectSelect() { - const { selectedProject, setSelectedProject, resetSelectedFile, resetSelectedVersion } = useStore() + const { selectedProject, setSelectedProject } = useStore() const onChange = (e: ChangeEvent) => { - resetSelectedFile() - resetSelectedVersion() const target = e.target as HTMLSelectElement setSelectedProject(target.value) } diff --git a/apps/web/src/containers/VersionSelect.tsx b/apps/web/src/containers/VersionSelect.tsx index 2dc7fec..391e607 100644 --- a/apps/web/src/containers/VersionSelect.tsx +++ b/apps/web/src/containers/VersionSelect.tsx @@ -3,13 +3,12 @@ import { Options } from '../components' import { useStore, useVersions } from '../hooks' export function VersionSelect() { - const { selectedVersion, setSelectedVersion, resetSelectedFile } = useStore() + const { selectedVersion, setSelectedVersion } = useStore() const { data: versions, isSuccess, isFetched, isLoading, isError, error } = useVersions() const onChange = (e: ChangeEvent) => { - resetSelectedFile() - const target = e.target as HTMLSelectElement - setSelectedVersion(target.value) + const { value } = e.target as HTMLSelectElement + setSelectedVersion(value) } if (isLoading) return
Loading...
diff --git a/apps/web/src/hooks/useStore.ts b/apps/web/src/hooks/useStore.ts index 3d47655..61dd674 100644 --- a/apps/web/src/hooks/useStore.ts +++ b/apps/web/src/hooks/useStore.ts @@ -7,19 +7,35 @@ const tickedDownloadAllAtom = atom(false) export const useStore = () => { const [selectedFile, setSelectedFile] = useAtom(selectedFileAtom) - const [selectedProject, setSelectedProject] = useAtom(selectedProjectAtom) - const [selectedVersion, setSelectedVersion] = useAtom(selectedVersionAtom) - const [tickedDownloadAll, setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) - const toggleTickedDownloadAll = () => setTickedDownloadAll(prev => !prev) + const resetSelectedFile = () => setSelectedFile('') + + const [selectedVersion, _setSelectedVersion] = useAtom(selectedVersionAtom) + const setSelectedVersion = (...args: Parameters) => { + resetSelectedFile() + _setSelectedVersion(...args) + } + const resetSelectedVersion = () => setSelectedVersion('') + + const [tickedDownloadAll, _setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) + const toggleTickedDownloadAll = () => { + resetSelectedFile() + _setTickedDownloadAll(prev => !prev) + } + + const [selectedProject, _setSelectedProject] = useAtom(selectedProjectAtom) + const setSelectedProject = (...args: Parameters) => { + resetSelectedVersion() + _setSelectedProject(...args) + } return { selectedFile, - resetSelectedFile: () => setSelectedFile(''), + resetSelectedFile, setSelectedFile, selectedProject, setSelectedProject, selectedVersion, - resetSelectedVersion: () => setSelectedVersion(''), + resetSelectedVersion, setSelectedVersion, tickedDownloadAll, toggleTickedDownloadAll, From ea41147f101d7831dc0344a28c7cae3179a03716 Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 10:27:42 +0200 Subject: [PATCH 3/8] refactor: desctructure event.target.value More in line with react conventions --- apps/web/src/containers/FileSelect.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/containers/FileSelect.tsx b/apps/web/src/containers/FileSelect.tsx index 1d62f74..9ce563b 100644 --- a/apps/web/src/containers/FileSelect.tsx +++ b/apps/web/src/containers/FileSelect.tsx @@ -6,8 +6,8 @@ export function FileSelect() { const { selectedFile, setSelectedFile, tickedDownloadAll, toggleTickedDownloadAll } = useStore() const { data: files, isLoading, isFetched, isSuccess, isError, error } = useFiles() const onSelectChange = (e: ChangeEvent) => { - const file = e.target as HTMLSelectElement - setSelectedFile(file.value) + const { value } = e.target as HTMLSelectElement + setSelectedFile(value) } if (isLoading) return
Loading...
From 5ffe85a4ee92f2ad21c7d58dec19fdc5be1beb4b Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 10:33:16 +0200 Subject: [PATCH 4/8] fix: filter `latest` version out of select version options --- apps/web/src/hooks/useVersions.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/web/src/hooks/useVersions.ts b/apps/web/src/hooks/useVersions.ts index ec403e9..0e009a1 100644 --- a/apps/web/src/hooks/useVersions.ts +++ b/apps/web/src/hooks/useVersions.ts @@ -16,6 +16,9 @@ export function useVersions() { queryKey: ['versions', selectedProject], queryFn, select: (data) => - data.filter(tag => tag.includes(`@zk-kit/${selectedProject}-artifacts@`)).map(tag => tag.split('@')[2]), + data + .filter(tag => tag.includes(`@zk-kit/${selectedProject}-artifacts@`)) + .map(tag => tag.split('@')[2]) + .filter(version => version !== 'latest'), }) } From a439f79a3c9625f12a5fe86f2864dc5053db144d Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 10:36:23 +0200 Subject: [PATCH 5/8] feat: sort version in descending semantic order --- apps/web/package.json | 4 +++- apps/web/src/hooks/useVersions.ts | 4 +++- pnpm-lock.yaml | 6 ++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index f65e12c..bee4d08 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -13,10 +13,12 @@ "@zk-kit/artifacts": "1.6.0", "jotai": "^2.8.3", "preact": "^10.22.0", - "react-query": "^3.39.3" + "react-query": "^3.39.3", + "semver": "^7.6.2" }, "devDependencies": { "@preact/preset-vite": "^2.8.2", + "@types/semver": "^7.5.8", "typescript": "^5.2.2", "vite": "^5.3.1" } diff --git a/apps/web/src/hooks/useVersions.ts b/apps/web/src/hooks/useVersions.ts index 0e009a1..a3528dd 100644 --- a/apps/web/src/hooks/useVersions.ts +++ b/apps/web/src/hooks/useVersions.ts @@ -1,4 +1,5 @@ import { useQuery } from 'react-query' +import rcompare from 'semver/functions/rcompare' import { owner, repo } from '../constants' import { gh } from '../gh' import { useStore } from './useStore' @@ -19,6 +20,7 @@ export function useVersions() { data .filter(tag => tag.includes(`@zk-kit/${selectedProject}-artifacts@`)) .map(tag => tag.split('@')[2]) - .filter(version => version !== 'latest'), + .filter(version => version !== 'latest') + .sort(rcompare), }) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e4a2916..edd8add 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,10 +71,16 @@ importers: react-query: specifier: ^3.39.3 version: 3.39.3(react@18.3.1) + semver: + specifier: ^7.6.2 + version: 7.6.2 devDependencies: '@preact/preset-vite': specifier: ^2.8.2 version: 2.8.3(@babel/core@7.24.6)(preact@10.22.0)(vite@5.3.1(@types/node@20.14.0)(terser@5.31.1)) + '@types/semver': + specifier: ^7.5.8 + version: 7.5.8 typescript: specifier: ^5.2.2 version: 5.4.5 From 0d1c13f5b71738b09099aed23e1f6570c24499b7 Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 10:47:15 +0200 Subject: [PATCH 6/8] chore: bump `@zk-kit/artifacts` to 1.9.0 where `projects` array const is sorted --- apps/web/package.json | 2 +- pnpm-lock.yaml | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index bee4d08..8caf4d9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@octokit/rest": "^21.0.0", - "@zk-kit/artifacts": "1.6.0", + "@zk-kit/artifacts": "1.9.0", "jotai": "^2.8.3", "preact": "^10.22.0", "react-query": "^3.39.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index edd8add..91a0fd1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,8 +60,8 @@ importers: specifier: ^21.0.0 version: 21.0.0 '@zk-kit/artifacts': - specifier: 1.6.0 - version: 1.6.0 + specifier: 1.9.0 + version: 1.9.0 jotai: specifier: ^2.8.3 version: 2.8.3(react@18.3.1) @@ -1129,6 +1129,9 @@ packages: '@zk-kit/artifacts@1.6.0': resolution: {integrity: sha512-vNhVvKy5EjLAZcfm0cHkbputecXgtoW9hpPGRc5aNmv94zGk9owNA+EuG7YghP88D/iNlvA+80rwlw5qMdSYlA==} + '@zk-kit/artifacts@1.9.0': + resolution: {integrity: sha512-Dl8bJLWnSw0NGT1/p5UKmp4Zgr+evyyvgyi2pwDzdPuT0RKMRkgNIC4ai1j58utwWR9tczGNQlDPdpdZNqFfmA==} + acorn-walk@8.3.2: resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==} engines: {node: '>=0.4.0'} @@ -4444,6 +4447,8 @@ snapshots: '@zk-kit/artifacts@1.6.0': {} + '@zk-kit/artifacts@1.9.0': {} + acorn-walk@8.3.2: {} acorn@8.11.3: {} From 176219d7d8626c631d24879ffe48e229a1f2763d Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 11:01:00 +0200 Subject: [PATCH 7/8] refactor: reset ticked download all on version change --- apps/web/src/hooks/useStore.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/web/src/hooks/useStore.ts b/apps/web/src/hooks/useStore.ts index 61dd674..b16f50b 100644 --- a/apps/web/src/hooks/useStore.ts +++ b/apps/web/src/hooks/useStore.ts @@ -9,19 +9,18 @@ export const useStore = () => { const [selectedFile, setSelectedFile] = useAtom(selectedFileAtom) const resetSelectedFile = () => setSelectedFile('') + const [tickedDownloadAll, _setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) + const _resetTickedDownloadAll = () => _setTickedDownloadAll(false) + const toggleTickedDownloadAll = () => _setTickedDownloadAll(prev => !prev) + const [selectedVersion, _setSelectedVersion] = useAtom(selectedVersionAtom) const setSelectedVersion = (...args: Parameters) => { resetSelectedFile() + _resetTickedDownloadAll() _setSelectedVersion(...args) } const resetSelectedVersion = () => setSelectedVersion('') - const [tickedDownloadAll, _setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) - const toggleTickedDownloadAll = () => { - resetSelectedFile() - _setTickedDownloadAll(prev => !prev) - } - const [selectedProject, _setSelectedProject] = useAtom(selectedProjectAtom) const setSelectedProject = (...args: Parameters) => { resetSelectedVersion() From dd21ff5903f82bde9be205b7ffbff69895b2a6aa Mon Sep 17 00:00:00 2001 From: sripwoud Date: Thu, 27 Jun 2024 11:05:10 +0200 Subject: [PATCH 8/8] refactor: make `reset*` state functions internal to useStore hook --- apps/web/src/hooks/useStore.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/web/src/hooks/useStore.ts b/apps/web/src/hooks/useStore.ts index b16f50b..8c860b9 100644 --- a/apps/web/src/hooks/useStore.ts +++ b/apps/web/src/hooks/useStore.ts @@ -7,7 +7,7 @@ const tickedDownloadAllAtom = atom(false) export const useStore = () => { const [selectedFile, setSelectedFile] = useAtom(selectedFileAtom) - const resetSelectedFile = () => setSelectedFile('') + const _resetSelectedFile = () => setSelectedFile('') const [tickedDownloadAll, _setTickedDownloadAll] = useAtom(tickedDownloadAllAtom) const _resetTickedDownloadAll = () => _setTickedDownloadAll(false) @@ -15,26 +15,24 @@ export const useStore = () => { const [selectedVersion, _setSelectedVersion] = useAtom(selectedVersionAtom) const setSelectedVersion = (...args: Parameters) => { - resetSelectedFile() + _resetSelectedFile() _resetTickedDownloadAll() _setSelectedVersion(...args) } - const resetSelectedVersion = () => setSelectedVersion('') + const _resetSelectedVersion = () => setSelectedVersion('') const [selectedProject, _setSelectedProject] = useAtom(selectedProjectAtom) const setSelectedProject = (...args: Parameters) => { - resetSelectedVersion() + _resetSelectedVersion() _setSelectedProject(...args) } return { selectedFile, - resetSelectedFile, setSelectedFile, selectedProject, setSelectedProject, selectedVersion, - resetSelectedVersion, setSelectedVersion, tickedDownloadAll, toggleTickedDownloadAll,