update to [email protected]

.vscode/settings.json

@@ -6,5 +6,8 @@
   "editor.defaultFormatter": "rome.rome",
   "[typescript]": {
     "editor.defaultFormatter": "rome.rome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "rome.rome"
   }
 }

packages/useink/package.json

@@ -12,7 +12,7 @@
     "React",
     "hooks"
   ],
-  "version": "1.4.4",
+  "version": "1.5.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "description": "A React hooks library for ink! contracts",

packages/useink/src/core/contracts/index.ts

@@ -4,4 +4,5 @@ export * from './decodeError.ts';
 export * from './getRegistryError.ts';
 export * from './toContractAbiMessage.ts';
 export * from './toRegistryErrorDecoded.ts';
+export * from './txPaymentInfo.ts';
 export * from './types.ts';

packages/useink/src/core/contracts/txPaymentInfo.ts

@@ -0,0 +1,30 @@
+import {
+  AccountId,
+  ContractOptions,
+  ContractPromise,
+  RuntimeDispatchInfo,
+  SignerOptions,
+} from '..';
+
+export async function txPaymentInfo(
+  contract: ContractPromise | undefined,
+  message: string,
+  caller: AccountId | string,
+  params?: unknown[],
+  options?: ContractOptions,
+  signerOptions?: Partial<SignerOptions>,
+): Promise<RuntimeDispatchInfo | undefined> {
+  const tx = contract?.tx?.[message];
+  if (!tx || !caller) return;
+
+  try {
+    const requiresNoArguments = tx.meta.args.length === 0;
+    return await (requiresNoArguments
+      ? tx(options || {})
+      : tx(options || {}, params)
+    ).paymentInfo(caller, signerOptions);
+  } catch (e: unknown) {
+    console.error(e);
+    return;
+  }
+}

packages/useink/src/react/hooks/contracts/useEvents.ts

