vega-frontend-monorepo/apps/trading/components/app-loader/index.tsx

114 lines
2.6 KiB
TypeScript
Raw Normal View History

feat(#507): Node Discovery * feat: add network-switcher lib * feat: add env variables for some deployed app urls * feat: add network processing to environment hoook * refactor: network handling * refactor: remove dialog from provider and add env setter * feat: add network switcher dialog to the trading app * refactor: add network redirect to dialog connect callback * fix: lint * feat: add network configuration files to static app * feat: update environments to use config file instead of static node url * refactor: split out network switcher utils * refactor: split up environment hook * fix: jsonify env variable for possible networks * fix: add formatter file * feat: add network loader component * feat: add network loader to the trading app * fix: assign correct global state to network swicther * feat: add status modal * feat: add network-switcher lib * feat: add env variables for some deployed app urls * feat: add network processing to environment hoook * refactor: network handling * refactor: remove dialog from provider and add env setter * feat: add network switcher dialog to the trading app * refactor: add network redirect to dialog connect callback * fix: lint * fix: jsonify env variable for possible networks * fix: add formatter file * fix: assign correct global state to network swicther * fix: failing tests from UI changes * feat: add environment validation * feat: add runtime validation for network configs * fix: readd node urls to envs to avoid breaking the apps for now * chore: rename network swicther lib to environmnet * fix: lint * feat: add tests for config hook * feat: add environment hook tests * fix: lint * fix: lint * feat: add environment hook tests * feat: add storage tests * fix: formet * feat: improve loading states * fix: format * fix: use router instead of window location * fix: rearrange network loader props and components * fix: remove FC type * fix: env validation * fix: untangle returns in network loader * fix: add teardown for env and localstorage * fix: add custom to env networks * fix: lint * fix: format * fix: lint * fix: remove env provider from simple trading app * fix: remove failing promise hacks * fix: some leftover format files * fix: remove network switcher from tsconf * fix: move Networks to libs/environment * fix: add defaults for ether env vars * feat: add tests for default ether env vars * fix: remove chain id env var from web3 container * fix: remove chain id from the environment * fix: format * fix: lint token * fix: lint env * fix: add comment to callout hack * fix: lint token again * fix: remove skip * fix: move addresses to token app * fix: improve schema validation errors and fix token app * fix: lint * fix: format * fix: format * fix: add network loaders to apps * fix: format * fix: remove logs * fix: cypress process errors * fix: change network loader hierarchy in token * fix: remove stray console.log * fix: revert test changes in simple trading app * fix: prefix env vars with NX Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * fix: improve schema validation errors and fix token app * fix: format * fix: disable lint rules for catch block any types * fix: format again * fix: remove redundant process.platform injections * fix: format Co-authored-by: Joe <joe@vega.xyz> Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-06-21 23:20:53 +00:00
import type { ReactNode } from 'react';
import { useEffect } from 'react';
import { NetworkLoader, useEnvironment } from '@vegaprotocol/environment';
import type { InMemoryCacheConfig } from '@apollo/client';
import {
useEthereumConfig,
createConnectors,
Web3Provider as Web3ProviderInternal,
useWeb3ConnectStore,
} from '@vegaprotocol/web3';
import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers';
interface AppLoaderProps {
children: ReactNode;
}
/**
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
* Component to handle any app initialization, startup queries and other things
* that must happen for it can be used
*/
export function AppLoader({ children }: AppLoaderProps) {
return (
<NetworkLoader
skeleton={<Splash>{t('Loading...')}</Splash>}
cache={cacheConfig}
>
{children}
</NetworkLoader>
);
}
export const Web3Provider = ({ children }: { children: ReactNode }) => {
const { config, loading, error } = useEthereumConfig();
const { ETHEREUM_PROVIDER_URL } = useEnvironment();
const [connectors, initializeConnectors] = useWeb3ConnectStore((store) => [
store.connectors,
store.initialize,
]);
useEffect(() => {
if (config?.chain_id) {
return initializeConnectors(
createConnectors(ETHEREUM_PROVIDER_URL, Number(config?.chain_id)),
Number(config.chain_id)
);
}
}, [config?.chain_id, ETHEREUM_PROVIDER_URL, initializeConnectors]);
return (
<AsyncRenderer
loading={loading}
error={error}
data={connectors}
noDataCondition={(d) => {
if (!d) return true;
return d.length < 1;
}}
>
<Web3ProviderInternal connectors={connectors}>
<>{children}</>
</Web3ProviderInternal>
</AsyncRenderer>
);
};
const cacheConfig: InMemoryCacheConfig = {
typePolicies: {
Account: {
keyFields: false,
fields: {
balanceFormatted: {},
},
},
Instrument: {
keyFields: false,
},
TradableInstrument: {
keyFields: ['instrument'],
},
Product: {
keyFields: ['settlementAsset', ['id']],
},
MarketData: {
keyFields: ['market', ['id']],
},
Node: {
keyFields: false,
},
Withdrawal: {
fields: {
pendingOnForeignChain: {
read: (isPending = false) => isPending,
},
},
},
ERC20: {
keyFields: ['contractAddress'],
},
PositionUpdate: {
keyFields: false,
},
AccountUpdate: {
keyFields: false,
},
Party: {
keyFields: false,
},
Fees: {
keyFields: false,
},
},
};