use-ink · gaboesquivel · Jul 31, 2023 · Jul 21, 2023 · Jul 21, 2023 · Jul 21, 2023
diff --git a/.eslintrc b/.eslintrc
@@ -83,7 +83,7 @@
     "indent": "off",
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "react/display-name": "off",
-    "react/jsx-sort-props":"warn",
+    "react/jsx-sort-props": "warn",
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off"
   }

diff --git a/cypress/e2e/extension.spec.ts b/cypress/e2e/extension.spec.ts
@@ -26,10 +26,10 @@ describe('Signer extension flow on live networks', () => {
       cy.contains('No signer extension found.').should('be.visible');
       cy.contains('New to Substrate?').should('be.visible');
       cy.contains(
-        'Install the a compatible wallet like Polkadot.js Extension to create and manage Substrate accounts.'
+        'Install the a compatible wallet like Polkadot.js Extension to create and manage Substrate accounts.',
       ).should('be.visible');
       cy.contains(
-        'If the extension is installed and you are seeing this, make sure it allows Contracts UI to use your accounts for signing.'
+        'If the extension is installed and you are seeing this, make sure it allows Contracts UI to use your accounts for signing.',
       ).should('be.visible');
     });
   });
@@ -45,10 +45,10 @@ describe('Signer extension flow on live networks', () => {
     cy.get('[data-cy="error-card"]').within(() => {
       cy.contains('No accounts found.').should('be.visible');
       cy.contains(
-        '1. Follow this guide to create your first account in the Polkadot.js extension.'
+        '1. Follow this guide to create your first account in the Polkadot.js extension.',
       ).should('be.visible');
       cy.contains(
-        '2. Drip some funds into your account via the faucets of our supported networks.'
+        '2. Drip some funds into your account via the faucets of our supported networks.',
       ).should('be.visible');
     });
   });

diff --git a/cypress/e2e/instantiateDryRun.spec.ts b/cypress/e2e/instantiateDryRun.spec.ts
@@ -21,7 +21,7 @@ describe('Instantiate dry run', () => {
       cy.contains('ContractTrapped').should('be.visible');
       cy.contains('Contract trapped during execution.').should('be.visible');
       cy.contains(
-        "panicked at 'assertion failed: 0 < requirement && requirement <= owners && owners <= MAX_OWNERS"
+        "panicked at 'assertion failed: 0 < requirement && requirement <= owners && owners <= MAX_OWNERS",
       ).should('be.visible');
     });
   });

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
-    "lint": "yarn eslint --fix .",
+    "lint": "echo 'linting...'; yarn eslint --fix .; echo 'linting complete!'",
     "format": "yarn prettier --write .",
     "clean": "rm -rf dist",
     "test": "yarn cypress run",
@@ -52,48 +52,48 @@
     "react-select": "^5.7.3",
     "react-tooltip": "^5.14.0",
     "remark-gfm": "^3.0.1",
-    "tailwind-merge": "^1.13.1",
+    "tailwind-merge": "^1.14.0",
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.10.7",
+    "@cypress/code-coverage": "^3.11.0",
     "@cypress/snapshot": "^2.1.7",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@nabla/vite-plugin-eslint": "^1.5.0",
-    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/forms": "^0.5.4",
     "@types/bcryptjs": "^2.4.2",
     "@types/big.js": "^6.1.6",
-    "@types/node": "^20.3.1",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@types/node": "^20.4.5",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
-    "cypress": "^12.14.0",
+    "cypress": "^12.17.2",
     "cypress-file-upload": "^5.0.8",
-    "eslint": "^8.42.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "istanbul-lib-coverage": "^3.2.0",
     "lint-staged": ">=13.2.2",
     "nyc": "^15.1.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.27",
     "postcss-import": "^15.1.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "source-map-support": "^0.5.21",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
     "vite": "^4.4.6",
-    "vite-plugin-istanbul": "^4.1.0",
+    "vite-plugin-istanbul": "^5.0.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "browserslist": [

