feat: generate sample addresses

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#421](https://github.com/alleslabs/celatone-frontend/pull/421) Generate example addresses from a fixed-bytes array
 - [#397](https://github.com/alleslabs/celatone-frontend/pull/397) Implement first version of Osmosis v16 pool
 - [#358](https://github.com/alleslabs/celatone-frontend/pull/358) Add Amp for Pool Detail page
 - [#355](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool List page

src/config/index.ts

@@ -1,5 +1,3 @@
-import type { ContractAddr, HumanAddr, ValidatorAddr } from "lib/types";
-
 import type { ChainConfig, ChainConfigs, ProjectConstants } from "./types";
 
 export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
@@ -32,11 +30,6 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     gasAdjustment: 1.0,
     maxGasLimit: 0,
   },
-  exampleAddresses: {
-    user: "" as HumanAddr,
-    contract: "" as ContractAddr,
-    validator: "" as ValidatorAddr,
-  },
   explorerLink: {
     validator: "",
     proposal: "",
@@ -77,13 +70,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       gasAdjustment: 1.5,
       maxGasLimit: 25_000_000,
     },
-    exampleAddresses: {
-      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
-      contract:
-        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
-      validator:
-        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
-    },
     explorerLink: {
       validator: "https://www.mintscan.io/osmosis/validators",
       proposal: "https://www.mintscan.io/osmosis/proposals",
@@ -123,13 +109,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       gasAdjustment: 1.5,
       maxGasLimit: 25_000_000,
     },
-    exampleAddresses: {
-      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
-      contract:
-        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
-      validator:
-        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
-    },
     explorerLink: {
       validator: "https://testnet.mintscan.io/osmosis-testnet/validators",
       proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
@@ -168,13 +147,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       gasAdjustment: 1.5,
       maxGasLimit: 25_000_000,
     },
-    exampleAddresses: {
-      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
-      contract:
-        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
-      validator:
-        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
-    },
     explorerLink: {
       validator: "",
       proposal: "",

src/config/types.ts

@@ -1,5 +1,3 @@
-import type { HumanAddr, ValidatorAddr, ContractAddr } from "lib/types";
-
 type FaucetConfig =
   | {
       enabled: true;
@@ -53,11 +51,6 @@ export interface ChainConfig {
     gasAdjustment: number;
     maxGasLimit: number;
   };
-  exampleAddresses: {
-    user: HumanAddr;
-    validator: ValidatorAddr;
-    contract: ContractAddr;
-  };
   explorerLink: ExplorerConfig;
 }
 

src/env.ts

@@ -16,7 +16,15 @@ export const SUPPORTED_CHAIN_IDS: string[] = (() => {
 // Remark: We've already checked that the first element is not empty on the above code
 export const DEFAULT_SUPPORTED_CHAIN_ID = SUPPORTED_CHAIN_IDS[0];
 
-export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
+export const DUMMY_MNEMONIC = (() => {
+  const mnemonic = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
+  if (!mnemonic)
+    throw new Error(
+      "NEXT_PUBLIC_DUMMY_MNEMONIC is empty. Please include a valid mnemonic."
+    );
+
+  return mnemonic;
+})();
 
 export const CELATONE_API_OVERRIDE =
   process.env.NEXT_PUBLIC_CELATONE_API_OVERRIDE;

src/lib/app-provider/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from "./useAddress";
 export * from "./useAmplitude";
 export * from "./useDummyWallet";
+export * from "./useExampleAddresses";
 export * from "./useFabricateFee";
 export * from "./useInternalNavigate";
 export * from "./useLCDEndpoint";

src/lib/app-provider/hooks/useAddress.ts

@@ -1,10 +1,10 @@
 import { fromBech32 } from "@cosmjs/encoding";
 import { useCallback, useMemo } from "react";
 
-import { useCelatoneApp } from "../contexts";
 import type { Option } from "lib/types";
 
 import { useCurrentChain } from "./useCurrentChain";
+import { useExampleAddresses } from "./useExampleAddresses";
 
 export type AddressReturnType =
   | "user_address"
@@ -13,9 +13,8 @@ export type AddressReturnType =
   | "invalid_address";
 
 export const useGetAddressTypeByLength = () => {
-  const {
-    chainConfig: { exampleAddresses },
-  } = useCelatoneApp();
+  const exampleAddresses = useExampleAddresses();
+
   const addressLengthMap = useMemo(
     () =>
       Object.entries(exampleAddresses).reduce<{

src/lib/app-provider/hooks/useExampleAddresses.ts

@@ -0,0 +1,36 @@
+import { toBech32 } from "@cosmjs/encoding";
+import { useMemo } from "react";
+
+import type { ContractAddr, HumanAddr, ValidatorAddr } from "lib/types";
+import { addrToValoper } from "lib/utils";
+
+import { useCurrentChain } from "./useCurrentChain";
+
+export const useExampleAddresses = () => {
+  const {
+    chain: { bech32_prefix: prefix },
+  } = useCurrentChain();
+
+  return useMemo(() => {
+    const bytes = Array(32)
+      .fill(undefined)
+      .map((_, idx) => idx);
+
+    const user = toBech32(
+      prefix,
+      new Uint8Array(bytes.slice(0, 20))
+    ) as HumanAddr;
+    // reverse the bytes so the initial characters are different from the user address
+    const contract = toBech32(
+      prefix,
+      new Uint8Array(bytes.reverse())
+    ) as ContractAddr;
+    const validator = addrToValoper(user) as ValidatorAddr;
+
+    return {
+      user,
+      contract,
+      validator,
+    };
+  }, [prefix]);
+};

src/lib/components/AddressInput.tsx

@@ -8,7 +8,7 @@ import type {
 } from "react-hook-form";
 import { useWatch } from "react-hook-form";
 
-import { useCelatoneApp, useValidateAddress } from "lib/app-provider";
+import { useExampleAddresses, useValidateAddress } from "lib/app-provider";
 import type { FormStatus, TextInputProps } from "lib/components/forms";
 import { ControllerInput } from "lib/components/forms";
 import type { Option } from "lib/types";
@@ -43,11 +43,7 @@ export const AddressInput = <T extends FieldValues>({
   helperAction,
   requiredText = "Address is empty",
 }: AddressInputProps<T>) => {
-  const {
-    chainConfig: {
-      exampleAddresses: { user: exampleAddr },
-    },
-  } = useCelatoneApp();
+  const { user: exampleUserAddress } = useExampleAddresses();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const validateAddress = useCallback(
     (input: string) =>
@@ -69,7 +65,7 @@ export const AddressInput = <T extends FieldValues>({
       name={name}
       control={control}
       label={label}
-      placeholder={placeholder ?? exampleAddr}
+      placeholder={placeholder ?? exampleUserAddress}
       type="text"
       variant="floating"
       status={status}

src/lib/components/button/ResendButton.tsx

@@ -58,7 +58,7 @@ export const ResendButton = ({ messages }: ResendButtonProps) => {
   const { isFetching: isSimulating } = useSimulateFeeQuery({
     enabled: isProcessing,
     messages: composedMsgs,
-    onSuccess: (estimatedGasUsed) => proceed(estimatedGasUsed),
+    onSuccess: proceed,
     onError: () => setIsProcessing(false),
   });
 

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -9,6 +9,7 @@ import { ActionModal } from "../ActionModal";
 import {
   useBaseApiRoute,
   useCelatoneApp,
+  useExampleAddresses,
   useValidateAddress,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
@@ -47,11 +48,7 @@ export function SaveNewContractModal({
   const { getContractLocalInfo } = useContractStore();
   const { validateContractAddress } = useValidateAddress();
 
-  const {
-    chainConfig: {
-      exampleAddresses: { contract: exampleContractAddress },
-    },
-  } = useCelatoneApp();
+  const { contract: exampleContractAddress } = useExampleAddresses();
   const initialList =
     list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? [] : [list];
 

src/lib/components/select-contract/SelectContractInstantiator.tsx

@@ -20,7 +20,7 @@ import { useState } from "react";
 import { CustomIcon } from "../icon";
 import {
   useBaseApiRoute,
-  useCelatoneApp,
+  useExampleAddresses,
   useValidateAddress,
 } from "lib/app-provider";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -42,11 +42,7 @@ export const SelectContractInstantiator = ({
   notSelected,
   onContractSelect,
 }: SelectContractInstantiatorProps) => {
-  const {
-    chainConfig: {
-      exampleAddresses: { contract: exampleContractAddress },
-    },
-  } = useCelatoneApp();
+  const { contract: exampleContractAddress } = useExampleAddresses();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [listSlug, setListSlug] = useState("");
   const { validateContractAddress } = useValidateAddress();

src/lib/pages/instantiate/instantiate.tsx

@@ -10,11 +10,11 @@ import { useForm } from "react-hook-form";
 import {
   useFabricateFee,
   useInstantiateTx,
-  useCelatoneApp,
   useValidateAddress,
   useSimulateFeeQuery,
   useCurrentChain,
   useBaseApiRoute,
+  useExampleAddresses,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -69,11 +69,8 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const router = useRouter();
   const msgQuery = (router.query.msg as string) ?? "";
   const codeIdQuery = (router.query["code-id"] as string) ?? "";
-  const {
-    chainConfig: {
-      exampleAddresses: { contract: exampleContractAddress },
-    },
-  } = useCelatoneApp();
+  const { user: exampleUserAddress } = useExampleAddresses();
+
   const { address = "" } = useCurrentChain();
   const lcdEndpoint = useBaseApiRoute("rest");
 
@@ -338,7 +335,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             name="adminAddress"
             control={control}
             label="Admin Address (optional)"
-            placeholder={`ex. ${exampleContractAddress}`}
+            placeholder={`ex. ${exampleUserAddress}`}
             helperText="The contract's admin will be able to migrate and update future admins."
             variant="floating"
             error={validateAdmin(adminAddress)}

src/lib/pages/proposal/store-code/index.tsx

@@ -25,6 +25,7 @@ import { getAlert } from "../utils";
 import {
   useCelatoneApp,
   useCurrentChain,
+  useExampleAddresses,
   useFabricateFee,
   useSimulateFeeForProposalStoreCode,
   useSubmitStoreCodeProposalTx,
@@ -96,8 +97,9 @@ const StoreCodeProposal = () => {
   useWasmConfig({ shouldRedirect: true });
   const {
     constants,
-    chainConfig: { prettyName, exampleAddresses },
+    chainConfig: { prettyName },
   } = useCelatoneApp();
+  const { user: exampleUserAddress } = useExampleAddresses();
   const getMaxLengthError = useGetMaxLengthError();
   const { address: walletAddress = "" } = useCurrentChain();
   const fabricateFee = useFabricateFee();
@@ -404,7 +406,7 @@ const StoreCodeProposal = () => {
                   control={control}
                   label={PROPOSAL_STORE_CODE_TEXT.runAsLabel}
                   labelBgColor="background.main"
-                  placeholder={`ex. ${exampleAddresses.user}`}
+                  placeholder={`ex. ${exampleUserAddress}`}
                   variant="floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
                   requiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}