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 <antonini44354@gmail,com> * 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 <antonini44354@gmail,com> Co-authored-by: 71walceli <[email protected]>
rotkonetworks · Jan 5, 2025 · ed6a5b3 · ed6a5b3
1 parent 2cea550
commit ed6a5b3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git 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,31 +19,27 @@ 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;
 }) => {
   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 <div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4">
     <div className="flex gap-2 w-full sm:w-auto">
@@ -85,10 +80,10 @@ const Header = ({
                 {accounts.length > 0 
                   ?<>
                     <SelectLabel>Accounts</SelectLabel>
-                    {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 (
-                        <SelectItem key={id} value={{ type: "account", account }}>
+                        <SelectItem key={address} value={{ type: "account", account }}>
                           <AccountListing address={encodedAddress} name={name} />
                         </SelectItem>
                       );
@@ -111,14 +106,14 @@ const Header = ({
             <SelectValue placeholder={chainStore.name?.replace("People", "")} />
           </SelectTrigger>
           <SelectContent>
-            {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 }]) => (
                 <SelectItem key={key} value={key}>
                   {net.name.replace("People", "")}
                 </SelectItem>

diff --git 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
@@ -73,7 +73,10 @@ export function IdentityForm<Chain>({
     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
@@ -23,7 +23,7 @@ function Home() {
   return (
     <ErrorBoundary>
       <ReactiveDotProvider config={config}>
-        <ChainProvider chainId={chainId}>
+        <ChainProvider chainId={chainId as keyof typeof config.chains}>
           <Suspense fallback={<Loading />}>
             <IdentityRegistrarComponent />
           </Suspense>