Skip to content

Commit

Permalink
Major Refactoring: URL Params, Light/Dark Mode, and Chain Management (#…
Browse files Browse the repository at this point in the history
…26)

* 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

---------

Co-authored-by: antonini44354 <antonini44354@gmail,com>
Co-authored-by: 71walceli <[email protected]>
  • Loading branch information
3 people authored Jan 4, 2025
1 parent f39455e commit 9d974cd
Show file tree
Hide file tree
Showing 22 changed files with 4,772 additions and 3,181 deletions.
2 changes: 1 addition & 1 deletion .papi/descriptors/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.1.0-autogenerated.2076241496796044726",
"version": "0.1.0-autogenerated.18171643339413266060",
"name": "@polkadot-api/descriptors",
"files": [
"dist"
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ bun dev

To generate/update scale metadata
```sh
bunx papi update # or bun metadata
bunx [email protected] update # or bun metadata
```

### Build
Expand Down
Binary file modified bun.lockb
Binary file not shown.
10 changes: 8 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
"@polkadot-api/substrate-bindings": "^0.9.4",
"@polkadot-api/utils": "^0.1.2",
"@polkadot/api": "^14.3.1",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-dialog": "^1.1.3",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.3",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.5",
Expand Down Expand Up @@ -72,5 +74,9 @@
"unocss": "^0.63.4",
"vite": "^5.4.11"
},
"packageManager": "[email protected]+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39"
"packageManager": "[email protected]+sha512.837566d24eec14ec0f5f1411adb544e892b3454255e61fdef8fd05f3429480102806bac7446bc9daff3896b01ae4b62d00096c7e989f1596f2af10b927532f39",
"patchedDependencies": {
"@reactive-dot/[email protected]": "patches/@reactive-dot%[email protected]",
"[email protected]": "patches/[email protected]"
}
}
35 changes: 35 additions & 0 deletions patches/@reactive-dot%[email protected]
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
diff --git a/node_modules/@reactive-dot/core/.bun-tag-a982c29b69b00b08 b/.bun-tag-a982c29b69b00b08
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/build/providers/light-client/wellknown-chains.js b/build/providers/light-client/wellknown-chains.js
index a0354f4c010becb9f56fe5588658245526c10cfe..3824febac842f3ed58052866d666d41e8c640b8f 100644
--- a/build/providers/light-client/wellknown-chains.js
+++ b/build/providers/light-client/wellknown-chains.js
@@ -19,7 +19,10 @@ export const wellknownChains = {
],
paseo: [
() => import("polkadot-api/chains/paseo"),
- { paseo_asset_hub: () => import("polkadot-api/chains/paseo_asset_hub") },
+ {
+ paseo_asset_hub: () => import("polkadot-api/chains/paseo_asset_hub"),
+ paseo_people: () => import("polkadot-api/chains/paseo_people"),
+ },
],
westend: [
() => import("polkadot-api/chains/westend2"),
diff --git a/src/providers/light-client/wellknown-chains.ts b/src/providers/light-client/wellknown-chains.ts
index 090324e82a114a1ecd1ac20ec63aac7a9c91f075..4a740e06eca0f942f3df6ac1c35b89021d6f387d 100644
--- a/src/providers/light-client/wellknown-chains.ts
+++ b/src/providers/light-client/wellknown-chains.ts
@@ -22,7 +22,10 @@ export const wellknownChains = {
],
paseo: [
() => import("polkadot-api/chains/paseo"),
- { paseo_asset_hub: () => import("polkadot-api/chains/paseo_asset_hub") },
+ {
+ paseo_asset_hub: () => import("polkadot-api/chains/paseo_asset_hub"),
+ paseo_people: () => import("polkadot-api/chains/paseo_people") ,
+ },
],
westend: [
() => import("polkadot-api/chains/westend2"),
23 changes: 23 additions & 0 deletions patches/[email protected]
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
diff --git a/lib/data-patch.js b/lib/data-patch.js
index cd49cbec3e7de20dea750e95e007dbdb1488ac96..854ecd25d5ce2940468de6ad8162cb26085fbed5 100644
--- a/lib/data-patch.js
+++ b/lib/data-patch.js
@@ -1,6 +1,3 @@
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-const patch = require('../data/patch.json');
+import * as patch from "../data/patch.json"

export default patch;
diff --git a/lib/version.js b/lib/version.js
index dde3a83f43883ecbad6ca0a23afb58c12235148a..ab622ddeca28b3aa240ce64905e46015c208710b 100644
--- a/lib/version.js
+++ b/lib/version.js
@@ -1,5 +1 @@
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-export const { version } = require('../package.json');
+export { version } from "../package.json";
6 changes: 3 additions & 3 deletions src/api/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ export const config = defineConfig({
paseo: {
name: "Paseo",
descriptor: paseo,
provider: withPolkadotSdkCompat(getWsProvider("wss://rpc.ibp.network/paseo")),
provider: providers.paseo,
},
paseo_people: {
name: "Paseo People",
descriptor: paseo_people,
provider: withPolkadotSdkCompat(getWsProvider("wss://sys.ibp.network/people-paseo")),
provider: providers.paseo.addParachain({ id: "paseo_people" }),
registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_PASEO,
},

Expand All @@ -103,7 +103,7 @@ export const config = defineConfig({
name: "Rococo People",
descriptor: rococo_people,
provider: withPolkadotSdkCompat(getWsProvider(import.meta.env.VITE_APP_DEFAULT_WS_URL)),
registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__rococo_people,
registrarIndex: import.meta.env.VITE_APP_REGISTRAR_INDEX__PEOPLE_ROCOCO,
},
},
targetChains: import.meta.env.VITE_APP_AVAILABLE_CHAINS
Expand Down
12 changes: 0 additions & 12 deletions src/components/ErrorBoundary.js

This file was deleted.

126 changes: 126 additions & 0 deletions src/components/ErrorBoundary.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import React from 'react';

import { Github, RefreshCcw } from 'lucide-react'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"

export class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
};
}

componentDidCatch(error, errorInfo) {
if (import.meta.env.DEV) console.error('Detailed error:', error);
if (import.meta.env.DEV) console.error('Component stack:', errorInfo.componentStack);
this.setState({
error: error,
errorInfo: errorInfo,
});
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

render() {
return this.state.hasError ? (
<div className="min-h-screen w-full bg-[#1E1E1E] flex items-center justify-center p-4">
<Card className="max-w-2xl w-full p-6 space-y-6 bg-[#2A2A2A] border-[#E6007A]/20 text-white">
<div className="flex flex-col items-center space-y-4">
<div className="relative w-32 h-32">
{/* <Image
src="/placeholder.svg?height=128&width=128"
alt="Error illustration"
fill
className="object-contain"
priority
/> */}
</div>
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold tracking-tight">
Oops! Something went wrong.
</h1>
<p className="text-gray-400">
We're sorry, but it seems like something has gone wrong. Please try refreshing the page.
</p>
</div>
</div>

<div className="flex justify-center">
<Button
onClick={() => window.location.reload()}
variant="default"
className="bg-[#E6007A] hover:bg-[#E6007A]/90 text-white font-bold"
>
<RefreshCcw className="mr-2 h-4 w-4" />
Reload Page
</Button>
</div>

<div className="space-y-4">
<h2 className="text-xl font-bold">Need Help?</h2>
<div className="flex flex-col items-start gap-2">
<a
href="mailto:[email protected]"
className="text-[#E6007A] hover:underline"
>
[email protected]
</a>
<Separator className="w-32 bg-gray-700" />
<a
href="https://github.com/your-org/your-repo"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-[#E6007A] hover:underline"
>
<Github className="h-4 w-4" />
Visit our GitHub repository
</a>
</div>
</div>

<div className="space-y-4">
<h2 className="text-xl font-bold">Technical Details</h2>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="component-stack">
<AccordionTrigger className="text-[#E6007A]">
Show Component Stack
</AccordionTrigger>
<AccordionContent>
<pre className="bg-[#1E1E1E] p-4 rounded-md overflow-x-auto text-sm text-gray-300">
{this.state.errorInfo?.componentStack}
</pre>
</AccordionContent>
</AccordionItem>
<AccordionItem value="error-message">
<AccordionTrigger className="text-[#E6007A]">
Show Error Message
</AccordionTrigger>
<AccordionContent>
<pre className="bg-[#1E1E1E] p-4 rounded-md overflow-x-auto text-sm text-gray-300">
{this.state.error?.message}
{this.state.error?.stack}
</pre>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</Card>
</div>
) : (
this.props.children
);
}
}
19 changes: 9 additions & 10 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@ import { useProxy } from "valtio/utils";
import { useEffect, useState } from "react";
import { ConfigContextProps } from "~/api/config2";
import { useConnectedWallets } from "@reactive-dot/react";
import { Account, accountStore } from "~/store/AccountStore";
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";
import { WalletAccount } from "node_modules/@reactive-dot/core/build/wallets/account";

const AccountListing = ({ address, name }) => <>
<PolkadotIdenticon address={address} />
Expand All @@ -23,16 +21,17 @@ const AccountListing = ({ address, name }) => <>

const Header = ({
config: chainContext, chainStore, accountStore, identityStore, accounts,
onChainSelect, onAccountSelect, onRequestWalletConnections,
onChainSelect, onAccountSelect, onRequestWalletConnections, onToggleDark: onToggleDark
}: {
accounts: WalletAccount[],
accounts: { name: string, address: string, encodedAddress: string }[];
config: ConfigContextProps;
chainStore: { id: string | number | symbol, name: string };
accountStore: Account;
accountStore: { address: string, name: string };
identityStore: IdentityStore;
onChainSelect: (chainId: keyof Chains) => void;
onAccountSelect: (props: { type: string, [key: string]: string }) => void;
onRequestWalletConnections: () => void;
onToggleDark: () => void;
}) => {
const appStore = useProxy(_appStore);
const isDarkMode = appStore.isDarkMode;
Expand Down Expand Up @@ -86,11 +85,11 @@ const Header = ({
{accounts.length > 0
?<>
<SelectLabel>Accounts</SelectLabel>
{accounts.map(({ id, name, address, ...rest }) => {
{accounts.map(({ id, name, address, encodedAddress, ...rest }) => {
const account = { id, name, address, ...rest };
return (
<SelectItem key={id} value={{ type: "account", account }}>
<AccountListing address={address} name={name} />
<AccountListing address={encodedAddress} name={name} />
</SelectItem>
);
})}
Expand All @@ -109,7 +108,7 @@ const Header = ({
onValueChange={onChainSelect}
>
<SelectTrigger className="w-full bg-transparent border-[#E6007A] text-inherit">
<SelectValue placeholder={chainStore.name} />
<SelectValue placeholder={chainStore.name?.replace("People", "")} />
</SelectTrigger>
<SelectContent>
{Object.entries(chainContext.chains)
Expand All @@ -121,7 +120,7 @@ const Header = ({
)
.map(([key, net]) => (
<SelectItem key={key} value={key}>
{net.name}
{net.name.replace("People", "")}
</SelectItem>
))
}
Expand All @@ -132,7 +131,7 @@ const Header = ({
<div className="flex gap-2">
<Button variant="outline" size="icon"
className="border-[#E6007A] text-inherit hover:bg-[#E6007A] hover:text-[#FFFFFF]"
onClick={() => appStore.isDarkMode = !appStore.isDarkMode}
onClick={() => onToggleDark()}
>
{isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
</Button>
Expand Down
Loading

0 comments on commit 9d974cd

Please sign in to comment.