d0ec016adc
* [#151] Add orderbook * [#151] Add orderbook components * [#151] Add market-depth data provider * [#151] Add orderbook manager * [#151] handle market depth updates in orderbook manager * [#151] Fix PageQueryContainer usage of AsyncRenderer * [#151] Move data handling logig out from orderbook manager * [#151] Use mocked data, fix data issues * [#151] Add compact order book data unit tests * [#151] Add updateData unit tests * [#151] Add updateCompactedData unit tests * [#151] update cummulative vol on update, move data ref handling from effect to manager * [#151] Update cummulative vol on update, fixes * [#151] Optimieze orderbook ag-grid render * [#151] Replace ag-grid with orderbook component * [#151] Use react memo to optimize orderbook rendering * [#151] Fix cummulative vol computation on compacted data update * [#151] Add resolution controls * [#151] Fix cumulative spelling mistake * [#151] Use number instead of string for cumulative values * [#151] Expose restart callback in useDataProvider hook * [#151] Update empty cumulative values * [#151] Add horizontal line under header in orderbook * [#151] reuse orderbook data in market-depth chart * [#151] restart market depth provider on sequenceNumber gap * [#151] use throttle in orderbook and depth-chart * [#151] Add comments, refactor data functions * [#151] Add comments, refactor data functions * [#151] move orderbook and depth-chart libs to market-depth
72 lines
1.7 KiB
TypeScript
72 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}
|
|
render={(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}
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const isERC20Asset = (asset: DepositPage_assets): asset is Asset => {
|
|
if (asset.source.__typename === 'ERC20') {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|