vega-frontend-monorepo/apps/trading/pages/portfolio/deposit/deposit-container.tsx
Matthew Russell f244cd07d4
Feat/103 deposits (#143)
* add web3 provider using web3-react package

* add env setup, add guard for incorrect chain id

* add lib for web3-provider

* make wallet and ethereum connect dialogs look more consistent

* add setup tests file for jest-dom

* remove chain id config and just use appChainId prop, add disconnect button to invalid chainId state

* switch handling of connect dialog state to the consuming app

* rename web3-provider package to just web3

* envs for each environment so we can specify chainId

* make web3container enforce connection before rendering childen

* add web3 provider using web3-react package

* make web3container enforce connection before rendering childen

* add container for getting network params

* Move ethereum config query to web3 container

* add basic deposit form elements

* add queries required for deposits, add asset default

* add bridge contract and deposit transaction

* break txhash

* restrict etherscan link props, use etherscan link in transaction dialogs

* use smart-contracts-sdk

* split hooks and components into different files, fix find deposit logic, add styles and progress for tx dialogs

* fix text colors for dark mode

* improve tx dialogs, rename deposit query

* position use buttons, fix select validation

* fix type errors after not being in strict mode, add allowance checking

* add deposit-limits component, fix types now that strict mode is enabled

* make contract hooks have a single instance

* split out dialogs into separate files, fix icon alignment

* improve error types for use transaction hook, add number save min and max for the amount input

* add validation for ethereum and vega addresses

* add unit test for deposit form component

* add icons and shared dialog styles so it better matches order transaction dialog

* fix underline class, reset finalized deposit

* fix type imports, use i18n function, regen types

* only pass contract address to token contract hook

* add vega env, refactor so retrieving asset contract address logic isn't duplicated

* add faucet functionality, combine dialogs into single transaction-dialog

* combine rendering logic into single func of transaction dialog, rever contract hooks to just useMemo

* use to field rather than connected key

* fix props and imports in deposit form test

* share faucetable condition, pass it to token contract

* pass contracts in as params to hooks to avoid multiple contract instances

* refetch balance in wallet after deposit, add comments

* use hook state for tracking deposit via partyid, add test for use ethereum transaction hook

* add deposits lib

* add last smart contract sdk package

* fix asset import in test

* tidy up ts-ignores

* pass arg for faucetable token contract

* add provider url to env vars and use in place of infura id, also update web3-connector to only allow the chain permitted by the app

* add type guard for erc20 assets

* fix intent shadow helper function, use arrow function for isEthereumError

* update etherscan link to use env vars for url base

* rename deposit related hooks to indicate read vs write calls

* move ethereum error class and helpers to react-helpers

* add use-ethereum-read-contract hook to contain fetch logic

* remove unused import

* move validation to lib, add hex check for vega public key

* use map for transaction modal states, pass confirmed prop to transaction dialog for deposits

* remove unused import for classnames
2022-04-06 10:34:51 -07:00

71 lines
1.7 KiB
TypeScript

import type { EthereumConfig } from '../../../components/web3-container/web3-container';
import { gql } from '@apollo/client';
import { PageQueryContainer } from '../../../components/page-query-container';
import type {
DepositPage,
DepositPage_assets,
} from './__generated__/DepositPage';
import type { Asset } from '@vegaprotocol/deposits';
import { DepositManager } from '@vegaprotocol/deposits';
import { t } from '@vegaprotocol/react-helpers';
import { Splash } from '@vegaprotocol/ui-toolkit';
const DEPOSIT_PAGE_QUERY = gql`
query DepositPage {
assets {
id
symbol
name
decimals
source {
... on ERC20 {
contractAddress
}
}
}
}
`;
interface DepositContainerProps {
ethereumConfig: EthereumConfig;
assetId?: string;
}
/**
* Fetches data required for the Deposit page
*/
export const DepositContainer = ({
ethereumConfig,
assetId,
}: DepositContainerProps) => {
return (
<PageQueryContainer<DepositPage> query={DEPOSIT_PAGE_QUERY}>
{(data) => {
if (!data.assets?.length) {
return (
<Splash>
<p>{t('No assets on this network')}</p>
</Splash>
);
}
return (
<DepositManager
bridgeAddress={ethereumConfig.collateral_bridge_contract.address}
requiredConfirmations={ethereumConfig.confirmations}
assets={data.assets.filter(isERC20Asset)}
initialAssetId={assetId}
/>
);
}}
</PageQueryContainer>
);
};
const isERC20Asset = (asset: DepositPage_assets): asset is Asset => {
if (asset.source.__typename === 'ERC20') {
return true;
}
return false;
};