bdfcedae72
* feat: created useAssetIds and useAssetInfo hook * feat: created pay with asset component * feat: add paywith asset component with Transfer modal * fix: signer options as prop * fix: payment info * feat: created PayWithAsset provider and integrated with transfer form * chore: rename variable * fix: PayWithAsset provider wrapping * feat: integrate PayWithAsset context and enhance asset info fetching * fix: some build errors * refactor: update imports and simplify getFeeAssetLocation function * refactor: simplify component structure and update PayWithAsset import paths * fix: all build errors * fix: avoid redundant type * feat: added translation * feat: enhance fee payment info & fee asset handling * fix: translations ordering * fix: remove redundant types and hooks * chore: added statemine chain * refactor: generalize fee acceptance check for non-native assets * fix: remove constants and generalize palletIndex
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
// Copyright 2017-2025 @polkadot/apps authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import type { ThemeDef } from '@polkadot/react-components/types';
|
|
import type { KeyringStore } from '@polkadot/ui-keyring/types';
|
|
|
|
import React, { Suspense, useEffect, useState } from 'react';
|
|
import { HashRouter } from 'react-router-dom';
|
|
import { ThemeProvider } from 'styled-components';
|
|
|
|
import { ApiCtxRoot } from '@polkadot/react-api';
|
|
import { ApiStatsCtxRoot, BlockAuthorsCtxRoot, BlockEventsCtxRoot, KeyringCtxRoot, PayWithAssetCtxRoot, QueueCtxRoot, WindowSizeCtxRoot } from '@polkadot/react-hooks';
|
|
import { settings } from '@polkadot/ui-settings';
|
|
|
|
import Apps from './Apps.js';
|
|
|
|
interface Props {
|
|
isElectron: boolean;
|
|
store?: KeyringStore;
|
|
}
|
|
|
|
function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
|
|
const theme = uiTheme === 'dark'
|
|
? 'dark'
|
|
: 'light';
|
|
|
|
document?.documentElement?.setAttribute('data-theme', theme);
|
|
|
|
return { theme };
|
|
}
|
|
|
|
function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
|
|
const [theme, setTheme] = useState(() => createTheme(settings));
|
|
|
|
useEffect((): void => {
|
|
settings.on('change', (settings) => setTheme(createTheme(settings)));
|
|
}, []);
|
|
|
|
// The ordering here is critical. It defines the hierarchy of dependencies,
|
|
// i.e. Block* depends on Api. Certainly no cross-deps allowed
|
|
return (
|
|
<Suspense fallback='...'>
|
|
<ThemeProvider theme={theme}>
|
|
<QueueCtxRoot>
|
|
<ApiCtxRoot
|
|
apiUrl={settings.apiUrl}
|
|
isElectron={isElectron}
|
|
store={store}
|
|
>
|
|
<KeyringCtxRoot>
|
|
<ApiStatsCtxRoot>
|
|
<BlockAuthorsCtxRoot>
|
|
<BlockEventsCtxRoot>
|
|
<HashRouter>
|
|
<WindowSizeCtxRoot>
|
|
<PayWithAssetCtxRoot>
|
|
<Apps />
|
|
</PayWithAssetCtxRoot>
|
|
</WindowSizeCtxRoot>
|
|
</HashRouter>
|
|
</BlockEventsCtxRoot>
|
|
</BlockAuthorsCtxRoot>
|
|
</ApiStatsCtxRoot>
|
|
</KeyringCtxRoot>
|
|
</ApiCtxRoot>
|
|
</QueueCtxRoot>
|
|
</ThemeProvider>
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
export default React.memo(Root);
|