Skip to content

Commit

Permalink
feat: Add ImplicitAccountCreation address page case (#1098)
Browse files Browse the repository at this point in the history
* feat: Add ImplicitAccountCreation address page case

* fix: Set networkInfoNova only if needed (prevents React set state on unmounted component issue)
  • Loading branch information
msarcev authored Feb 12, 2024
1 parent a4a4999 commit d1bb492
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 11 deletions.
24 changes: 15 additions & 9 deletions client/src/app/AppUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,14 +157,20 @@ export const populateNetworkInfoNova = (networkName: string) => {
nodeInfo?.protocolParameters.reduce((params, cur) => {
return params.startEpoch > cur.startEpoch ? params : cur;
}) ?? null;
const setNetworkInfoNova = useNetworkInfoNova.getState().setNetworkInfo;
setNetworkInfoNova({
name: networkName,
tokenInfo: nodeInfo?.baseToken ?? {},
protocolVersion: protocolInfo?.parameters.version ?? -1,
protocolInfo,
latestConfirmedSlot: nodeInfo?.status?.latestConfirmedBlockSlot ?? -1,
bech32Hrp: protocolInfo?.parameters.bech32Hrp ?? "",
});

const networkInfoState = useNetworkInfoNova.getState();
const currentNetworkInfo = networkInfoState.networkInfo;
if (currentNetworkInfo?.name !== networkName || currentNetworkInfo?.protocolInfo === null) {
const setNetworkInfoNova = networkInfoState.setNetworkInfo;

setNetworkInfoNova({
name: networkName,
tokenInfo: nodeInfo?.baseToken ?? {},
protocolVersion: protocolInfo?.parameters.version ?? -1,
protocolInfo,
latestConfirmedSlot: nodeInfo?.status?.latestConfirmedBlockSlot ?? -1,
bech32Hrp: protocolInfo?.parameters.bech32Hrp ?? "",
});
}
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { ImplicitAccountCreationAddress } from "@iota/sdk-wasm-nova/web";
import React from "react";
import { useImplicitAccountCreationAddressState } from "~/helpers/nova/hooks/useImplicitAccountCreationAddressState";
import Bech32Address from "./Bech32Address";
import AssociatedOutputs from "./section/association/AssociatedOutputs";

interface ImplicitAccountCreationAddressViewProps {
implicitAccountCreationAddress: ImplicitAccountCreationAddress;
}

const ImplicitAccountCreationAddressView: React.FC<ImplicitAccountCreationAddressViewProps> = ({ implicitAccountCreationAddress }) => {
const { implicitAccountCreationAddressDetails } = useImplicitAccountCreationAddressState(implicitAccountCreationAddress);

return (
<div className="address-page">
<div className="wrapper">
{implicitAccountCreationAddressDetails && (
<div className="inner">
<div className="addr--header">
<div className="row middle">
<h1>{implicitAccountCreationAddressDetails.label?.replace("Ed25519", "Address")}</h1>
</div>
</div>
<div className="section no-border-bottom padding-b-0">
<div className="section--header">
<div className="row middle">
<h2>General</h2>
</div>
</div>
<div className="general-content">
<div className="section--data">
<Bech32Address addressDetails={implicitAccountCreationAddressDetails} advancedMode={true} />
</div>
</div>
</div>
<div className="section no-border-bottom padding-b-0">
<div className="row middle">
<h2>Associated Outputs</h2>
</div>
<AssociatedOutputs addressDetails={implicitAccountCreationAddressDetails} />
</div>
</div>
)}
</div>
</div>
);
};

export default ImplicitAccountCreationAddressView;
16 changes: 15 additions & 1 deletion client/src/app/routes/nova/AddressPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
import { AccountAddress, Address, AddressType, AnchorAddress, Ed25519Address, NftAddress, Utils } from "@iota/sdk-wasm-nova/web";
import {
AccountAddress,
Address,
AddressType,
AnchorAddress,
Ed25519Address,
ImplicitAccountCreationAddress,
NftAddress,
Utils,
} from "@iota/sdk-wasm-nova/web";
import React from "react";
import { RouteComponentProps } from "react-router-dom";
import AddressNotFoundPage from "~/app/components/nova/address/AddressNotFoundPage";
Expand All @@ -7,6 +16,7 @@ import AccountAddressView from "~/app/components/nova/address/AccountAddressView
import Ed25519AddressView from "~/app/components/nova/address/Ed25519AddressView";
import NftAddressView from "~/app/components/nova/address/NftAddressView";
import AnchorAddressView from "~/app/components/nova/address/AnchorAddressView";
import ImplicitAccountCreationAddressView from "~/app/components/nova/address/ImplicitAccountCreationAddressView";
import "./AddressPage.scss";

const AddressPage: React.FC<RouteComponentProps<AddressRouteProps>> = ({
Expand All @@ -32,6 +42,10 @@ const AddressPage: React.FC<RouteComponentProps<AddressRouteProps>> = ({
return <NftAddressView nftAddress={parsedAddress as NftAddress} />;
case AddressType.Anchor:
return <AnchorAddressView anchorAddress={parsedAddress as AnchorAddress} />;
case AddressType.ImplicitAccountCreation:
return (
<ImplicitAccountCreationAddressView implicitAccountCreationAddress={parsedAddress as ImplicitAccountCreationAddress} />
);
default:
return (
<div className="address-page">
Expand Down
2 changes: 1 addition & 1 deletion client/src/helpers/nova/addressHelper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export class AddressHelper {
} else if (addressType === AddressType.Nft) {
bech32 = Utils.nftIdToBech32(hex, hrp);
} else if (addressType === AddressType.Anchor) {
// TODO Utils.anchorIdToBech32 does not exist ???
// TODO Utils.anchorIdToBech32 does not exist https://github.com/iotaledger/iota-sdk/issues/1973
bech32 = Utils.accountIdToBech32(hex, hrp);
} else if (addressType === AddressType.ImplicitAccountCreation) {
bech32 = Utils.hexToBech32(hex, hrp);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { ImplicitAccountCreationAddress } from "@iota/sdk-wasm-nova/web";
import { Reducer, useEffect, useReducer } from "react";
import { useLocation } from "react-router-dom";
import { useNetworkInfoNova } from "../networkInfo";
import { IAddressDetails } from "~/models/api/nova/IAddressDetails";
import { AddressHelper } from "~/helpers/nova/addressHelper";

export interface IImplicitAccountCreationAddressState {
implicitAccountCreationAddressDetails: IAddressDetails | null;
}

const initialState = {
implicitAccountCreationAddressDetails: null,
};

/**
* Route Location Props
*/
interface IAddressPageLocationProps {
addressDetails: IAddressDetails;
}

export const useImplicitAccountCreationAddressState = (address: ImplicitAccountCreationAddress) => {
const location = useLocation();
const { bech32Hrp } = useNetworkInfoNova((s) => s.networkInfo);
const [state, setState] = useReducer<Reducer<IImplicitAccountCreationAddressState, Partial<IImplicitAccountCreationAddressState>>>(
(currentState, newState) => ({ ...currentState, ...newState }),
initialState,
);

useEffect(() => {
const locationState = location.state as IAddressPageLocationProps;
const { addressDetails } = locationState?.addressDetails
? locationState
: { addressDetails: AddressHelper.buildAddress(bech32Hrp, address) };

setState({
...initialState,
implicitAccountCreationAddressDetails: addressDetails,
});
}, []);

return {
implicitAccountCreationAddressDetails: state.implicitAccountCreationAddressDetails,
};
};

0 comments on commit d1bb492

Please sign in to comment.