feat(react): Added a reusable HypercertImage React component #21
Conversation
ryscheng
commented
Jan 19, 2023
ryscheng
commented
- Adds Plasmic codegen to the project, with instructions in README
- Checking in the current Plasmic-generated Hypercert Image
- Wrapper component will translate HypercertMetadata to the Plasmic component API
* Adds Plasmic codegen to the project, with instructions in README * Checking in the current Plasmic-generated Hypercert Image * Wrapper component will translate HypercertMetadata to the Plasmic component API
|
feel free to ignore anything in the plasmic/ subdir, that's auto-generated |
|
|
||
| To update the design: | ||
|
|
||
| 1. Navigate to the [Plasmic project](https://studio.plasmic.app/projects/tKtnZiEMup1PmF99tS3Jhx/). Make sure you have edit permissions. |
There was a problem hiding this comment.
Not sure if this is the best approach when developing an SDK. It's locking down users into one specific environment
| @@ -46,6 +50,7 @@ | |||
| "loglevel": "^1.8.1", | |||
| "mime": "^3.0.0", | |||
| "nft.storage": "^7.0.0", | |||
| "react": "^18.2.0", | |||
There was a problem hiding this comment.
This could be a peer dependency because I think this locks in users to our version of React while in theory we want to expose a basic functional component
| "projects": [ | ||
| { | ||
| "projectId": "tKtnZiEMup1PmF99tS3Jhx", | ||
| "projectApiToken": "AsobqMlbpUFpzh4uM8U3j9T66AY1nPrX6jtk0JNeiVriaf0X50gR1cwuY8b1y1JLUSBF74oHrmo2KRMA07w", |
There was a problem hiding this comment.
Assuming you don't want API keys and tokens?
| */ | ||
| export function ScreenVariantProvider(props: React.PropsWithChildren) { | ||
| console.warn( | ||
| "DEPRECATED: Plasmic now uses a custom hook for Screen variants, which is automatically included in your components. Please remove this provider from your code.", |
There was a problem hiding this comment.
It looks like we should remove this provider
| @@ -0,0 +1,28 @@ | |||
| // @ts-nocheck | |||
There was a problem hiding this comment.
Is it possible to enable all these checks?
| @@ -5,7 +5,7 @@ import claimData from "../resources/schema/claimdata.json" assert { type: "json" | |||
| import { HypercertMetadata } from "../types/metadata.js"; | |||
| import { HypercertClaimdata } from "../types/claimdata.js"; | |||
|
|
|||
| const ajv = new Ajv.default(); // options can be passed, e.g. {allErrors: true} | |||
| const ajv = new Ajv(); // options can be passed, e.g. {allErrors: true} | |||
There was a problem hiding this comment.
This change shouldn't be necessary. Why was this done?
| @@ -2,8 +2,8 @@ | |||
| "compilerOptions": { | |||
| "lib": ["ES6", "DOM"], | |||
| "target": "ES6", | |||
| "module": "NodeNext", | |||
| "moduleResolution": "NodeNext", | |||
| "module": "esnext", | |||
There was a problem hiding this comment.
We've spend quite some time getting the tsconfig down to work with all packages. Tests are failing after these changes:
Test Suites: 2 failed, 1 passed, 3 total
Tests: 2 passed, 2 total
| percentOwnership?: number; | ||
| } | ||
|
|
||
| function HypercertImage_(props: HypercertImageProps, ref: HTMLElementRefOf<"div">) { |
There was a problem hiding this comment.
Instead of Plasmic it might be cleaner to parameterize this component with default values so that you basically get the Hypercert SVG that we've designed, with the option for SDK users to tweak it as they desire by -for instance- injecting a custom color scheme
