Adapt app to WeightV2

cypress/e2e/contracts/flipper.spec.ts

@@ -10,6 +10,7 @@ import {
   assertInstantiate,
   assertReturnValue,
   selectMessage,
+  assertDryRun,
 } from '../../support/util';
 
 describe('Flipper Contract ', () => {
@@ -48,6 +49,7 @@ describe('Flipper Contract ', () => {
   });
   it(`submits flip() transaction`, () => {
     selectMessage('flip', 0);
+    assertDryRun();
     cy.contains('Call contract').click();
     cy.get('[data-cy="transaction-complete"]', { timeout })
       .should('be.visible')

cypress/e2e/instantiateDryRun.ts

@@ -37,7 +37,7 @@ describe('Instantiate dry run', () => {
       cy.get('[data-cy="estimated-storage-deposit"]')
         .should('not.contain', 'None')
         .and('not.be.empty');
-      cy.get('[data-cy="estimated-gas"]').should('not.contain', 'None').and('not.be.empty');
+      cy.get('[data-cy="dry-run-estimations"]').should('not.contain', 'None').and('not.be.empty');
       cy.get('[data-cy="dry-run-account"]')
         .find('[data-cy="identicon"]')
         .should('have.lengthOf', 1);

cypress/support/util.ts

@@ -18,14 +18,23 @@ export function assertMoveToStep2() {
   cy.get('[data-cy="next-btn"]').click();
   cy.contains('Deployment Constructor').scrollIntoView().should('be.visible');
   cy.contains('Deployment Salt').scrollIntoView().should('be.visible');
-  cy.contains('Max Gas Allowed').scrollIntoView().should('be.visible');
+  cy.contains('RefTime Limit').scrollIntoView().should('be.visible');
+  cy.contains('ProofSize Limit').scrollIntoView().should('be.visible');
+  assertDryRun();
 }
 
 export function assertMoveToStep3() {
   cy.get('[data-cy="next-btn"]').scrollIntoView().click();
   cy.get('[data-cy="transaction-queued"]').should('be.visible');
 }
 
+export function assertDryRun() {
+  cy.get('[data-cy="dry-run-estimations"]', { timeout })
+    .scrollIntoView()
+    .should('be.visible')
+    .and('contain', 'GasConsumed');
+}
+
 export function assertContractRedirect() {
   cy.url().should('contain', '/contract/');
 }
@@ -45,6 +54,7 @@ export function assertInstantiate() {
 }
 
 export function assertCall() {
+  assertDryRun();
   cy.contains('Call contract').click();
   cy.get('[data-cy="transaction-complete"]', { timeout })
     .should('be.visible')

package.json

@@ -29,30 +29,30 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@headlessui/react": "^1.6.6",
+    "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^1.0.6",
-    "@polkadot/api": "9.4.3",
-    "@polkadot/api-contract": "9.4.3",
+    "@polkadot/api": "9.8.2",
+    "@polkadot/api-contract": "9.8.2",
     "@polkadot/extension-dapp": "^0.44.6",
-    "@polkadot/ui-keyring": "^2.9.10",
-    "@polkadot/ui-shared": "^2.9.10",
+    "@polkadot/ui-keyring": "^2.9.13",
+    "@polkadot/ui-shared": "^2.9.13",
     "big.js": "^6.2.1",
     "buffer": "^6.0.3",
-    "copy-to-clipboard": "^3.3.2",
-    "date-fns": "^2.29.2",
+    "copy-to-clipboard": "^3.3.3",
+    "date-fns": "^2.29.3",
     "dexie": "^3.2.2",
     "dexie-react-hooks": "1.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.2",
+    "react-dropzone": "^14.2.3",
     "react-markdown": "^8.0.3",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-select": "^5.4.0",
-    "react-tooltip": "^4.2.21",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
+    "react-select": "^5.6.1",
+    "react-tooltip": "^4.5.0",
     "remark-gfm": "^3.0.1",
-    "styled-components": "^5.3.5",
-    "tailwind-merge": "^1.2.1",
+    "styled-components": "^5.3.6",
+    "tailwind-merge": "^1.8.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
@@ -62,39 +62,37 @@
     "@nabla/vite-plugin-eslint": "^1.4.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/bcryptjs": "^2.4.2",
-    "@types/big.js": "^6.1.5",
-    "@types/node": "^18.7.1",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-dropzone": "^5.1.0",
-    "@types/react-select": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "@vitejs/plugin-react": "^2.1.0",
-    "autoprefixer": "^10.4.8",
+    "@types/big.js": "^6.1.6",
+    "@types/node": "^18.11.9",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
-    "cypress": "^10.7.0",
+    "cypress": "^11.1.0",
     "cypress-file-upload": "^5.0.8",
-    "eslint": "^8.23.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.6",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
     "istanbul-lib-coverage": "^3.2.0",
     "lint-staged": ">=13.0.3",
     "nyc": "^15.1.0",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.19",
     "postcss-import": "^15.0.0",
     "prettier": "^2.7.1",
     "source-map-support": "^0.5.21",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.2",
-    "vite": "^3.1.0",
-    "vite-plugin-istanbul": "^3.0.1",
-    "vite-tsconfig-paths": "^3.5.0"
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vite-plugin-istanbul": "^3.0.2",
+    "vite-tsconfig-paths": "^3.5.2"
   },
   "browserslist": [
     "last 2 Chrome versions"

src/helpers/instantiate/createInstantiateTx.ts

@@ -11,7 +11,7 @@ export function createInstantiateTx(
     argValues,
     codeHash,
     constructorIndex,
-    weight: gasLimit,
+    gasLimit,
     value,
     metadata,
     salt,
@@ -25,7 +25,7 @@ export function createInstantiateTx(
     const constructor = metadata.findConstructor(constructorIndex);
 
     const options = {
-      gasLimit,
+      gasLimit: api.registry.createType('WeightV2', gasLimit),
       salt: salt ? encodeSalt(salt) : null,
       storageDepositLimit: storageDepositLimit || undefined,
       value: value && constructor.isPayable ? api.registry.createType('Balance', value) : undefined,

src/helpers/util/util.ts

@@ -6,9 +6,8 @@ import { keyring } from '@polkadot/ui-keyring';
 import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
 import { twMerge } from 'tailwind-merge';
-import { MAX_CALL_WEIGHT } from '../../constants';
 import { BN_TEN } from './bn';
-import { ApiPromise, AbiParam, Registry, OrFalsy, Weight, CodeBundleDocument } from 'types';
+import { ApiPromise, AbiParam, Registry, CodeBundleDocument } from 'types';
 
 export function classes(...classLists: (string | null | undefined | false)[]) {
   return twMerge(...classLists.map(classList => (!classList ? null : classList)));
@@ -34,12 +33,6 @@ export function isEmptyObj(value: unknown) {
   return JSON.stringify(value) === '{}';
 }
 
-export function maximumBlockWeight(api: OrFalsy<ApiPromise>): Weight {
-  return api?.consts.system.blockWeights
-    ? api.consts.system.blockWeights.maxBlock
-    : (api?.consts.system.maximumBlockWeight as Weight) || MAX_CALL_WEIGHT;
-}
-
 export function randomAsU8a(length = 32) {
   return crypto.getRandomValues(new Uint8Array(length));
 }

src/types/substrate.ts

@@ -8,8 +8,10 @@ export type {
   DispatchError,
   EventRecord,
   Weight,
+  WeightV2,
   ChainType,
   Hash,
+  ContractExecResult,
 } from '@polkadot/types/interfaces';
 export type { KeyringPair } from '@polkadot/keyring/types';
 export type {
@@ -27,4 +29,5 @@ export { Bytes, Raw, TypeDefInfo } from '@polkadot/types';
 export { Keyring } from '@polkadot/ui-keyring';
 export { Abi, ContractPromise, BlueprintPromise } from '@polkadot/api-contract';
 export { BlueprintSubmittableResult, CodeSubmittableResult } from '@polkadot/api-contract/base';
+export { ContractSubmittableResult } from '@polkadot/api-contract/base/Contract';
 export { ApiPromise, SubmittableResult } from '@polkadot/api';

src/types/ui/contexts.ts

@@ -10,6 +10,7 @@ import type {
   SubmittableExtrinsic,
   SubmittableResult,
   ChainType,
+  WeightV2,
 } from '../substrate';
 
 import type { BN } from './util';
@@ -43,7 +44,7 @@ export interface InstantiateData {
   constructorIndex: number;
   salt?: string;
   storageDepositLimit?: BN;
-  weight: BN;
+  gasLimit: WeightV2 | null;
   codeHash?: string;
 }
 

src/types/ui/hooks.ts

@@ -7,7 +7,6 @@ import { BN, FileState, MetadataState, Validation } from './util';
 export type InputMode = 'estimation' | 'custom';
 
 export type UIGas = {
-  max: BN;
   isValid: boolean;
   setIsValid: (value: boolean) => void;
   limit: BN;
@@ -16,6 +15,8 @@ export type UIGas = {
   setMode: (m: InputMode) => void;
   errorMsg: string;
   setErrorMsg: (m: string) => void;
+  text: string;
+  setText: (m: string) => void;
 };
 
 export interface ValidFormField<T> extends Validation {

src/ui/components/common/NoticeBanner.tsx

@@ -0,0 +1,26 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { EmojiSadIcon } from '@heroicons/react/outline';
+
+export function NoticeBanner({ isVisible, endpoint }: { isVisible: boolean; endpoint: string }) {
+  return isVisible ? (
+    <div className="bg-gray-200 dark:bg-gray-800 text-gray-400 fixed top-10 left-1/3 right-1/3 p-6 z-50 text-center h-2/5 w-2/5 flex flex-col justify-center items-center">
+      <EmojiSadIcon className="w-10 h-10 text-red-400 mb-1 justify-self-center" />
+
+      <h2 className="text-red-400 text-2xl mb-3">Unsuported node version. </h2>
+      <p>
+        Looks like your node does not support <span>WeigthV2</span>.
+      </p>
+      <p>
+        Upgrade your node or use an{' '}
+        <a
+          href={`https://weightv1--contracts-ui.netlify.app/?rpc=${endpoint}`}
+          className="text-blue-400"
+        >
+          older version of Contracts UI.
+        </a>
+      </p>
+    </div>
+  ) : null;
+}

src/ui/components/common/index.ts

@@ -11,3 +11,4 @@ export * from './Switch';
 export * from './Tabs';
 export * from './SearchResults';
 export * from './ConnectionError';
+export * from './NoticeBanner';