fix: build errors and add warning banner

Author: peterwht

package.json

@@ -68,7 +68,8 @@
     "@types/bcryptjs": "^2.4.6",
     "@types/big.js": "^6.2.2",
     "@types/node": "^22.5.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "@vitejs/plugin-react": "^4.3.1",

src/lib/util.ts

@@ -1,8 +1,6 @@
 // Copyright 2022-2024 use-ink/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { decodeAddress, encodeAddress } from '@polkadot/keyring';
-import { hexToU8a, isHex } from '@polkadot/util';
 import { keyring } from '@polkadot/ui-keyring';
 import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
@@ -74,7 +72,8 @@ export function isUndefined(value: unknown): value is undefined {
 
 export function isValidAddress(address: string | Uint8Array | null | undefined) {
   try {
-    // encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address));
+    // TODO: check isValidAddress
+    console.log(address);
     return true;
   } catch (error) {
     return false;

src/services/chain/contract.ts

@@ -1,7 +1,7 @@
 // Copyright 2022-2024 use-ink/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { BlueprintPromise, CodePromise, ContractPromise } from '@polkadot/api-contract';
+import { BlueprintPromise, CodePromise } from '@polkadot/api-contract';
 import { isValidAddress, isValidCodeHash, isNumber } from 'lib/util';
 import { transformUserInput } from 'lib/callOptions';
 import {
@@ -11,11 +11,7 @@ import {
   InstantiateData,
   SubmittableExtrinsic,
 } from 'types';
-import { stringToU8a, compactAddLength, u8aToU8a, hexToU8a } from '@polkadot/util';
-import { ISubmittableResult } from '@polkadot/types/types';
-import { BlueprintSubmittableResult, Contract } from '@polkadot/api-contract/base';
-import { contractsAbi } from '@polkadot/types/interfaces/definitions';
-import { fromEthAddress, isEthDerived, toEthAddress } from 'ui/hooks';
+import { u8aToU8a } from '@polkadot/util';
 
 export function createInstantiateTx(
   api: ApiPromise,
@@ -30,6 +26,7 @@ export function createInstantiateTx(
     storageDepositLimit,
   }: Omit<InstantiateData, 'name'>,
 ): SubmittableExtrinsic<'promise'> {
+  //@ts-ignore TODO: need to update type in @polkadot/api-contracts
   const wasm = u8aToU8a(metadata?.json.source.contract_binary);
   const isValid = codeHash || !!wasm;
 

src/ui/components/common/HeaderButtons.tsx

@@ -14,7 +14,7 @@ interface Props {
   contract: UIContract;
 }
 
-export function HeaderButtons({ contract: { address, dotAddress, codeHash } }: Props) {
+export function HeaderButtons({ contract: { address, codeHash } }: Props) {
   const { api } = useApi();
   const { db } = useDatabase();
   const [isOnChain, setIsOnChain] = useState(true);

src/ui/components/contract/ContractRow.tsx

@@ -9,7 +9,6 @@ import { ContractDocument } from 'types';
 import { useApi } from 'ui/contexts';
 import { displayDate, truncate } from 'lib/util';
 import { getContractInfo } from 'services/chain';
-import { fromEthAddress, toEthAddress } from 'ui/hooks';
 
 interface Props {
   contract: ContractDocument;

src/ui/components/contract/Interact.tsx

@@ -21,7 +21,6 @@ import {
   SubmittableResult,
   UIContract,
 } from 'types';
-import { Text } from '@polkadot/types';
 import { AccountSelect } from 'ui/components/account';
 import { Button, Buttons, Dropdown } from 'ui/components/common';
 import { ArgumentForm, Form, FormField, OptionsForm } from 'ui/components/form';
@@ -166,7 +165,7 @@ export const InteractTab = ({
     setNextResultId(nextResultId + 1);
   };
 
-  const newId = useRef<number>();
+  const newId = useRef<number>(0);
 
   const call = () => {
     if (!outcome || !message || !accountId) throw new Error('Unable to call contract.');

src/ui/components/contract/OutcomeItem.tsx

@@ -13,20 +13,20 @@ export function OutcomeItem({
   displayValue: string;
   copyValue?: string;
   id?: string;
-}): JSX.Element {
+}): React.ReactElement {
   return (
     <div className="event-log mb-4">
       <div className="mb-1 leading-5">{title}</div>
       <div
-        className="return-value relative break-all rounded-sm bg-gray-200 p-2 text-xs text-gray-600  dark:bg-elevation-1 dark:text-gray-400"
+        className="return-value relative break-all rounded-sm bg-gray-200 p-2 text-xs text-gray-600 dark:bg-elevation-1 dark:text-gray-400"
         data-cy="output"
       >
         <pre className="whitespace-pre-wrap">
           <code>{displayValue}</code>
         </pre>
         <CopyButton
           className="absolute bottom-2 right-2"
-          id={title ? title.toLowerCase().replace(/\s+/g, '-') : id ?? ''}
+          id={title ? title.toLowerCase().replace(/\s+/g, '-') : (id ?? '')}
           value={copyValue}
         />
       </div>

src/ui/components/form/InputBn.tsx

@@ -35,7 +35,7 @@ function getMinMax(type: string): [bigint, bigint] {
   }
 }
 
-export function InputBn({ onChange, typeDef: { type } }: Props): JSX.Element {
+export function InputBn({ onChange, typeDef: { type } }: Props): React.ReactElement {
   const [displayValue, setDisplayValue] = useState('0');
   const [min, max] = getMinMax(type);
 

src/ui/components/instantiate/Step2.tsx

@@ -22,21 +22,11 @@ import {
   useToggle,
   useStorageDepositLimit,
   useBalance,
-  create2,
-  toEthAddress,
-  create1,
 } from 'ui/hooks';
 import { AbiMessage, Balance, OrFalsy } from 'types';
-import {
-  decodeStorageDeposit,
-  getGasLimit,
-  getStorageDepositLimit,
-  transformUserInput,
-} from 'lib/callOptions';
+import { decodeStorageDeposit, getGasLimit, getStorageDepositLimit } from 'lib/callOptions';
 import { BN_ZERO } from 'lib/bn';
 import { hasRevertFlag } from 'lib/hasRevertFlag';
-import { hexToU8a, stringToU8a } from '@polkadot/util';
-import { decodeAddress } from '@polkadot/keyring';
 
 function validateSalt(value: OrFalsy<string>) {
   if (!!value && value.length === 66) {
@@ -73,6 +63,7 @@ export function Step2() {
   }, [metadata, setConstructorIndex]);
 
   const [isUsingSalt, toggleIsUsingSalt] = useToggle(true);
+  //@ts-ignore TODO: need to update type in @polkadot/api-contracts
   const code = metadata?.json.source.contract_binary;
 
   const params: Parameters<typeof api.call.reviveApi.instantiate> = useMemo(() => {
@@ -98,6 +89,7 @@ export function Step2() {
     storageDepositLimit.isActive,
     storageDepositLimit.value,
     codeHashUrlParam,
+    //@ts-ignore TODO: need to update type in @polkadot/api-contracts
     metadata?.json.source.contract_binary,
     inputData,
     isUsingSalt,
@@ -122,7 +114,6 @@ export function Step2() {
           instantiateResult = {
             Ok: {
               result: { flags: convertedFlags, data: okResult.result.data },
-              accountId: okResult.accountId,
             },
           };
         } else {
@@ -159,7 +150,8 @@ export function Step2() {
     setData({
       ...data,
       constructorIndex,
-      salt: params[6] || null,
+      // salt: params[6] || null,
+      salt: (params[6] as string | Uint8Array | null) || null,
       value: deployConstructor?.isPayable ? (params[1] as Balance) : undefined,
       argValues,
       storageDepositLimit: getStorageDepositLimit(

src/ui/components/instantiate/Step3.tsx

@@ -9,10 +9,8 @@ import { printBN } from 'lib/bn';
 import { createInstantiateTx } from 'services/chain';
 import { SubmittableResult } from 'types';
 import { useApi, useInstantiate, useTransactions } from 'ui/contexts';
-import { create2, toEthAddress, useNewContract } from 'ui/hooks';
-import { hexToU8a, stringToU8a } from '@polkadot/util';
+import { useNewContract } from 'ui/hooks';
 import { transformUserInput } from 'lib/callOptions';
-import { decodeAddress } from '@polkadot/keyring';
 
 export function Step3() {
   const { codeHash: codeHashUrlParam } = useParams<{ codeHash: string }>();
@@ -31,9 +29,9 @@ export function Step3() {
     const isValid = (result: SubmittableResult) => !result.isError && !result.dispatchError;
 
     if (data.accountId) {
-      const constructor = metadata.findConstructor(constructorIndex);
-      const transformed = transformUserInput(api.registry, constructor.args, data.argValues);
-      const inputData = constructor.toU8a(transformed).slice(1); // exclude the first byte (the length byte)
+      const constructor = metadata?.findConstructor(constructorIndex);
+      const transformed = transformUserInput(api.registry, constructor?.args || [], data.argValues);
+      const inputData = constructor?.toU8a(transformed).slice(1); // exclude the first byte (the length byte)
 
       const tx = createInstantiateTx(api, data);
 
@@ -43,11 +41,13 @@ export function Step3() {
           accountId: data.accountId,
           onSuccess: result => {
             // Pass the contract data and extrinsic to onSuccess
+            // @ts-ignore: TODO: solve type issue
             return onSuccess({
               ...result,
               contractData: {
-                salt: salt, // Using codeHash as salt for demonstration
-                data: inputData, // The contract initialization data
+                salt: salt?.toString() || '', // Using codeHash as salt for demonstration
+                data: inputData || new Uint8Array(),
+                // @ts-ignore TODO
                 code: metadata?.json.source.contract_binary,
               },
             });

src/ui/contexts/DatabaseContext.tsx

@@ -14,7 +14,7 @@ const INITIAL = {} as unknown as DbState;
 
 export function DatabaseContextProvider({
   children,
-}: React.HTMLAttributes<HTMLDivElement>): JSX.Element | null {
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null {
   const { genesisHash } = useApi();
   const [state, setState] = useState<DbState>(INITIAL);
 

src/ui/hooks/useNewContract.ts

@@ -4,11 +4,11 @@
 import { useNavigate } from 'react-router';
 import type { BlueprintSubmittableResult } from 'types';
 import { useApi, useDatabase, useInstantiate } from 'ui/contexts';
-import { BigNumberish, ethers, RlpStructuredDataish, toBeHex, toUtf8String } from 'ethers';
+import { BigNumberish, ethers } from 'ethers';
 import { ApiTypes } from '@polkadot/api/types';
 import { hexToU8a, stringToU8a, u8aToHex } from '@polkadot/util';
 import { keccak256 } from 'ethers';
-import { decodeAddress, encodeAddress } from '@polkadot/keyring';
+import { decodeAddress } from '@polkadot/keyring';
 
 interface ExtendedBlueprintSubmittableResult<T extends ApiTypes>
   extends BlueprintSubmittableResult<T> {

src/ui/hooks/useStoredContract.ts

@@ -37,7 +37,7 @@ export function useStoredContract(address: string): UIContract | undefined {
     displayName: document.name,
     tx: contract.tx,
     codeHash: document.codeHash,
-    address: contract.address,
+    address: contract.address.toString(),
     dotAddress: document.dotAddress,
     date: document.date,
     id: document.id,

src/ui/layout/RootLayout.tsx

@@ -12,6 +12,13 @@ export function RootLayout({ accessory, heading, help, children, aside }: PagePr
         aside && 'grid grid-cols-[1fr_400px] gap-10',
       )}
     >
+      <div className="col-span-2 mb-6 max-h-[100px] bg-yellow-400 p-4 text-center text-lg font-semibold text-black">
+        NOTE: This is an ALPHA version for the ink! v6 Alpha release. If you run into issues, please
+        open an issue at{' '}
+        <a className="text-purple-700" href="https://github.com/use-ink/contracts-ui">
+          https://github.com/use-ink/contracts-ui
+        </a>
+      </div>
       <main>
         <header className="mb-10 space-y-1 border-b border-gray-200 pb-6 dark:border-gray-800">
           {accessory && <div className="float-right">{accessory}</div>}

src/ui/layout/sidebar/NavLink.tsx

@@ -4,7 +4,7 @@
 import { NavLink as NavLinkBase, NavLinkProps } from 'react-router-dom';
 
 interface Props extends NavLinkProps {
-  icon: (_: React.ComponentProps<'svg'>) => JSX.Element;
+  icon: (_: React.ComponentProps<'svg'>) => React.ReactElement;
 }
 
 export function NavLink({ children, icon: Icon, ...props }: Props): React.ReactElement<Props> {

src/ui/layout/sidebar/QuickLinks.tsx

@@ -16,7 +16,7 @@ export function QuickLinks() {
       <div className="section your-contracts">
         <div className="header text-gray-400">Your Contracts</div>
         {contracts && contracts.length > 0 ? (
-          contracts.map(({ name, address, dotAddress }) => {
+          contracts.map(({ name, address }) => {
             return (
               <NavLink icon={DocumentTextIcon} key={address} to={`/contract/${address}`}>
                 {name}

src/ui/pages/AddressLookup.tsx

@@ -21,6 +21,7 @@ import { useApi, useDatabase } from 'ui/contexts';
 import { useNonEmptyString } from 'ui/hooks/useNonEmptyString';
 import { useStoredMetadata } from 'ui/hooks/useStoredMetadata';
 import { RootLayout } from 'ui/layout';
+import { fromEthAddress } from 'ui/hooks';
 
 export function AddressLookup() {
   const [searchString, setSearchString] = useState('');
@@ -192,6 +193,7 @@ export function AddressLookup() {
                 const document = {
                   abi: metadata.json,
                   address,
+                  dotAddress: fromEthAddress(address),
                   codeHash: metadata.info.source.wasmHash.toHex(),
                   date: new Date().toISOString(),
                   name,

yarn.lock

@@ -2419,12 +2419,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.0":
-  version: 18.3.6
-  resolution: "@types/react-dom@npm:18.3.6"
+"@types/react-dom@npm:^19.1.2":
+  version: 19.1.2
+  resolution: "@types/react-dom@npm:19.1.2"
   peerDependencies:
-    "@types/react": ^18.0.0
-  checksum: 03434d70eb3213413514303c684fe56672a0e5ac6629be92a34d521f926f9e9eb89dcabf9ff485df485a11244e0f4b47dbb6168f7a6a0b664518c9bafb25711d
+    "@types/react": ^19.0.0
+  checksum: 62a5c398e87b5a42f34497152c67367db70d5e348a05fc4bd78c119fc8d4367c02833c022b2f5dba4df33ae65b7ff76409847722ce6b8f9ea5d31983832688da
   languageName: node
   linkType: hard
 
@@ -2437,6 +2437,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^19.1.2":
+  version: 19.1.2
+  resolution: "@types/react@npm:19.1.2"
+  dependencies:
+    csstype: ^3.0.2
+  checksum: 5a911a2c84be0c9451bb8a7c75c907af1f52afbb4d51b0d62e7516a9b0b1e63c3c1cdc35b79bfc6e66176c76cfff9d43023a781cd3dc59e2744715ced7d7e7c4
+  languageName: node
+  linkType: hard
+
 "@types/sinonjs__fake-timers@npm:8.1.1":
   version: 8.1.1
   resolution: "@types/sinonjs__fake-timers@npm:8.1.1"
@@ -3867,7 +3876,8 @@ __metadata:
     "@types/bcryptjs": ^2.4.6
     "@types/big.js": ^6.2.2
     "@types/node": ^22.5.0
-    "@types/react-dom": ^18.3.0
+    "@types/react": ^19.1.2
+    "@types/react-dom": ^19.1.2
     "@typescript-eslint/eslint-plugin": ^8.2.0
     "@typescript-eslint/parser": ^8.2.0
     "@vitejs/plugin-react": ^4.3.1