From ed6a5b340150b119e2986d00653fda5df533b27f Mon Sep 17 00:00:00 2001 From: 71walceli Date: Sat, 4 Jan 2025 20:34:07 -0500 Subject: [PATCH] Enhanced Error Handling and Address Encoding (#27) * Updated header to show installed nets and user accounts from Polkadot JS * Ensuring DOcker image actually gets rebuilt * Copying .env.example instead of needing env env var * Updated metadata * Improved Header and Deployment Workflow (#19) * Updated header to show installed nets and user accounts from Polkadot JS * Ensuring DOcker image actually gets rebuilt * Copying .env.example instead of needing env env var * Updated metadata * Added directions on versions to have, and on .env file. --------- Co-authored-by: antonini44354 * Added confirmation dialog * Removed redundant code * Fixed main dialog close * Improved error handling on challenges fetching * Considered all validations passsed when diven positive judgement * Added Identity lear warning dialog * Removed button, as identity deletion clearing judgements as well * Moved disconecting logiv behind dialog * Refactored into one liner * Removed generic notification button * Removed redundant code * Disabling tabs on load on lacking identity info * Revanped event management via priority queue * Improved WebSocket connection logic to clean up properly on lcose * Prevented potential crash when no identity info os available. * Ensuring to set ID info null for accounts that don't have it set * Moved ID status info below every tab * Ensuring to show challenges tabs only on fee being paid * Reviewed imports * Fixed to return object instead of array * Added logging * Passing doen chain constants * Cleaned up imports * Added cost estimation to dialogs * Reviewed imports * Added type info for action type * Misc deleting unnecessary spaces * Fixed to hide all transactions elements for dalogs that wont have them * Added cost estimation for identityclearing extrinsic * Revanped challenges WebSocket logic to improve API connection management * Removed initial left over code * Prevented constant rerendering because of no checking that it account store was set * Prevented constant rerendering because of no checking that it account store was set * Misc code organizartion by related components * Removed logging that causes high CPU usage * Improved performance by passing strictly necessary props * Removed logging that causes high CPU usage * Refactored to computed function to prevent onnecessary rerenders * Reverted back to previous config structure * Reverted back to previous config structure * Separated into own momo object to prevent unnecessary rerenders * Reformatted with 2 spaces per indent * Made loader dark if app was dark * Prevented potencial error computing prices when there is no value set in form * Removed redundant ID status alert * Misc code organizartion by related components * Reverted back to previous config structure * Reviewed unused impports * Optimizing code to prevent continuous remounting and CPU usage * Removed redundant logging * Refactored to use Strict Mode and Suspense correctly, so it can update on setting chain * Reviewed WebSocket connection logic to ensure that it won't ges disconnected for good or won't create too many connections * Replaced direct access to entities * Referenced actual variable * Updated default config * Readded polkadot compatibility layer to prevent deployment errors * Ensuring form will get reset on address or network change * Reviewed network gets changed and all deps get updated in accordance * Ensuring form will get reset on address or network change * Readded polkadot compatibility layer to prevent deployment errors * Moved identity status info to own component * Corrected disabled condition for clearing identity * Moved verify status badge to own component * Added verify status badge to challenges page * Clean unused code * Tidied up code * Fixed next/previous buttins to actually change the tabs * Fixed next/previous buttins to enable or disbled correctly * Updated Polkadot API and netadata * Updated Polkadot API and netadata * Updated Polkadot API and netadata * Refactored for better handling of suspense * Updated polkadot API and several other deps * Fixed up loading component * Added Polkadot compatibility layer preventing "Method not Found" error * Fixed potential error when building, replacing require with import * Added Polkadot compatibility layer preventing "Method not Found" error * Revamped loading component to have the layout of ID registration screen * Added placeholders for prevous/next buttons * Removal of unwanted text * Initially added teleport dialog * Added necessary props such as address, chain config, chain ID, etc... * Removed all rurounding components except for * Added teleport dialog mode * Accounts are now passed down onto Header component * Removed unused dependencies * Accounts are now passed down onto Header component * Refactiored to have handler outside Header, added Teleport dialog opening as well * Passing doen accounts * Fixed connand combobox to correctly display wallets * Fixed connand combobox to open and close on selection * Removed redundant code * Setting default from/to accounts on dialog open * Added scripts to install parachains * Added main parachain descriptors * Added main parachain descriptors & configs * Removed redundant code * Setting default address and chain for teleport dialog * Removed example accounts and chains * Setting default address and chain for teleport dialog * Removed logging * Initially Adding balances hook * obtained balances for main account on main chain and on People parachain * Passws down token symbol * Passed doen token decimals * Initially adding cross chain teleporting call * Removed example chain name and token symbol * Passing down signer * Trial and error of `limited_deleport` call * Trial and error of `limited_deleport` call * Convertion of input field to planck units for API call * Passing down signer * Trial and error of `limited_deleport` call: Done with destination parameter * Trial and error of `limited_deleport` call: Done with beneficiary param * `limited_deleport` call: Done with beneficiary param * Submission and signing of calls * Fixing limitedc releportation call * Fixed to comminicate directly wih relay chain for XCM teleport call * Removed display of balances * Refactored to memoize values based on changes * Added Paseo People; Updated metadata * Added paseo relay and parachain * Added paseo relay and parachain * Removed unnecessarey balan ce retrieval * Prevented potential issu arising when there is no address defined * Prevented potential issu arising when there is no address defined * Fixed potential issue when no wallet is connected * Fixed command to generate and update chain specs * Added paseo registrar index (assumed) * Deleted other other parachains to leave only main chains and People parachains * Account address andf chain ID managed through URL params from now * Revanped hook to actually detect if browser UI is dark * Removed unided dynamic socket * Account address andf chain ID managed through URL params from now * Deleted redundant variable for config * Ensuring logs are output only in ddev context * Fixed potential issue when address not set up correctly * Fixed command to generate and update chain specs * Ensuring workflow can be triggered manually * Source map enable to facilitate debugging of runtime errors * Source map enable to facilitate debugging of runtime errors * Specified Node versin for running and compilation * Source map enable to facilitate debugging of runtime errors * Fixed crash when no account is shared by wallets * Enabled Source maps, disabled minification on dev environment * Added error boundary for triaging potential issues at the components level * Arrenged imports * Enabled Source maps, disabled minification on dev environment * Miscelaneosrefactorings * Added missing deps * Removed environment check for console logs across multiple components and hooks Seems `import.meta.env.DEV && console.log({ data})` will be minified, which removes all logging and env vars and maybe other metadata. * Enabled Source maps, disabled minification on dev environment * Readded dev check for logging in a way that minification produces a functional production build * Added code to get all registrars from People parachain * Fix optional chaining for identity properties in registrarsIdentities * Fixed issue crashing app when with Westend People parachain * Updated parachain metadata * Misc refactorings * Fixed to display correspondign balances in the right order * Fixed coomand to obtain chain and parahcain metadata for deployment * Added env var to filter available chains * Added missing type info * Added env var to filter available chains * Added env var to filter available chains * Added missing type info * Added missing type info * Addded logic to decode and encode for current chain prefis address * Fixed coomand to obtain chain and parahcain metadata for deployment * Added type info for addresses and accounts * Rearranged imports * Fixed logic to handle addresses via URL param - Address parsing and validation - No loger updating params when internal state changes - Added function to find addreseds by public kay * Fixed logic to handle chain ID via URL param - Chain ID validation - Added function to find addreseds by public kay * Refactored URL params into own hook * Added type info forchain types * Added text indicating that it's syncing light clients * Refactored light-dark toggling - Added function to tpggle light/dark mode - Moved login into own look - Revanped logic * Added type information for chasins - Removed unused props - Removed imports * Updated polkadot-api metadata * Added patch to add Paseo People for `reactive-dot` light client * Fixed css-tree that caused dev and build to fail * Added patch to add Paseo People for `reactive-dot` light client * Added patch to add Paseo People for `reactive-dot` light client * Adsded Paseo light chain setup * Removed "People suffix from chains" * Misc reefactorings - Delimited code sections - Added missing spaces * Misc reefactorings - Movedm notification logic to own section * Now all addresses get formatted as per selected chain * Refactor account displaying to show encoded addresses by chain prefix in Header components * Misc Refactorings: Rearranged imports * Fixed issue that could potentially cause inputs to become uncontrolled * Added type info for form fields * Wrapped in loading placeholder indicator on loadig id info * Fixed to point co the correct corresponding environment variable * Added error boundary with fallback interface * Added type info for cost and deposits estimations * Added type info for existing chains * Removed id for accounts, as it's not needed * Added missig encoded address for when they match with URL address --------- Co-authored-by: antonini44354 Co-authored-by: 71walceli <71walceli@71walceli.dev> --- src/components/Header.tsx | 25 ++++++++++--------------- src/components/identity-registrar.tsx | 1 + src/components/tabs/IdentityForm.tsx | 5 ++++- src/pages/home.tsx | 2 +- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 31be64d4..92f0d15f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -3,11 +3,10 @@ import { Button } from "@/components/ui/button" import { Sun, Moon } from "lucide-react"; import { appStore as _appStore } from '~/store/AppStore'; import { useProxy } from "valtio/utils"; -import { useEffect, useState } from "react"; -import { ConfigContextProps } from "~/api/config2"; +import { useState } from "react"; +import { ApiConfig } from "~/api/config2"; import { useConnectedWallets } from "@reactive-dot/react"; import { PolkadotIdenticon } from 'dot-identicon/react.js'; -import { Chains } from "@reactive-dot/core"; import { IdentityStore } from "~/store/IdentityStore"; import { SelectLabel } from "@radix-ui/react-select"; @@ -20,15 +19,15 @@ const AccountListing = ({ address, name }) => <> const Header = ({ - config: chainContext, chainStore, accountStore, identityStore, accounts, + config, chainStore, accountStore, identityStore, accounts, onChainSelect, onAccountSelect, onRequestWalletConnections, onToggleDark: onToggleDark }: { accounts: { name: string, address: string, encodedAddress: string }[]; - config: ConfigContextProps; + config: ApiConfig; chainStore: { id: string | number | symbol, name: string }; accountStore: { address: string, name: string }; identityStore: IdentityStore; - onChainSelect: (chainId: keyof Chains) => void; + onChainSelect: (chainId: keyof ApiConfig["chains"]) => void; onAccountSelect: (props: { type: string, [key: string]: string }) => void; onRequestWalletConnections: () => void; onToggleDark: () => void; @@ -36,15 +35,11 @@ const Header = ({ const appStore = useProxy(_appStore); const isDarkMode = appStore.isDarkMode; - useEffect(() => { if (import.meta.env.DEV) console.log({ chainContext }) }, [chainContext]); - const [isNetDropdownOpen, setNetDropdownOpen] = useState(false); - //#region userDropdown const connectedWallets = useConnectedWallets() const [isUserDropdownOpen, setUserDropdownOpen] = useState(false) - //#endregion userDropdown return
@@ -85,10 +80,10 @@ const Header = ({ {accounts.length > 0 ?<> Accounts - {accounts.map(({ id, name, address, encodedAddress, ...rest }) => { - const account = { id, name, address, ...rest }; + {accounts.map(({ name, address, encodedAddress, ...rest }) => { + const account = { name, address, ...rest }; return ( - + ); @@ -111,14 +106,14 @@ const Header = ({ - {Object.entries(chainContext.chains) + {Object.entries(config.chains) .filter(([key]) => import.meta.env.VITE_APP_AVAILABLE_CHAINS ? import.meta.env.VITE_APP_AVAILABLE_CHAINS.split(',').map(key => key.trim()) .includes(key) : key.includes("people") ) - .map(([key, net]) => ( + .map(([key, net]: [string, { name: string }]) => ( {net.name.replace("People", "")} diff --git a/src/components/identity-registrar.tsx b/src/components/identity-registrar.tsx index 3d86b1fc..e5b0939a 100644 --- a/src/components/identity-registrar.tsx +++ b/src/components/identity-registrar.tsx @@ -98,6 +98,7 @@ export function IdentityRegistrarComponent() { name: foundAccount.name, polkadotSigner: foundAccount.polkadotSigner, address: foundAccount.address, + encodedAddress: foundAccount.address, }; } let decodedAddress; diff --git a/src/components/tabs/IdentityForm.tsx b/src/components/tabs/IdentityForm.tsx index 7325b0fb..f4f2bfdb 100644 --- a/src/components/tabs/IdentityForm.tsx +++ b/src/components/tabs/IdentityForm.tsx @@ -73,7 +73,10 @@ export function IdentityForm({ setShowCostModal(true); } - const [estimatedCosts, setEstimatedCosts] = useState({}) + const [estimatedCosts, setEstimatedCosts] = useState<{ + fees?: number | bigint | BigNumber, + deposits?: number | bigint | BigNumber + }>({}) useEffect(() => { if (actionType === "judgement") { typedApi.tx.Identity.request_judgement({ diff --git a/src/pages/home.tsx b/src/pages/home.tsx index be12a986..7d0bfe8b 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -23,7 +23,7 @@ function Home() { return ( - + }>