feature: portfolio api integration and updates

packages/yoroi-extension/.eslintrc.js

@@ -10,7 +10,10 @@ module.exports = {
       legacyDecorators: true,
     },
   },
-  extends: ['airbnb', 'prettier'],
+  extends: [
+    'airbnb',
+    'prettier',
+  ],
   env: {
     browser: true,
     mocha: true,
@@ -125,7 +128,15 @@ 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',
+  ],
   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');
+};
+
+