feat: add deployment with playgrounds/vite-lite app, improve widget flow DOP-112#1583
feat: add deployment with playgrounds/vite-lite app, improve widget flow DOP-112#1583
playgrounds/vite-lite app, improve widget flow DOP-112#1583Conversation
…ated dependencies
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| if (!form.formState.isReady) return; | ||
| if (previousValues.current === stringifiedValues) return; | ||
|
|
||
| localStorage.setItem("formValues", stringifiedValues); |
Check failure
Code scanning / CodeQL
Clear text storage of sensitive information High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 months ago
To fix this issue, the sensitive apiKey (and any other sensitive information) must not be stored in localStorage in cleartext. The preferred fix is to encrypt the data before storage and decrypt on retrieval. In the context of this React app, we can use a well-known encryption library, such as the Web Crypto API (window.crypto.subtle), to securely encrypt/decrypt the values. For demonstration, the code can use AES-GCM encryption with a static or user-provided password. Alternatively, you may also use a small, audited package like crypto-js if a simpler API is preferred, but since we cannot add arbitrary external dependencies and must stick to imports that are common/standard and shown, the Web Crypto API is preferred.
Edit lines relating to storage in localStorage so that, before storage, the data is encrypted using AES-GCM, and upon reading, it is decrypted. This will require new async helper methods for encrypting and decrypting the string values. The storage/retrieval logic in both useEffect blocks must be updated to handle promises. Default or user-provided password should be securely stored or derived as appropriate—if not available, use a static value with a strong warning that this does not provide strong security (real apps should use user secrets).
Code changes:
- Add helper functions for encrypting/decrypting a string using window.crypto.subtle.
- In the writing useEffect, encrypt
stringifiedValuesbefore callinglocalStorage.setItem. - In the reading useEffect, decrypt the retrieved string before JSON.parse/
form.reset. - Adapt those functions for async use (since crypto.subtle API is Promise-based), and update the
useEffecthooks to handle promises appropriately.
…it-ui-widget class, remove global defaults
…s for connected wallets
| export const TokenDetailsMetadataSchema = object({ | ||
| id: string(), | ||
| cg: optional(object({ id: string() })), | ||
| identifier: string(), | ||
| market_cap: number(), | ||
| name: string(), | ||
| price_change_24h_usd: number(), | ||
| price_change_percentage_24h_usd: number(), | ||
| sparkline_in_7d: array(number()), | ||
| timestamp: string(), | ||
| total_volume: number(), | ||
| price_usd: number(), | ||
| provider: string(), | ||
| timestamp: number(), | ||
| }); |
There was a problem hiding this comment.
@ochhii1337 I had to apply this change or the /price endpoint was throwing schema errors. Could you check if this is correct?
| export const getTokenLogoUrl = (token: TokenNames | (string & {})) => { | ||
| return `${getAssetsBaseUrl()}/images/${token?.toLowerCase()}.png`; | ||
| }; | ||
|
|
||
| export const getProviderLogoUrl = (provider: ProviderName | (string & {})) => { | ||
| return `${getAssetsBaseUrl()}/images/providers/${provider?.toLowerCase()}.png`; | ||
| }; | ||
|
|
||
| export const getChainLogoUrl = (chain: Chain | (string & {})) => { | ||
| return `${getAssetsBaseUrl()}/images/chains/${chain?.toLowerCase()}.${chain?.toLowerCase()}.png`; | ||
| }; | ||
|
|
||
| export const getWalletLogoUrl = (wallet: WalletOption | (string & {})) => { | ||
| return `${getAssetsBaseUrl()}/images/wallets/${wallet?.toLowerCase()}.png`; | ||
| }; |
There was a problem hiding this comment.
@towanTG I put all asset getters that I need from widget's perspective in one place here. Where do we want to place them in ideal world?
It seems convenient to put token-related assets into AssetValue, but it currently loads values from static assets instead of building the URL, so I guess we'd need to change approach? or include those URLs in the token list map?
Option 1 - hybrid AssetValue + helpers:
- AssetValue.getTokenUrl() -> token logo
+ AssetValue.getTokenIconUrl() -> token logo
+ AssetValue.getChainIconUrl() -> chain logo
+ getWalletIconUrl(wallet: WalletOption) -> wallet logo
+ getProviderIconUrl(provider: ProviderName) -> provider logoOption 2 - only helpers:
- AssetValue.getTokenUrl() -> token logo
+ getTokenIconUrl(tokenId: Token['identifier']) -> token logo
+ getChainIconUrl(chain: Chain) -> chain logo
+ getWalletIconUrl(wallet: WalletOption) -> wallet logo
+ getProviderIconUrl(provider: ProviderName) -> provider logoOption 3 - group all helpers:
- AssetValue.getTokenUrl() -> token logo
+ Assets.getTokenIconUrl(tokenId: Token['identifier']) -> token logo
+ Assets.getChainIconUrl(chain: Chain) -> chain logo
+ Assets.getWalletIconUrl(wallet: WalletOption) -> wallet logo
+ Assets.getProviderIconUrl(provider: ProviderName) -> provider logo@towanTG Option 3 seems like an overkill, I'd go for 1 or 2
| useEffect(() => { | ||
| if (previousValues.current === stringifiedValues) return; | ||
|
|
||
| localStorage.setItem("formValues", stringifiedValues); |
There was a problem hiding this comment.
@towanTG This shouldn't matter for playground's functionality too much.
If we remove localStorage persistence for api key we'll lose some of the UX of the controls
| :where(*) { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
:where() trick allows us to reduce specificity so that it is applied as "default" but any user overrides to it will be applied with higher priority
Drakeoon
changed the title
playgrounds/vite-lite app, improve widget flow DOP-112
- Add starknet.mdx with complete integration guide following existing chain documentation patterns (ethereum.mdx, solana.mdx, radix.mdx) - Add starknet-technical.mdx with technical reference and cheat sheet - Document all Starknet toolbox methods: transfer, balance, fee estimation, TypedData signing, address validation, key derivation - Include contract addresses for STRK and ETH tokens - Add cross-chain swap examples via THORChain - Document Starknet-specific features: account abstraction, Cairo VM, multi-call transactions - Include network configuration for mainnet/testnet - Add comprehensive error handling examples - Follow @noErrorValidation marker convention for code examples Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Starknet Documentation AddedAdded comprehensive Starknet chain integration documentation: New Files
Verification
Reference: Starknet Rollout Plan 🤖 Generated with Claude Code |
4 participants
@aacharkas
Add Docker support for vite-lite playground
Changes
Dockerfilefor building and deploying vite-lite playgroundnginx.confwith optimized configuration for SPA routing/health@Drakeoon
Add
playgrounds/vite-liteas a way of hosting SwapKit WidgetChanges
playgrounds/vite-lite@swapkit/sdkand@swapkit/uiwhen used withvite:where()selectors