Fix frontend build

[j-mueller]

• Add export script to package.json
  • This sets WST_BUILD=export, which we use in next.config.js to switch to a config that has the output: 'export' field
• A number of other changes were required to make it go with output: 'export':
  • Fix some warnings from the linter
  • Disable the @next/next/no-page-custom-font warning
  • Delete the @cardano-sdk/key-management dependency (didn't seem to be used)
  • Split up the [username] page into two, so that we can call generateStaticParams in the part that doesn't have use client
• Change the CLI to read the location of the static HTML files from an environment variable WST_STATIC_FILES (if not provided via --static-files). The nix derivation of the container sets this variable to the path in the nix store that has the frontend code.
• Add a blockfrost-key route that returns the blockfrost key
  • There are ways to get blockfrost to work without exposing the key to the end-user, for example the proxy idea. But I just didn't have enough time to sort out the problem with the HTTP response.
  • In any case, this is not less secure than before, as we already had the API key in the frontend.

[j-mueller]

We also need to find a way to get the blockfrost key into the frontend so that lucid can call blockfrost directly. There are several options:

• Inject it at build time (this is what happens currently with next.js). Not great as it leaks the key everywhere
• Make it available at runtime through the backend (basically adding a GET route for it). Also not great as it would expose the key , but at least the key isn't part of the source code or docker image.
  • A variant of this is adding a dynamically generated index.html page (served by servant) that defines the BLOCKFROST_API_KEY as a JS constant, and loads all the scripts and other assets. This would be marginally nicer because we wouldn't need the extra route. But the key would still be visible to anyone who inspects the HTML.
• Add a route on the backend that proxies all requests to blockfrost API after inserting the auth header. Then use a dummy key on the frontend. This would be the cleanest solution as the key would not be available on the FE at all.

[j-mueller]

Sadly the proxy doesn't work. I keep getting an ERR_CONTENT_DECODING_FAILED error on the FE (presumably due to the response not being formatted correctly / having the wrong headers). The proxy works fine in CURL though. Here's the code for posterity.

[j-mueller]

I went with

Make it available at runtime through the backend

It works now. Although it seems to be re-initialising lucid once per second, not sure if this is intentional.

[j-mueller]

@KJES4 I tried to make it so that the normal workflow for next.js is unaffected. Please let me know if anything needs to be changed there.

[j-mueller]

Also I deleted the @cardano-sdk/key-management dependency as it didn't seem to be used - is this correct?

[amirmrad]

LGTM

[KJES4]

Since we were able to get Lucid to work we can also get rid of the Cardano SDK core and crypto dependencies. We can also remove ts-log as that was used with the SDK wallet setup.

[KJES4]

I believe the Lace team is using a secrets manager for the api keys they use. Would something like Bitwarden work for what you are trying to do?

[j-mueller]

For the blockfrost key thing? Yeah it might work, I need to check it out, thanks for the pointer. I'll get back to this when everything is working properly.

[KJES4]

Yes, for the Blockfrost key thing. It looks like they have a Free forever plan you can check out: https://bitwarden.com/products/secrets-manager/#pricing

[KJES4]

Although it seems to be re-initialising lucid once per second, not sure if this is intentional.

No, that should not be happening. The call is only done once when the application loads and there aren't any dependencies that would cause the to be recalled by any state mutations.

[KJES4]

@j-mueller remove the items in the array at the end of the useEffect in the clientLayout component. This will stop the Lucid initialization from being called over and over. Leave this array empty so that it is just called once on the initial app load.

[j-mueller]

Ah yes that explains it. I added the items because of a warning from the linter (react-hooks/exhaustive-deps).

[KJES4]

I know better than the linter on this topic. The linter always tried to get me to do this too but you only add dependencies to the array of you want that component to rerun anytime one of those dependencies changes. For the layoutComponent I don't want this to happen.