@@ -9,7 +9,7 @@ export interface Events {
 }
 
 export const useEvents = (
-  contractAddress: string | undefined,
+  contractAddress: AccountId | string | undefined,
   filters?: string[],
 ): Events => {
   const { events, removeEvent } = useContext(EventsContext);

packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts

@@ -1,5 +1,9 @@
-import { RuntimeDispatchInfo, SignerOptions } from '../../../core/index';
-import { ChainContract, useDefaultCaller } from '../index';
+import { ChainContract, useDefaultCaller } from '..';
+import {
+  RuntimeDispatchInfo,
+  SignerOptions,
+  txPaymentInfo,
+} from '../../../core';
 import { useWallet } from '../wallets/useWallet.ts';
 import { CallOptions } from './types.ts';
 import { useCallback, useState } from 'react';
@@ -28,20 +32,22 @@ export function useTxPaymentInfo(
 
   const send = useCallback<Send>(
     async (params, options, signerOptions) => {
-      const tx = chainContract?.contract?.tx?.[message];
       const caller =
         account?.address || options?.defaultCaller ? defaultCaller : undefined;
 
-      if (!tx || !caller) return;
+      if (!chainContract?.contract || !caller) return;
 
       try {
         setIsSubmitting(true);
 
-        const requiresNoArguments = tx.meta.args.length === 0;
-        const paymentInfoResult = await (requiresNoArguments
-          ? tx(options || {})
-          : tx(options || {}, params)
-        ).paymentInfo(caller, signerOptions);
+        const paymentInfoResult = await txPaymentInfo(
+          chainContract.contract,
+          message,
+          caller,
+          params,
+          options,
+          signerOptions,
+        );
 
         setResult(paymentInfoResult);
         setIsSubmitting(false);

packages/useink/src/utils/helpers/parseUnits.ts

@@ -1,4 +1,4 @@
-import { BN } from '@polkadot/util';
+import { BN } from '..';
 
 export const stringNumberToBN = (valWithCommas: string): BN => {
   const v = valWithCommas.split(',').join('');

packages/useink/src/utils/index.ts

@@ -1,6 +1,7 @@
-export { formatBalance } from '@polkadot/util';
+export * from '@polkadot/util';
 
-export * from './contracts/index';
-export * from './helpers/index';
-export * from './pick/index';
-export * from './types/index';
+export * from './contracts';
+export * from './substrate';
+export * from './helpers';
+export * from './pick';
+export * from './types';

packages/useink/src/utils/substrate/bnToBalance.ts

@@ -0,0 +1,7 @@
+import { BN } from '..';
+import { ApiBase, Balance } from '../../core';
+
+export const bnToBalance = (
+  api: Pick<ApiBase<'promise'>, 'createType'> | undefined,
+  bn: BN | undefined,
+): Balance | undefined => api?.createType('Balance', bn);

packages/useink/src/utils/substrate/index.ts

@@ -0,0 +1 @@
+export * from './bnToBalance';

playground/src/components/pg-home/HomePage.tsx

@@ -38,13 +38,19 @@ import {
 } from 'useink/utils';
 
 const CONTRACTS_ROCOCO_ADDRESS =
-  '5CjfqiydebzW7uXjGhfvA1Z5ABEjH6uF17ZBNnK9LMadCgSX';
+  '5G31GiBqWPFCm8S9cknY7UWAPA8SwNJJdoG4RrmtVDQyrk7Y';
 const SHIBUYA_CONTRACT_ADDRESS =
-  'YBAkUAjocSTwdJ7Wv5mZtrjMCiCmCqtsihsdSv2EanbAc3k';
-
+  'XtH77i6CYHSSg7tFerUMCSWifBcAz2gewDXeyQNCbgRXHs8';
+
+interface Happy {
+  mood: string;
+}
+interface BadMood {
+  BadMood: { mood: string };
+}
 // RustResult<T, E> is a convenience type to define { Ok?: T, Err?: E }, returned by calls
 // to contracts that return a Result<T, E>
-type MoodResult = RustResult<{ mood: string }, { BadMood: { mood: string } }>;
+type MoodResult = RustResult<Happy, BadMood>;
 
 export const HomePage: React.FC = () => {
   const { account, accounts, setAccount, connect, disconnect } = useWallet();
@@ -56,7 +62,7 @@ export const HomePage: React.FC = () => {
   const { rpcs, setChainRpc } = useChainRpcList('astar');
   const astarRpc = useChainRpc('astar');
   const get = useCall<boolean>(cRococoContract, 'get');
-  const getSubscription = useCallSubscription<boolean>(
+  const getSubcription = useCallSubscription<boolean>(
     cRococoContract,
     'get',
     [],
@@ -75,13 +81,14 @@ export const HomePage: React.FC = () => {
   );
   const shibuyaFlipTx = useTx(shibuyaContract, 'flip');
   useTxNotifications(shibuyaFlipTx); // Add a notification on tx status changes
-  const shibuyaGetSubscription = useCallSubscription<boolean>(
+  const shibuyaGetSubcription = useCallSubscription<boolean>(
     shibuyaContract,
     'get',
   );
   const { addNotification } = useNotifications();
   useEventSubscription(cRococoContract);
   const { events } = useEvents(cRococoContract?.contract?.address);
+  const option = useCall<Happy | null>(cRococoContract, 'option');
 
   // Use helper functions to quickly pick values from a Result<T, E>
   // Instead of doing something like this:
@@ -172,6 +179,7 @@ export const HomePage: React.FC = () => {
                   {installedWallets.map((w) => (
                     <li key={w.title}>
                       <button
+                        type='button'
                         onClick={() => connect(w.extensionName)}
                         className='flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
                       >
@@ -199,9 +207,9 @@ export const HomePage: React.FC = () => {
                     <li key={w.title}>
                       <a
                         href={w.installUrl}
+                        rel='noreferrer'
                         target='_blank'
                         className='flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
-                        rel='noreferrer'
                       >
                         <img
                           className='w-12 mr-2'
@@ -221,6 +229,7 @@ export const HomePage: React.FC = () => {
               <>
                 <li>
                   <button
+                    type='button'
                     onClick={disconnect}
                     className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
                   >
@@ -241,6 +250,7 @@ export const HomePage: React.FC = () => {
                       <li key={acc.address} className='flex flex-col'>
                         <b>Connect to {acc.name ? acc.name : 'wallet'}</b>
                         <button
+                          type='button'
                           onClick={() => setAccount(acc)}
                           className='rounded-2xl text-white px-4 py-2 mt-2 bg-blue-500 hover:bg-blue-600 transition duration-75'
                         >
@@ -286,6 +296,7 @@ export const HomePage: React.FC = () => {
                 {rpcs.map((rpc) => (
                   <li key={rpc} className='p-0'>
                     <button
+                      type='button'
                       className='rounded-2xl w-full text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
                       disabled={rpc === astarRpc}
                       onClick={() => setChainRpc(rpc, 'astar')}
@@ -322,6 +333,7 @@ export const HomePage: React.FC = () => {
 
             <li className='flex items-center gap-4'>
               <button
+                type='button'
                 onClick={() => get.send([], { defaultCaller: true })}
                 disabled={get.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -337,12 +349,13 @@ export const HomePage: React.FC = () => {
             <li className='flex items-center gap-4'>
               <h3 className='text-xl'>
                 get() will update on new blocks:{' '}
-                {pickDecoded(getSubscription.result)?.toString() || '--'}
+                {pickDecoded(getSubcription.result)?.toString() || '--'}
               </h3>
             </li>
 
             <li className='flex flex-col gap-4'>
               <button
+                type='button'
                 onClick={() => flipTx.signAndSend()}
                 disabled={shouldDisable(flipTx) || !account}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -367,6 +380,7 @@ export const HomePage: React.FC = () => {
               </h3>
 
               <button
+                type='button'
                 onClick={() => flipTx.resetState()}
                 disabled={
                   shouldDisable(flipTx) ||
@@ -385,10 +399,11 @@ export const HomePage: React.FC = () => {
 
               <h3 className='text-xl'>
                 Shibuya Flipped:{' '}
-                {pickDecoded(shibuyaGetSubscription.result)?.toString() || '--'}
+                {pickDecoded(shibuyaGetSubcription.result)?.toString() || '--'}
               </h3>
 
               <button
+                type='button'
                 onClick={() => shibuyaFlipTx.signAndSend()}
                 disabled={shouldDisable(shibuyaFlipTx) || !account}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -403,6 +418,7 @@ export const HomePage: React.FC = () => {
               </h3>
 
               <button
+                type='button'
                 onClick={() => shibuyaFlipTx.resetState()}
                 disabled={
                   shouldDisable(shibuyaFlipTx) ||
@@ -416,6 +432,7 @@ export const HomePage: React.FC = () => {
 
             <li className='flex flex-col gap-4'>
               <button
+                type='button'
                 onClick={() => flipDryRun.send([], { defaultCaller: true })}
                 disabled={flipDryRun.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -435,6 +452,7 @@ export const HomePage: React.FC = () => {
 
             <li className='flex flex-col gap-4'>
               <button
+                type='button'
                 onClick={() =>
                   flipPaymentInfo.send([], { defaultCaller: true })
                 }
@@ -457,6 +475,7 @@ export const HomePage: React.FC = () => {
 
             <li className='flex flex-col gap-4'>
               <button
+                type='button'
                 onClick={() => panic.send([], { defaultCaller: true })}
                 disabled={panic.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -479,6 +498,7 @@ export const HomePage: React.FC = () => {
 
             <li className='flex flex-col gap-4'>
               <button
+                type='button'
                 onClick={() => assertBoom.send([], { defaultCaller: true })}
                 disabled={assertBoom.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -505,6 +525,7 @@ export const HomePage: React.FC = () => {
                 odd number will return an Error
               </h3>
               <button
+                type='button'
                 onClick={() => mood.send([0], { defaultCaller: true })}
                 disabled={mood.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -513,6 +534,7 @@ export const HomePage: React.FC = () => {
               </button>
 
               <button
+                type='button'
                 onClick={() => mood.send([1], { defaultCaller: true })}
                 disabled={mood.isSubmitting}
                 className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
@@ -526,6 +548,39 @@ export const HomePage: React.FC = () => {
                 {badMood?.BadMood.mood}
               </h3>
             </li>
+
+            <li className='flex flex-col gap-4'>
+              <h3 className='text-xl'>
+                Handle Options. An even number will return a Some(Happy), and an
+                odd number will return None
+              </h3>
+              <button
+                type='button'
+                onClick={() => option.send([0], { defaultCaller: true })}
+                disabled={option.isSubmitting}
+                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+              >
+                {option.isSubmitting
+                  ? 'Getting option result...'
+                  : 'Get Some(Happy) result'}
+              </button>
+
+              <button
+                type='button'
+                onClick={() => option.send([1], { defaultCaller: true })}
+                disabled={option.isSubmitting}
+                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+              >
+                {option.isSubmitting
+                  ? 'Getting option result...'
+                  : 'Get Option None Response'}
+              </button>
+
+              <h3 className='text-xl'>
+                Option: {!option.result && '--'}
+                {JSON.stringify(pickDecoded(option.result))}
+              </h3>
+            </li>
           </ul>
         </div>
       </div>