From 13cb0cb3a0ecd04a9bdd60785034922a613b45f8 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 17 Jan 2020 13:55:14 +0100 Subject: [PATCH] No withCall for all functional (#2042) * No withCall for all functional * Linting * Remove HOC, unneeded eslint override * Cleanups --- .../src/Contracts/ValidateAddr.tsx | 29 +++++-------- .../app-contracts/src/Contracts/index.tsx | 41 ++++++++----------- packages/react-query/src/Bonded.tsx | 36 +++++++--------- 3 files changed, 42 insertions(+), 64 deletions(-) diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx index bfcdfd9ac91..b0065dac1d2 100644 --- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx +++ b/packages/app-contracts/src/Contracts/ValidateAddr.tsx @@ -1,27 +1,26 @@ -/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2020 @polkadot/app-contracts authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. import { ContractInfo } from '@polkadot/types/interfaces'; -import { ApiProps } from '@polkadot/react-api/types'; import React, { useEffect, useState } from 'react'; import { Option } from '@polkadot/types'; -import { withCalls } from '@polkadot/react-api/hoc'; +import { useApi, useCall } from '@polkadot/react-hooks'; import { InfoForInput } from '@polkadot/react-components'; import keyring from '@polkadot/ui-keyring'; import { useTranslation } from '../translate'; -interface Props extends ApiProps { +interface Props { address?: string | null; - contracts_contractInfoOf?: Option; onChange: (isValid: boolean) => void; } -function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props): React.ReactElement | null { +export default function ValidateAddr ({ address, onChange }: Props): React.ReactElement | null { const { t } = useTranslation(); + const { api } = useApi(); + const contractInfo = useCall>(api.query.contracts.contractInfoOf, [address]); const [isAddress, setIsAddress] = useState(false); const [isStored, setIsStored] = useState(false); @@ -35,8 +34,8 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props): }, [address]); useEffect((): void => { - setIsStored(!!contracts_contractInfoOf && contracts_contractInfoOf.isSome); - }, [contracts_contractInfoOf]); + setIsStored(!!contractInfo?.isSome); + }, [contractInfo]); useEffect((): void => { onChange(isAddress && isStored); @@ -48,18 +47,10 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props): return ( - { - isAddress - ? t('Unable to find deployed contract code at the specified address') - : t('The value is not in a valid address format') + {isAddress + ? t('Unable to find deployed contract code at the specified address') + : t('The value is not in a valid address format') } ); } - -export default withCalls( - ['query.contracts.contractInfoOf', { - fallbacks: ['query.contract.contractInfoOf'], - paramName: 'address' - }] -)(ValidateAddr); diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx index e5e05f1ad1d..104b409ec86 100644 --- a/packages/app-contracts/src/Contracts/index.tsx +++ b/packages/app-contracts/src/Contracts/index.tsx @@ -2,14 +2,14 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { ApiProps } from '@polkadot/react-api/types'; import { StringOrNull } from '@polkadot/react-components/types'; -import { ComponentProps } from '../types'; +import { ComponentProps as Props } from '../types'; import React, { useState, useEffect } from 'react'; +import { ApiPromise } from '@polkadot/api'; import { PromiseContract as ApiContract } from '@polkadot/api-contract'; -import { withApi } from '@polkadot/react-api/hoc'; import { Button, CardGrid } from '@polkadot/react-components'; +import { useApi } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; import Add from './Add'; @@ -17,28 +17,25 @@ import ContractCard from './Contract'; import Call from './Call'; import { getContractForAddress } from './util'; -interface Props extends ComponentProps, ApiProps {} - -function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] { +function filterContracts (api: ApiPromise, { accounts, contracts: keyringContracts }: Props): ApiContract[] { return accounts && keyringContracts && Object.keys(keyringContracts) .map((address): ApiContract | null => getContractForAddress(api, address)) .filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[]; } -function Contracts (props: Props): React.ReactElement { +export default function Contracts (props: Props): React.ReactElement { const { t } = useTranslation(); + const { api } = useApi(); const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy } = props; - // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state; - - const [contracts, setContracts] = useState(filterContracts(props)); + const [contracts, setContracts] = useState(filterContracts(api, props)); const [callContractIndex, setCallContractIndex] = useState(0); const [callMessageIndex, setCallMessageIndex] = useState(0); const [isAddOpen, setIsAddOpen] = useState(false); const [isCallOpen, setIsCallOpen] = useState(false); useEffect((): void => { - setContracts(filterContracts(props)); - }, [accounts, keyringContracts]); + setContracts(filterContracts(api, props)); + }, [accounts, api, keyringContracts]); let callContract = contracts[callContractIndex] || null; @@ -98,16 +95,14 @@ function Contracts (props: Props): React.ReactElement { } > - {contracts.map((contract: ApiContract, index): React.ReactNode => { - return ( - - ); - })} + {contracts.map((contract: ApiContract, index): React.ReactNode => ( + + ))} { ); } - -export default withApi(Contracts); diff --git a/packages/react-query/src/Bonded.tsx b/packages/react-query/src/Bonded.tsx index 3c826d544ee..adc5787caca 100644 --- a/packages/react-query/src/Bonded.tsx +++ b/packages/react-query/src/Bonded.tsx @@ -3,44 +3,38 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { BareProps, CallProps } from '@polkadot/react-api/types'; +import { BareProps } from '@polkadot/react-api/types'; import { AccountId, AccountIndex, Address, StakingLedger } from '@polkadot/types/interfaces'; import React from 'react'; - -import { withCalls } from '@polkadot/react-api/hoc'; +import { useApi, useCall } from '@polkadot/react-hooks'; import FormatBalance from './FormatBalance'; -interface Props extends BareProps, CallProps { +interface Props extends BareProps { children?: React.ReactNode; params?: AccountId | AccountIndex | Address | string | Uint8Array | null; label?: React.ReactNode; - staking_ledger?: StakingLedger | null; } -export function BondedDisplay ({ children, className, label, staking_ledger }: Props): React.ReactElement { +export default function BondedDisplay ({ children, className, label, params }: Props): React.ReactElement { + const { api } = useApi(); + const controllerId = useCall(api.query.staking.bonded, [params], { + transform: (value): AccountId | null => + value.unwrapOr(null) + }); + const stakingLedger = useCall(api.query.staking.ledger, [controllerId], { + transform: (value): StakingLedger | null => + value.unwrapOr(null) + }); + return ( {children} ); } - -export default withCalls( - ['query.staking.bonded', { - paramName: 'params', - propName: 'controllerId', - transform: (value): AccountId | null => - value.unwrapOr(null) - }], - ['query.staking.ledger', { - paramName: 'controllerId', - transform: (value): StakingLedger | null => - value.unwrapOr(null) - }] -)(BondedDisplay);