feature: portfolio api integration and updates

packages/yoroi-extension/.eslintrc.js

@@ -10,7 +10,11 @@ module.exports = {
  legacyDecorators: true,
  },
  },
- extends: ['airbnb', 'prettier'],
+ extends: [
+ 'airbnb',
+ 'prettier',
+ 'plugin:@typescript-eslint/recommended', // Enable recommended rules from the TypeScript plugin
+ ],
  env: {
  browser: true,
  mocha: true,
@@ -125,7 +129,16 @@ module.exports = {
  camelcase: 0,
  'react/jsx-curly-brace-presence': 0,
  },
- plugins: ['import', 'promise', 'react', 'flowtype', 'no-floating-promise', 'prettier', 'eslint-plugin-simple-import-sort'],
+ plugins: [
+ 'import',
+ 'promise',
+ 'react',
+ 'flowtype',
+ 'no-floating-promise',
+ 'prettier',
+ 'eslint-plugin-simple-import-sort',
+ '@typescript-eslint', // Add TypeScript plugin
+ ],
  globals: {
  chrome: true,
  API: true,

packages/yoroi-extension/app/Routes.js

@@ -28,9 +28,13 @@ import NFTsWrapper from './containers/wallet/NFTsWrapper';
 import Wallet from './containers/wallet/Wallet';
 import RestoreWalletPage, { RestoreWalletPagePromise } from './containers/wallet/restore/RestoreWalletPage';
 
+// GOLABL Context
+// $FlowIgnore: suppressing this error
+import { CurrencyProvider } from './UI/context/CurrencyContext';
+
 // New UI pages
 // $FlowIgnore: suppressing this error
-import { createCurrrentWalletInfo } from './UI/features/governace/common/helpers';
+import { createCurrrentWalletInfo } from './UI/utils/createCurrentWalletInfo';
 // $FlowIgnore: suppressing this error
 import { GovernanceContextProvider } from './UI/features/governace/module/GovernanceContextProvider';
 // $FlowIgnore: suppressing this error
@@ -196,132 +200,139 @@ declare var CONFIG: ConfigType;
 
 export const Routes = (stores: StoresMap, actions: ActionsMap): Node => {
  const queryClient = new QueryClient();
-
  return (
  <QueryClientProvider client={queryClient}>
  <Suspense fallback={null}>
  <Switch>
- <Route exact path={ROUTES.ROOT} component={props => <LoadingPage {...props} stores={stores} actions={actions} />} />
- <Route
- exact
- path={ROUTES.NIGHTLY_INFO}
- component={props => <NightlyPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.PROFILE.LANGUAGE_SELECTION}
- component={props => <LanguageSelectionPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.PROFILE.COMPLEXITY_LEVEL}
- component={props => <ComplexityLevelPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.PROFILE.TERMS_OF_USE}
- component={props => <TermsOfUsePage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.PROFILE.URI_PROMPT}
- component={props => <UriPromptPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.PROFILE.OPT_FOR_ANALYTICS}
- component={props => <OptForAnalyticsPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.MY_WALLETS}
- component={props => <MyWalletsPage {...props} stores={stores} actions={actions} />}
- />
- <Route exact path={ROUTES.STAKING} component={props => <StakingPage {...props} stores={stores} actions={actions} />} />
- <Route
- path={ROUTES.ASSETS.ROOT}
- component={props => wrapAssets({ ...props, stores, actions }, AssetsSubpages(stores, actions))}
- />
- <Route
- path={ROUTES.NFTS.ROOT}
- component={props => wrapNFTs({ ...props, stores, actions }, NFTsSubPages(stores, actions))}
- />
- <Route
- exact
- path={ROUTES.WALLETS.ADD}
- component={props => <AddWalletPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.WALLETS.RESTORE_WALLET}
- component={props => <RestoreWalletPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.WALLETS.CREATE_NEW_WALLET}
- component={props => <CreateWalletPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.DAPP_CONNECTOR.CONNECTED_WEBSITES}
- component={props => <ConnectedWebsitesPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.EXPERIMENTAL.YOROI_PALETTE}
- component={props => <YoroiPalettePage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.EXPERIMENTAL.THEMES}
- component={props => <YoroiThemesPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- path={ROUTES.WALLETS.ROOT}
- component={props => wrapWallet({ ...props, stores, actions }, WalletsSubpages(stores, actions))}
- />
- <Route
- path={ROUTES.SETTINGS.ROOT}
- component={props => wrapSettings({ ...props, stores, actions }, SettingsSubpages(stores, actions))}
- />
- <Route
- path={ROUTES.SWAP.ROOT}
- component={props => wrapSwap({ ...props, stores, actions }, SwapSubpages(stores, actions))}
- />
- <Route path={ROUTES.TRANSFER.ROOT} component={props => <Transfer {...props} stores={stores} actions={actions} />} />
- <Route
- exact
- path={ROUTES.SEND_FROM_URI.ROOT}
- component={props => <URILandingPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.OAUTH_FROM_EXTERNAL.DROPBOX}
- component={props => <OAuthDropboxPage {...props} stores={stores} actions={actions} />}
- />
- <Route exact path={ROUTES.SWITCH} component={props => <WalletSwitch {...props} stores={stores} actions={actions} />} />
- <Route
- exact
- path={ROUTES.REVAMP.CATALYST_VOTING}
- component={props => <VotingPage {...props} stores={stores} actions={actions} />}
- />
- <Route
- exact
- path={ROUTES.EXCHANGE_END}
- component={props => <ExchangeEndPage {...props} stores={stores} actions={actions} />}
- />
-
- {/* NEW UI Routes */}
- <Route
- path={ROUTES.Governance.ROOT}
- component={props => wrapGovernance({ ...props, stores, actions }, GovernanceSubpages(stores, actions))}
- />
- <Route
- path={ROUTES.PORTFOLIO.ROOT}
- component={props => wrapPortfolio({ ...props, stores, actions }, PortfolioSubpages(stores, actions))}
- />
-
- <Redirect to={ROUTES.MY_WALLETS} />
+ <Route exact path={ROUTES.ROOT} component={props => <LoadingPage {...props} stores={stores} actions={actions} />} />
+ <Route
+ exact
+ path={ROUTES.NIGHTLY_INFO}
+ component={props => <NightlyPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.PROFILE.LANGUAGE_SELECTION}
+ component={props => <LanguageSelectionPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.PROFILE.COMPLEXITY_LEVEL}
+ component={props => <ComplexityLevelPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.PROFILE.TERMS_OF_USE}
+ component={props => <TermsOfUsePage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.PROFILE.URI_PROMPT}
+ component={props => <UriPromptPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.PROFILE.OPT_FOR_ANALYTICS}
+ component={props => <OptForAnalyticsPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.MY_WALLETS}
+ component={props => <MyWalletsPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.STAKING}
+ component={props => <StakingPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ path={ROUTES.ASSETS.ROOT}
+ component={props => wrapAssets({ ...props, stores, actions }, AssetsSubpages(stores, actions))}
+ />
+ <Route
+ path={ROUTES.NFTS.ROOT}
+ component={props => wrapNFTs({ ...props, stores, actions }, NFTsSubPages(stores, actions))}
+ />
+ <Route
+ exact
+ path={ROUTES.WALLETS.ADD}
+ component={props => <AddWalletPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.WALLETS.RESTORE_WALLET}
+ component={props => <RestoreWalletPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.WALLETS.CREATE_NEW_WALLET}
+ component={props => <CreateWalletPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.DAPP_CONNECTOR.CONNECTED_WEBSITES}
+ component={props => <ConnectedWebsitesPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.EXPERIMENTAL.YOROI_PALETTE}
+ component={props => <YoroiPalettePage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.EXPERIMENTAL.THEMES}
+ component={props => <YoroiThemesPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ path={ROUTES.WALLETS.ROOT}
+ component={props => wrapWallet({ ...props, stores, actions }, WalletsSubpages(stores, actions))}
+ />
+ <Route
+ path={ROUTES.SETTINGS.ROOT}
+ component={props => wrapSettings({ ...props, stores, actions }, SettingsSubpages(stores, actions))}
+ />
+ <Route
+ path={ROUTES.SWAP.ROOT}
+ component={props => wrapSwap({ ...props, stores, actions }, SwapSubpages(stores, actions))}
+ />
+ <Route path={ROUTES.TRANSFER.ROOT} component={props => <Transfer {...props} stores={stores} actions={actions} />} />
+ <Route
+ exact
+ path={ROUTES.SEND_FROM_URI.ROOT}
+ component={props => <URILandingPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.OAUTH_FROM_EXTERNAL.DROPBOX}
+ component={props => <OAuthDropboxPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.SWITCH}
+ component={props => <WalletSwitch {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.REVAMP.CATALYST_VOTING}
+ component={props => <VotingPage {...props} stores={stores} actions={actions} />}
+ />
+ <Route
+ exact
+ path={ROUTES.EXCHANGE_END}
+ component={props => <ExchangeEndPage {...props} stores={stores} actions={actions} />}
+ />
+
+ {/* NEW UI Routes */}
+ <Route
+ path={ROUTES.Governance.ROOT}
+ component={props => wrapGovernance({ ...props, stores, actions }, GovernanceSubpages(stores, actions))}
+ />
+ <Route
+ path={ROUTES.PORTFOLIO.ROOT}
+ component={props => wrapPortfolio({ ...props, stores, actions }, PortfolioSubpages(stores, actions))}
+ />
+
+ <Redirect to={ROUTES.MY_WALLETS} />
  </Switch>
  </Suspense>
  </QueryClientProvider>
@@ -499,6 +510,8 @@ const GovernanceSubpages = (stores, actions) => (
 
 export function wrapSwap(swapProps: StoresAndActionsProps, children: Node): Node {
  // const queryClient = new QueryClient();
+
+
  const loader = (
  <FullscreenLayout bottomPadding={0}>
  <Stack alignItems="center" justifyContent="center" height="50vh">
@@ -576,9 +589,15 @@ export function wrapGovernance(governanceProps: StoresAndActionsProps, children:
  );
 }
 export function wrapPortfolio(portfolioProps: StoresAndActionsProps, children: Node): Node {
+ const currentWalletInfo = createCurrrentWalletInfo(portfolioProps.stores);
+
  return (
- <PortfolioContextProvider settingFiatPairUnit={portfolioProps.stores.profile.unitOfAccount}>
- <Suspense fallback={null}>{children}</Suspense>
- </PortfolioContextProvider>
+ <CurrencyProvider currency={portfolioProps.stores.profile.unitOfAccount.currency || 'USD'}>
+ <PortfolioContextProvider settingFiatPairUnit={portfolioProps.stores.profile.unitOfAccount} currentWallet={currentWalletInfo}>
+ <Suspense fallback={null} settingFiatPairUnit={portfolioProps.stores.profile.unitOfAccount}>
+ {children}
+ </Suspense>
+ </PortfolioContextProvider>
+ </CurrencyProvider>
  );
 }

packages/yoroi-extension/app/UI/context/CurrencyContext.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { configCurrencies } from '../types/other';
+import { supportedCurrencies } from '../utils/constants';
+import { usePrimaryTokenActivity } from '../utils/usePrimaryTokenActivity';
+
+const CurrencyContext = React.createContext<undefined | any>(undefined);
+export const CurrencyProvider = ({ currency, children }: { currency: any; children: React.ReactNode }) => {
+ const { ptActivity, isLoading } = usePrimaryTokenActivity({ to: currency });
+
+ const value = React.useMemo(
+ () => ({
+ currency,
+ supportedCurrencies,
+ configCurrencies,
+ config: configCurrencies[currency],
+ ptActivity,
+ isLoading,
+ }),
+ [currency, ptActivity, isLoading]
+ );
+
+ return <CurrencyContext.Provider value={value}>{children}</CurrencyContext.Provider>;
+};
+
+export const useCurrencyPairing = () => React.useContext(CurrencyContext) || missingProvider();
+
+const missingProvider = () => {
+ throw new Error('CurrencyProvider is missing');
+};
+
+