From c7d6a863af7cf4e5cd611860bdece348d15ae0af Mon Sep 17 00:00:00 2001 From: Forest Fang Date: Sat, 11 Nov 2023 20:25:13 +0300 Subject: [PATCH] [frogcrypto] zoom frog (#1216) Add click to zoom to better view my precious frog https://github.com/proofcarryingdata/zupass/assets/4317392/5e1f77d2-505e-400f-83f0-29eafbe40a90 Co-authored-by: Forest Fang <4317392+saurfang@users.noreply.github.com> --- packages/eddsa-frog-pcd/src/CardBody.tsx | 17 +++++++----- packages/passport-ui/package.json | 1 + packages/passport-ui/src/ImageZoom.tsx | 33 ++++++++++++++++++++++++ packages/passport-ui/src/index.ts | 1 + yarn.lock | 5 ++++ 5 files changed, 50 insertions(+), 7 deletions(-) create mode 100644 packages/passport-ui/src/ImageZoom.tsx diff --git a/packages/eddsa-frog-pcd/src/CardBody.tsx b/packages/eddsa-frog-pcd/src/CardBody.tsx index 6ce99d0191..3004deac0d 100644 --- a/packages/eddsa-frog-pcd/src/CardBody.tsx +++ b/packages/eddsa-frog-pcd/src/CardBody.tsx @@ -1,4 +1,4 @@ -import { LinkButton, encodeQRPayload } from "@pcd/passport-ui"; +import { ImageZoom, LinkButton, encodeQRPayload } from "@pcd/passport-ui"; import _ from "lodash"; import { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; @@ -75,7 +75,15 @@ export function EdDSAFrogCardBody({ setShowPCD(true)}> View as proof-carrying data - + & { + options?: ZoomOptions; +}; + +export function ImageZoom({ options, ...props }: ImageZoomProps) { + const zoomRef = useRef(null); + + const getZoom = useCallback(() => { + if (zoomRef.current === null) { + zoomRef.current = mediumZoom(options); + } + + return zoomRef.current; + }, [options]); + + const attachZoom = useCallback( + (image: HTMLImageElement | null) => { + const zoom = getZoom(); + + if (image) { + zoom.attach(image); + } else { + zoom.detach(); + } + }, + [getZoom] + ); + + return ; +} diff --git a/packages/passport-ui/src/index.ts b/packages/passport-ui/src/index.ts index 597aed49cc..f8cdc8ac59 100644 --- a/packages/passport-ui/src/index.ts +++ b/packages/passport-ui/src/index.ts @@ -1,3 +1,4 @@ export * from "./Core"; export * from "./HiddenText"; +export * from "./ImageZoom"; export * from "./QR"; diff --git a/yarn.lock b/yarn.lock index b62c5c66db..8ade5ad39a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10816,6 +10816,11 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== +medium-zoom@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.8.tgz#2bd1fbcf2961fa7b0e318fe284462aa9b8608ed2" + integrity sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA== + memoize-one@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"