From 6eadb065bf3207b61b0f48d673d08dbbf0e5a6ab Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:11:18 +0200 Subject: [PATCH 01/11] chore: remove unused code generation script from package.json --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index c2b6feb..c34f7e8 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "dev:prod": "vite --mode prod", "dev:staging": "vite --mode staging", "build": "vite build --mode prod", - "codegen": "graphql-codegen --config codegenPoco.ts", "check-types": "tsc --noEmit", "check-format": "prettier --check src", "format": "prettier --write src", From 17e31094a5ddd7ec7a4102e1333930912bd8cb61 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:14:06 +0200 Subject: [PATCH 02/11] fix: remove unused NavLink import in protectedDataList component --- src/views/myData/protectedDataList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/myData/protectedDataList.tsx b/src/views/myData/protectedDataList.tsx index eccbc95..4cfd91f 100644 --- a/src/views/myData/protectedDataList.tsx +++ b/src/views/myData/protectedDataList.tsx @@ -1,7 +1,7 @@ import { useQuery } from '@tanstack/react-query'; import { useState, useEffect } from 'react'; import { ArrowRight } from 'react-feather'; -import { Link, NavLink } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import protectANewData from '@/assets/protect_a_new_data.png'; import { Alert } from '@/components/Alert'; import { CircularLoader } from '@/components/CircularLoader'; From d54fb1c48779d3a670fb98136cd83b8766511ae6 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:14:12 +0200 Subject: [PATCH 03/11] fix: ensure timestamp is properly converted to number in formatTimestamp utility --- src/utils/formatTimestamp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/formatTimestamp.ts b/src/utils/formatTimestamp.ts index 86f3334..4f07f47 100644 --- a/src/utils/formatTimestamp.ts +++ b/src/utils/formatTimestamp.ts @@ -1,5 +1,5 @@ export function formatTimestamp(timestamp: string | number): string { - const date = new Date(timestamp * 1000); + const date = new Date(Number(timestamp) * 1000); return new Intl.DateTimeFormat('en-US', { year: 'numeric', month: '2-digit', From 5f6350af678c5fc84e4d87412e57d227a1c967ed Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:29:06 +0200 Subject: [PATCH 04/11] feat: add tooltip component --- package-lock.json | 391 ++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/ui/tooltip.tsx | 27 +++ 3 files changed, 419 insertions(+) create mode 100644 src/components/ui/tooltip.tsx diff --git a/package-lock.json b/package-lock.json index 4635747..ff61277 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-toast": "^1.2.6", + "@radix-ui/react-tooltip": "^1.2.0", "@reown/appkit": "^1.6.9", "@reown/appkit-adapter-wagmi": "^1.6.9", "@rollbar/react": "^0.12.1", @@ -4169,6 +4170,396 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.0.tgz", + "integrity": "sha512-b1Sdc75s7zN9B8ONQTGBSHL3XS8+IcjcOIY51fhM4R1Hx8s0YbgqgyNZiri4qcYMVZK8hfCZVBiyCm7N9rs0rw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.2", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.6", + "@radix-ui/react-id": "1.1.1", + "@radix-ui/react-popper": "1.2.3", + "@radix-ui/react-portal": "1.1.5", + "@radix-ui/react-presence": "1.1.3", + "@radix-ui/react-primitive": "2.0.3", + "@radix-ui/react-slot": "1.2.0", + "@radix-ui/react-use-controllable-state": "1.1.1", + "@radix-ui/react-visually-hidden": "1.1.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz", + "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==", + "license": "MIT" + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.3.tgz", + "integrity": "sha512-2dvVU4jva0qkNZH6HHWuSz5FN5GeU5tymvCgutF8WaXz9WnD1NgUhy73cqzkjkN4Zkn8lfTPv5JIfrC221W+Nw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz", + "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.6.tgz", + "integrity": "sha512-7gpgMT2gyKym9Jz2ZhlRXSg2y6cNQIK8d/cqBZ0RBCaps8pFryCWXiUKI+uHGFrhMrbGUP7U6PWgiXzIxoyF3Q==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.2", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-primitive": "2.0.3", + "@radix-ui/react-use-callback-ref": "1.1.1", + "@radix-ui/react-use-escape-keydown": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz", + "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.3.tgz", + "integrity": "sha512-iNb9LYUMkne9zIahukgQmHlSBp9XWGeQQ7FvUGNk45ywzOb6kQa+Ca38OphXlWDiKvyneo9S+KSJsLfLt8812A==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.1.3", + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-context": "1.1.2", + "@radix-ui/react-primitive": "2.0.3", + "@radix-ui/react-use-callback-ref": "1.1.1", + "@radix-ui/react-use-layout-effect": "1.1.1", + "@radix-ui/react-use-rect": "1.1.1", + "@radix-ui/react-use-size": "1.1.1", + "@radix-ui/rect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.5.tgz", + "integrity": "sha512-ps/67ZqsFm+Mb6lSPJpfhRLrVL2i2fntgCmGMqqth4eaGUf+knAuuRtWVJrNjUhExgmdRqftSgzpf0DF0n6yXA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.3", + "@radix-ui/react-use-layout-effect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz", + "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2", + "@radix-ui/react-use-layout-effect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz", + "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.2.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz", + "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", + "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.1.tgz", + "integrity": "sha512-YnEXIy8/ga01Y1PN0VfaNH//MhA91JlEGVBDxDzROqwrAtG5Yr2QGEPz8A/rJA3C7ZAHryOYGaUv8fLSW2H/mg==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz", + "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz", + "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-rect": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz", + "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==", + "license": "MIT", + "dependencies": { + "@radix-ui/rect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-size": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz", + "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.3.tgz", + "integrity": "sha512-oXSF3ZQRd5fvomd9hmUCb2EHSZbPp3ZSHAHJJU/DlF9XoFkJBBW8RHU/E8WEH+RbSfJd/QFA0sl8ClJXknBwHQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/rect": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz", + "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", + "license": "MIT" + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", diff --git a/package.json b/package.json index c34f7e8..86ef91f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-toast": "^1.2.6", + "@radix-ui/react-tooltip": "^1.2.0", "@reown/appkit": "^1.6.9", "@reown/appkit-adapter-wagmi": "^1.6.9", "@rollbar/react": "^0.12.1", diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx new file mode 100644 index 0000000..cd06a46 --- /dev/null +++ b/src/components/ui/tooltip.tsx @@ -0,0 +1,27 @@ +import * as TooltipPrimitive from '@radix-ui/react-tooltip'; +import * as React from 'react'; +import { cn } from '../../utils/style.utils.ts'; + +const TooltipProvider = TooltipPrimitive.Provider; + +const Tooltip = TooltipPrimitive.Root; + +const TooltipTrigger = TooltipPrimitive.Trigger; + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; From 8019aff2c5a66d993d0027384b6b50361bcd8989 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:29:12 +0200 Subject: [PATCH 05/11] feat: add tooltip for missing secret encryption key in protected data --- src/views/myData/protectedData.tsx | 42 +++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/src/views/myData/protectedData.tsx b/src/views/myData/protectedData.tsx index 837642c..410ba87 100644 --- a/src/views/myData/protectedData.tsx +++ b/src/views/myData/protectedData.tsx @@ -1,12 +1,19 @@ import { Address } from '@/types'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; +import { AlertCircle } from 'react-feather'; import { Link, useParams } from 'react-router-dom'; import { Alert } from '@/components/Alert'; import { CircularLoader } from '@/components/CircularLoader'; import { DocLink } from '@/components/DocLink'; import { PaginatedNavigation } from '@/components/PaginatedNavigation'; import { Button, buttonVariants } from '@/components/ui/button'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient'; import RevokeAccess from '@/modules/myData/RevokeAccess'; import GrantAccessModal from '@/modules/myData/protectedData/GrantAccessModal'; @@ -84,6 +91,22 @@ export default function ProtectedData() { refetchOnWindowFocus: true, }); + const { + data: hasSmsSecret, + isSuccess: isSmsRequestSuccess, + isError: isCheckSmsSecretError, + } = useQuery({ + queryKey: ['oneProtectedDataSmsSecret', protectedDataAddress], + queryFn: async () => { + const dataProtectorCore = await getDataProtectorCoreClient(); + // @ts-expect-error 'iexec' is a protected field but that's fine + return dataProtectorCore.iexec.dataset.checkDatasetSecretExists( + protectedDataAddress! + ); + }, + enabled: !!protectedDataAddress, + }); + const getDataType = (schema: { [key: string]: unknown }) => { if (schema.email) { return 'mail'; @@ -115,7 +138,24 @@ export default function ProtectedData() { {protectedData.data.schema.email ? 'MAIL' : 'TELEGRAM'} )} - + + {isSmsRequestSuccess && !hasSmsSecret && !isCheckSmsSecretError && ( + + + + + + + This protected data is probably unusable as{' '} + + its secret encryption key was +
not found + {' '} + in the iExec Secret Management Service (SMS). + + + + )} {protectedData.data?.name ? protectedData.data.name : '(No name)'} From ad784717fb800080d07c3b14d4ed50acdf63f87e Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 11:38:31 +0200 Subject: [PATCH 06/11] feat: add CheckSMSRequestSuccess component to display SMS secret status --- src/modules/myData/CheckSMSRequestSuccess.tsx | 54 +++++++++++++++++++ src/views/myData/protectedData.tsx | 42 +-------------- 2 files changed, 56 insertions(+), 40 deletions(-) create mode 100644 src/modules/myData/CheckSMSRequestSuccess.tsx diff --git a/src/modules/myData/CheckSMSRequestSuccess.tsx b/src/modules/myData/CheckSMSRequestSuccess.tsx new file mode 100644 index 0000000..b117f59 --- /dev/null +++ b/src/modules/myData/CheckSMSRequestSuccess.tsx @@ -0,0 +1,54 @@ +import { Address } from '@/types'; +import { + TooltipProvider, + Tooltip, + TooltipTrigger, + TooltipContent, +} from '@radix-ui/react-tooltip'; +import { useQuery } from '@tanstack/react-query'; +import { AlertCircle } from 'react-feather'; +import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient'; + +export default function CheckSMSRequestSuccess({ + protectedDataAddress, +}: { + protectedDataAddress: Address | undefined; +}) { + const { + data: hasSmsSecret, + isSuccess: isSmsRequestSuccess, + isError: isCheckSmsSecretError, + } = useQuery({ + queryKey: ['oneProtectedDataSmsSecret', protectedDataAddress], + queryFn: async () => { + const dataProtectorCore = await getDataProtectorCoreClient(); + // @ts-expect-error 'iexec' is a protected field but that's fine + return dataProtectorCore.iexec.dataset.checkDatasetSecretExists( + protectedDataAddress! + ); + }, + enabled: !!protectedDataAddress, + }); + + return ( + <> + {isSmsRequestSuccess && !hasSmsSecret && !isCheckSmsSecretError && ( + + + + + + + This protected data is probably unusable as{' '} + + its secret encryption key was +
not found + {' '} + in the iExec Secret Management Service (SMS). + + + + )} + + ); +} diff --git a/src/views/myData/protectedData.tsx b/src/views/myData/protectedData.tsx index 410ba87..9edf053 100644 --- a/src/views/myData/protectedData.tsx +++ b/src/views/myData/protectedData.tsx @@ -1,20 +1,14 @@ import { Address } from '@/types'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; -import { AlertCircle } from 'react-feather'; import { Link, useParams } from 'react-router-dom'; import { Alert } from '@/components/Alert'; import { CircularLoader } from '@/components/CircularLoader'; import { DocLink } from '@/components/DocLink'; import { PaginatedNavigation } from '@/components/PaginatedNavigation'; import { Button, buttonVariants } from '@/components/ui/button'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@/components/ui/tooltip'; import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient'; +import CheckSMSRequestSuccess from '@/modules/myData/CheckSMSRequestSuccess'; import RevokeAccess from '@/modules/myData/RevokeAccess'; import GrantAccessModal from '@/modules/myData/protectedData/GrantAccessModal'; import { ProtectedDataDetails } from '@/modules/myData/protectedData/ProtectedDataDetails'; @@ -91,22 +85,6 @@ export default function ProtectedData() { refetchOnWindowFocus: true, }); - const { - data: hasSmsSecret, - isSuccess: isSmsRequestSuccess, - isError: isCheckSmsSecretError, - } = useQuery({ - queryKey: ['oneProtectedDataSmsSecret', protectedDataAddress], - queryFn: async () => { - const dataProtectorCore = await getDataProtectorCoreClient(); - // @ts-expect-error 'iexec' is a protected field but that's fine - return dataProtectorCore.iexec.dataset.checkDatasetSecretExists( - protectedDataAddress! - ); - }, - enabled: !!protectedDataAddress, - }); - const getDataType = (schema: { [key: string]: unknown }) => { if (schema.email) { return 'mail'; @@ -139,23 +117,7 @@ export default function ProtectedData() { )} - {isSmsRequestSuccess && !hasSmsSecret && !isCheckSmsSecretError && ( - - - - - - - This protected data is probably unusable as{' '} - - its secret encryption key was -
not found - {' '} - in the iExec Secret Management Service (SMS). - - - - )} + {protectedData.data?.name ? protectedData.data.name : '(No name)'} From 943567680296abe658a7a62c666bbf9e988a583d Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 15:29:03 +0200 Subject: [PATCH 07/11] feat: wrap CheckSMSRequestSuccess component in a div and add className prop --- src/modules/myData/CheckSMSRequestSuccess.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/modules/myData/CheckSMSRequestSuccess.tsx b/src/modules/myData/CheckSMSRequestSuccess.tsx index b117f59..b7942e4 100644 --- a/src/modules/myData/CheckSMSRequestSuccess.tsx +++ b/src/modules/myData/CheckSMSRequestSuccess.tsx @@ -1,17 +1,19 @@ import { Address } from '@/types'; +import { useQuery } from '@tanstack/react-query'; +import { AlertCircle } from 'react-feather'; import { - TooltipProvider, Tooltip, - TooltipTrigger, TooltipContent, -} from '@radix-ui/react-tooltip'; -import { useQuery } from '@tanstack/react-query'; -import { AlertCircle } from 'react-feather'; + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip'; import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient'; export default function CheckSMSRequestSuccess({ protectedDataAddress, + className, }: { + className?: string; protectedDataAddress: Address | undefined; }) { const { @@ -31,7 +33,7 @@ export default function CheckSMSRequestSuccess({ }); return ( - <> +
{isSmsRequestSuccess && !hasSmsSecret && !isCheckSmsSecretError && ( @@ -49,6 +51,6 @@ export default function CheckSMSRequestSuccess({ )} - +
); } From 5d72f7bf34392427f54c78c09bdb071dfcb691de Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 10 Apr 2025 15:29:14 +0200 Subject: [PATCH 08/11] feat: integrate CheckSMSRequestSuccess component into ProtectedDataList --- src/views/myData/protectedDataList.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/views/myData/protectedDataList.tsx b/src/views/myData/protectedDataList.tsx index 4cfd91f..03ba6ac 100644 --- a/src/views/myData/protectedDataList.tsx +++ b/src/views/myData/protectedDataList.tsx @@ -1,3 +1,4 @@ +import { Address } from '@/types'; import { useQuery } from '@tanstack/react-query'; import { useState, useEffect } from 'react'; import { ArrowRight } from 'react-feather'; @@ -9,6 +10,7 @@ import { DocLink } from '@/components/DocLink'; import { PaginatedNavigation } from '@/components/PaginatedNavigation'; import { Button } from '@/components/ui/button'; import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient'; +import CheckSMSRequestSuccess from '@/modules/myData/CheckSMSRequestSuccess'; import useUserStore from '@/stores/useUser.store'; import { chunkArray } from '@/utils/chunkArray'; import { formatTimestamp } from '@/utils/formatTimestamp'; @@ -218,7 +220,12 @@ export default function ProtectedDataList() { 'absolute inset-x-px top-px h-[42px] rounded-t-[calc(20px-1px)] bg-gradient-to-r from-[#14141B] from-25%', colorConfig.gradientTo )} - /> + > + +