diff --git a/snapshots.js b/snapshots.js
@@ -1,5 +1,5 @@
 module.exports = {
-  __version: '12.8.1',
+  __version: '12.17.2',
   'Storage Types Contract': {
     UnsignedIntegers: {
       1: "<code>{\n  i128ValueMax: '170,141,183,460,469,231,731,687,303,715,884,105,727',\n  i128ValueMin: '-170,141,183,460,469,231,731,687,303,715,884,105,728',\n  i16ValueMax: '-32,769',\n  i16ValueMin: '-32,768',\n  i32ValueMax: '2,147,483,647',\n  i32ValueMin: '-2,147,483,648',\n  i64ValueMax: '9,223,372,036,854,775,807',\n  i64ValueMin: '-9,223,372,036,854,775,808',\n  i8ValueMax: '-129',\n  i8ValueMin: '-128',\n  }</code>",

diff --git a/src/helpers/callOptions.ts b/src/helpers/callOptions.ts
@@ -6,7 +6,7 @@ import { randomAsU8a } from './util';
 import { UIStorageDeposit, ContractCallOutcome, BN, WeightV2, AbiParam, Registry } from 'types';
 
 export function decodeStorageDeposit(
-  storageDeposit: ContractCallOutcome['storageDeposit']
+  storageDeposit: ContractCallOutcome['storageDeposit'],
 ): UIStorageDeposit {
   if (storageDeposit.isCharge) {
     return { value: storageDeposit.asCharge, type: 'charge' };
@@ -30,7 +30,7 @@ export function getStorageDepositLimit(
   switchOn: boolean,
   userInput: BN,
   registry: Registry,
-  dryRunValue?: UIStorageDeposit
+  dryRunValue?: UIStorageDeposit,
 ) {
   return switchOn
     ? registry.createType('Balance', userInput)
@@ -43,7 +43,7 @@ export function getGasLimit(
   switchOn: boolean,
   refTimeLimit: BN,
   proofSizeLimit: BN,
-  registry: Registry
+  registry: Registry,
 ): WeightV2 | null {
   return switchOn
     ? registry.createType('WeightV2', {
@@ -56,7 +56,7 @@ export function getGasLimit(
 export function transformUserInput(
   registry: Registry,
   messageArgs: AbiParam[],
-  values?: Record<string, unknown>
+  values?: Record<string, unknown>,
 ): unknown[] {
   return messageArgs.map(({ name, type: { type } }) => {
     const value = values ? values[name] : null;

diff --git a/src/helpers/contract.ts b/src/helpers/contract.ts
@@ -23,7 +23,7 @@ export function createInstantiateTx(
     metadata,
     salt,
     storageDepositLimit,
-  }: Omit<InstantiateData, 'name'>
+  }: Omit<InstantiateData, 'name'>,
 ): SubmittableExtrinsic<'promise'> {
   const wasm = metadata?.info.source.wasm;
   const isValid = codeHash || !!wasm;

diff --git a/src/helpers/initValue.ts b/src/helpers/initValue.ts
@@ -163,8 +163,8 @@ export function getInitValue(registry: Registry, accounts: Account[], def: TypeD
         error && console.error(`params: initValue: ${error}`);
         console.warn(
           `params: initValue: No default value for type ${type} from ${JSON.stringify(
-            def
-          )}, using defaults`
+            def,
+          )}, using defaults`,
         );
       }
 

diff --git a/src/helpers/output.ts b/src/helpers/output.ts
@@ -39,7 +39,7 @@ function stringify(o: unknown) {
 function decodeReturnValue(
   returnType: TypeDef | null | undefined,
   data: Bytes,
-  registry: Registry
+  registry: Registry,
 ): AnyJson {
   const returnTypeName = getReturnTypeName(returnType);
   let r: AnyJson = 'Decoding error';
@@ -81,7 +81,7 @@ function getOkText(outcome: AnyJson, returnValue: AnyJson) {
 export function getDecodedOutput(
   { result }: Pick<ContractExecResult, 'result' | 'debugMessage'>,
   { returnType }: AbiMessage,
-  registry: Registry
+  registry: Registry,
 ): {
   decodedOutput: string;
   isError: boolean;

diff --git a/src/types/ui/contexts.ts b/src/types/ui/contexts.ts
@@ -61,12 +61,17 @@ export interface InstantiateState {
 
 export type InstantiateProps = InstantiateState;
 
-export enum TxStatus {
-  Error = 'error',
-  Success = 'success',
-  Processing = 'processing',
-  Queued = 'queued',
-}
+// avoid enums https://www.youtube.com/watch?v=jjMbPt_H3RQ
+export const TxStatusMap = {
+  Error: 'error',
+  Success: 'success',
+  Processing: 'processing',
+  Queued: 'queued',
+} as const;
+
+type ObjectValues<T> = T[keyof T];
+
+export type TxStatus = ObjectValues<typeof TxStatusMap>;
 export interface TxOptions {
   extrinsic: SubmittableExtrinsic<'promise'>;
   accountId: string;

diff --git a/src/ui/components/common/CopyButton.tsx b/src/ui/components/common/CopyButton.tsx
@@ -26,7 +26,7 @@ export function CopyButton({ className, iconClassName, value, id }: Props) {
         setShowTooltip(false);
       }, 1000);
     },
-    [value]
+    [value],
   );
 
   return (

diff --git a/src/ui/components/common/Dropdown.tsx b/src/ui/components/common/Dropdown.tsx
@@ -19,7 +19,7 @@ import { classes, isValidAddress } from 'helpers';
 import type { DropdownOption, DropdownProps } from 'types';
 
 function isGroupedOptions<T>(
-  options: ReactSelectProps<DropdownOption<T>, false>['options']
+  options: ReactSelectProps<DropdownOption<T>, false>['options'],
 ): options is GroupBase<DropdownOption<T>>[] {
   try {
     return !!options && (options as GroupBase<DropdownOption<T>>[])[0].options !== undefined;
@@ -60,7 +60,7 @@ function DropdownIndicator<T>(props: DropdownIndicatorProps<DropdownOption<T>, f
 
 function getOption<T>(
   options: OptionsOrGroups<DropdownOption<T>, GroupBase<DropdownOption<T>>>,
-  val: T
+  val: T,
 ) {
   if (isGroupedOptions(options)) {
     return options
@@ -87,7 +87,7 @@ export function Dropdown<T>({
     (option: DropdownOption<T> | null): void => {
       option && _onChange(option.value);
     },
-    [_onChange]
+    [_onChange],
   );
 
   const value = useMemo(() => getOption(options, _value), [options, _value]);

diff --git a/src/ui/components/common/HeaderButtons.tsx b/src/ui/components/common/HeaderButtons.tsx
@@ -50,7 +50,7 @@ export function HeaderButtons({ contract: { address, codeHash } }: Props) {
           </Link>
         ) : (
           <p className="mr-3 flex items-center font-semibold text-red-400">{`Not found at ${truncate(
-            address
+            address,
           )}`}</p>
         )}
         <button

diff --git a/src/ui/components/common/Spinner.tsx b/src/ui/components/common/Spinner.tsx
@@ -25,7 +25,7 @@ export function Spinner({
         `border-${color}`,
         `dark:border-${darkColor}`,
         'animate-spin rounded-full border-solid',
-        className
+        className,
       )}
       data-cy="spinner"
       style={{ borderTopColor: 'transparent' }}

diff --git a/src/ui/components/common/Switch.tsx b/src/ui/components/common/Switch.tsx
@@ -20,7 +20,7 @@ export function Switch({ children, className, onChange, value }: Props) {
       className={classes(
         value ? 'bg-green-500' : 'bg-gray-700',
         'relative inline-flex w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
-        className
+        className,
       )}
       data-cy="switch-button"
       onChange={onChange}
@@ -30,7 +30,7 @@ export function Switch({ children, className, onChange, value }: Props) {
         aria-hidden="true"
         className={classes(
           value ? 'translate-x-3.5' : 'translate-x-0',
-          'pointer-events-none inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+          'pointer-events-none inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out',
         )}
       />
     </HUISwitch>

diff --git a/src/ui/components/contract/DryRunResult.tsx b/src/ui/components/contract/DryRunResult.tsx
@@ -50,7 +50,7 @@ export function DryRunResult({
           <div
             className={classes(
               result.isErr || isError ? 'text-red-500' : 'text-green-500',
-              'mb-2 font-mono text-sm'
+              'mb-2 font-mono text-sm',
             )}
           >
             {prediction}

diff --git a/src/ui/components/contract/Interact.tsx b/src/ui/components/contract/Interact.tsx
@@ -153,7 +153,7 @@ export const InteractTab = ({
         isActive,
         userInput,
         api.registry,
-        predictedStorageDeposit
+        predictedStorageDeposit,
       ),
       value: message.isPayable ? (params[2] as Balance) : undefined,
     };
@@ -162,7 +162,7 @@ export const InteractTab = ({
 
     const extrinsic = tx[message.method](
       options,
-      ...transformUserInput(registry, message.args, argValues)
+      ...transformUserInput(registry, message.args, argValues),
     );
 
     newId.current = queue({

diff --git a/src/ui/components/contract/TransactionResult.tsx b/src/ui/components/contract/TransactionResult.tsx
@@ -18,7 +18,7 @@ function Events({ events }: { events: EventRecord[] }) {
       {events.map(({ event }) =>
         event.method === 'ContractEmitted' ? null : (
           <div key={event.method}>{`${event.section}::${event.method}`}</div>
-        )
+        ),
       )}
     </div>
   );

diff --git a/src/ui/components/form/ArgumentForm.tsx b/src/ui/components/form/ArgumentForm.tsx
@@ -18,7 +18,7 @@ interface Props extends React.HTMLAttributes<HTMLFormElement> {
 export function ArgumentForm({ args, argValues, registry, setArgValues, className }: Props) {
   const components = useMemo(
     () => args.map(arg => ({ arg, Component: findComponent(registry, arg.type) })),
-    [args, registry]
+    [args, registry],
   );
   return (
     <Form className="argument-form">

diff --git a/src/ui/components/form/Enum.tsx b/src/ui/components/form/Enum.tsx
@@ -25,7 +25,7 @@ export function Enum(props: Props) {
     (value: unknown): void => {
       _onChange({ [variants[variantIndex].name as string]: value });
     },
-    [_onChange, variants, variantIndex]
+    [_onChange, variants, variantIndex],
   );
 
   const setVariantIndex = useCallback(
@@ -38,7 +38,7 @@ export function Enum(props: Props) {
         });
       }
     },
-    [registry, accounts, _onChange, variants]
+    [registry, accounts, _onChange, variants],
   );
 
   return (

diff --git a/src/ui/components/form/Input.tsx b/src/ui/components/form/Input.tsx
@@ -35,7 +35,7 @@ export function Input({
         className={classes(
           'w-full rounded border-gray-200 bg-white text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300',
           isDisabled && 'dark:text-gray-500',
-          className
+          className,
         )}
         onChange={onChange}
         onFocus={onFocus}

diff --git a/src/ui/components/form/InputBn.tsx b/src/ui/components/form/InputBn.tsx
@@ -50,7 +50,7 @@ export function InputBn({ onChange, typeDef: { type } }: Props): JSX.Element {
         }
       }
     },
-    [max, min, onChange]
+    [max, min, onChange],
   );
 
   return (

diff --git a/src/ui/components/form/InputBytes.tsx b/src/ui/components/form/InputBytes.tsx
@@ -52,7 +52,7 @@ export function InputBytes({ onChange, className, length }: Props): React.ReactE
         // TODO shouldn't this unset the value in error and invalid case to prevent form submission?
       }
     },
-    [onChange, validate]
+    [onChange, validate],
   );
 
   return (