RPC's switcher (#18)

* feat: created provider slice * feat: added RPC switcher screen * fix: updated texts * fix: added ens support to tutorial modals; minor style fix * fix: collect all local storage logic in one file * feat: added reset to default rpc for rpc switcher screen * fix: requests count * fix: dark mode styles * fix: provider slice logic and change gov core to mainnet --------- Co-authored-by: Alex <argeares97@gmail.com>
bgd-labs · Oct 13, 2023 · 7cbb37d · 7cbb37d · github-actions · Oct 13, 2023
1 parent 5030efa
commit 7cbb37d
Show file tree

Hide file tree

Showing 42 changed files with 1,444 additions and 168 deletions.
diff --git a/app/page.page.tsx b/app/page.page.tsx
@@ -11,6 +11,7 @@ import { ProposalPageSSR } from '../src/proposals/components/proposalList/Propos
 import { metaTexts } from '../src/ui/utils/metaTexts';
 import { appConfig } from '../src/utils/appConfig';
 import { githubStartUrl, listViewPath } from '../src/utils/cacheGithubLinks';
+import { initialProviders } from '../src/utils/initialProviders';
 
 export const dynamic = 'force-dynamic';
 export const revalidate = 0;
@@ -89,7 +90,7 @@ export default async function Page({
 
   const govCoreDataHelper = IGovernanceDataHelper__factory.connect(
     appConfig.govCoreConfig.dataHelperContractAddress,
-    appConfig.providers[appConfig.govCoreChainId],
+    initialProviders[appConfig.govCoreChainId],
   );
 
   const { configs, contractsConstants } = await getGovCoreConfigs(

diff --git a/app/proposal/page.page.tsx b/app/proposal/page.page.tsx
@@ -20,6 +20,7 @@ import {
   cachedVotesPath,
   githubStartUrl,
 } from '../../src/utils/cacheGithubLinks';
+import { initialProviders } from '../../src/utils/initialProviders';
 
 export const revalidate = 0;
 
@@ -80,11 +81,11 @@ export default async function ProposalPage({
   // contracts
   const govCore = IGovernanceCore__factory.connect(
     appConfig.govCoreConfig.contractAddress,
-    appConfig.providers[appConfig.govCoreChainId],
+    initialProviders[appConfig.govCoreChainId],
   );
   const govCoreDataHelper = IGovernanceDataHelper__factory.connect(
     appConfig.govCoreConfig.dataHelperContractAddress,
-    appConfig.providers[appConfig.govCoreChainId],
+    initialProviders[appConfig.govCoreChainId],
   );
 
   // cached data

diff --git a/app/rpc-switcher/page.page.tsx b/app/rpc-switcher/page.page.tsx
@@ -0,0 +1,19 @@
+import { Metadata } from 'next';
+import React from 'react';
+
+import { RpcSwitcherPage } from '../../src/rpcSwitcher/components/RpcSwitcherPage';
+import { metaTexts } from '../../src/ui/utils/metaTexts';
+
+export const metadata: Metadata = {
+  title: `${metaTexts.main}${metaTexts.rpcSwitcherPageMetaTitle}`,
+  description: metaTexts.rpcSwitcherPageMetaDescription,
+  openGraph: {
+    images: ['/metaLogo.jpg'],
+    title: `${metaTexts.main}${metaTexts.rpcSwitcherPageMetaTitle}`,
+    description: metaTexts.rpcSwitcherPageMetaDescription,
+  },
+};
+
+export default function Page() {
+  return <RpcSwitcherPage />;
+}
diff --git a/pages/rpc-switcher.tsx b/pages/rpc-switcher.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { RpcSwitcherPage } from '../src/rpcSwitcher/components/RpcSwitcherPage';
+
+export default function Representations() {
+  return <RpcSwitcherPage />;
+}
diff --git a/src/delegate/components/DelegateTableItemAddress.tsx b/src/delegate/components/DelegateTableItemAddress.tsx
@@ -7,7 +7,6 @@ import { InputWithAnimation } from '../../ui/components/InputWithAnimation';
 import { InputWrapper } from '../../ui/components/InputWrapper';
 import { TableText } from '../../ui/components/TableText';
 import {
-  addressValidator,
   composeValidators,
   ensNameOrAddressValidator,
 } from '../../ui/utils/inputValidation';
@@ -22,20 +21,24 @@ const Text = ({
   alwaysGray,
   isEnsName,
   isError,
+  forHelp,
 }: {
   address?: string;
   shownAddress?: string;
   isCrossed?: boolean;
   alwaysGray?: boolean;
   isEnsName?: boolean;
   isError?: boolean;
+  forHelp?: boolean;
 }) => {
   return (
     <TableText
       topText={texts.delegatePage.tableItemNotDelegated}
-      address={address}
+      value={address}
       isCrossed={isCrossed}
       alwaysGray={alwaysGray}
+      errorMessage={texts.other.userNotFound}
+      withoutHover={forHelp}
       isError={isError}>
       <>
         {!!shownAddress
@@ -124,7 +127,7 @@ export function DelegateTableItemAddress({
     if (!addressTo) {
       setShownAddressTo(undefined);
     }
-    if (addressTo) {
+    if (addressTo && !forHelp) {
       if (isAddress(addressTo)) {
         fetchEnsNameByAddress(addressTo).then(() => {
           const addressData = ensData[addressTo.toLocaleLowerCase()];
@@ -161,6 +164,7 @@ export function DelegateTableItemAddress({
     <>
       {!isEdit && !isViewChanges && (
         <Text
+          forHelp={forHelp}
           address={address}
           shownAddress={shownAddress}
           isEnsName={isEnsName(shownAddress || '')}
@@ -169,11 +173,7 @@ export function DelegateTableItemAddress({
       {isEdit && !isViewChanges && (
         <Field
           name={inputName}
-          validate={
-            forHelp
-              ? composeValidators(addressValidator)
-              : composeValidators(ensNameOrAddressValidator)
-          }>
+          validate={composeValidators(ensNameOrAddressValidator)}>
           {(props) => (
             <InputWrapper
               onCrossClick={
@@ -214,6 +214,7 @@ export function DelegateTableItemAddress({
             },
           })}>
           <Text
+            forHelp={forHelp}
             address={address}
             shownAddress={shownAddress}
             isCrossed={isAddressToVisible}
@@ -222,6 +223,7 @@ export function DelegateTableItemAddress({
           />
           {isAddressToVisible && (
             <Text
+              forHelp={forHelp}
               address={
                 isEnsName(addressTo || '') ? hoveredAddressTo : addressTo
               }

diff --git a/src/delegate/store/delegationSlice.ts b/src/delegate/store/delegationSlice.ts
@@ -5,6 +5,7 @@ import { constants } from 'ethers';
 import { produce } from 'immer';
 
 import { IProposalsSlice } from '../../proposals/store/proposalsSlice';
+import { IProviderSlice } from '../../rpcSwitcher/store/providerSlice';
 import { TransactionsSlice } from '../../transactions/store/transactionsSlice';
 import { IUISlice } from '../../ui/store/uiSlice';
 import { appConfig } from '../../utils/appConfig';
@@ -36,7 +37,12 @@ export interface IDelegationSlice {
 
 export const createDelegationSlice: StoreSlice<
   IDelegationSlice,
-  IWeb3Slice & TransactionsSlice & IProposalsSlice & IUISlice & IEnsSlice
+  IWeb3Slice &
+    TransactionsSlice &
+    IProposalsSlice &
+    IUISlice &
+    IEnsSlice &
+    IProviderSlice
 > = (set, get) => ({
   delegateData: [],
   delegateDataLoading: false,
@@ -54,7 +60,7 @@ export const createDelegationSlice: StoreSlice<
         underlyingAssets.map(async (underlyingAsset) => {
           const erc20 = IERC20__factory.connect(
             underlyingAsset,
-            appConfig.providers[appConfig.govCoreChainId],
+            get().appProviders[appConfig.govCoreChainId].instance,
           );
           const symbol = getTokenName(underlyingAsset) as Token;
           const balance = await erc20.balanceOf(activeAddress);

diff --git a/src/proposals/components/proposal/DetailsLinks.tsx b/src/proposals/components/proposal/DetailsLinks.tsx
@@ -58,6 +58,8 @@ export function DetailsLinks({
         sx={{
           display: 'flex',
           mb: 20,
+          px: 20,
+          [theme.breakpoints.up('sm')]: { px: 0, mb: 28 },
           '.react-loading-skeleton': { width: 70 },
           [theme.breakpoints.up('lg')]: {
             '.react-loading-skeleton': { width: 120 },

diff --git a/src/proposals/components/proposalList/ActiveProposalListItem.tsx b/src/proposals/components/proposalList/ActiveProposalListItem.tsx
@@ -36,7 +36,7 @@ export function ActiveProposalListItem({
   isForHelpModal,
 }: ActiveProposalListItemProps) {
   const theme = useTheme();
-  const { isRendered } = useStore();
+  const { isRendered, appProviders } = useStore();
   let activeWallet = useStore((state) => state.activeWallet);
 
   const [isClicked, setIsClicked] = useState(false);
@@ -46,8 +46,8 @@ export function ActiveProposalListItem({
       walletType: 'Metamask',
       accounts: [ethers.constants.AddressZero],
       chainId: appConfig.govCoreChainId,
-      provider: appConfig.providers[appConfig.govCoreChainId],
-      signer: appConfig.providers[appConfig.govCoreChainId].getSigner(
+      provider: appProviders[appConfig.govCoreChainId].instance,
+      signer: appProviders[appConfig.govCoreChainId].instance.getSigner(
         ethers.constants.AddressZero,
       ),
       isActive: true,
@@ -222,7 +222,7 @@ export function ActiveProposalListItem({
                   )}
                 </Box>
 
-                {isVotingFinished && isVoted && (
+                {isVotingFinished && isVoted && !isFinished && (
                   <Box
                     sx={{
                       display: 'none',

diff --git a/src/proposals/components/proposalList/ProposalListItemFinalStatus.tsx b/src/proposals/components/proposalList/ProposalListItemFinalStatus.tsx
@@ -48,6 +48,7 @@ export function ProposalListItemFinalStatus({
           [theme.breakpoints.up('lg')]: { mr: 50 },
         }}>
         <Box
+          className="ProposalListItemFinalStatus__text"
           component="p"
           sx={{
             typography: 'body',
@@ -58,6 +59,9 @@ export function ProposalListItemFinalStatus({
       </Box>
 
       <Box
+        className={
+          color === '$disabled' ? 'ProposalListItemFinalStatus__box' : undefined
+        }
         sx={{
           display: 'inline-flex',
           alignItems: 'center',

diff --git a/src/proposals/store/proposalsHistorySlice.ts b/src/proposals/store/proposalsHistorySlice.ts
@@ -12,6 +12,7 @@ import { StoreSlice } from '@bgd-labs/frontend-web3-utils/src';
 import { ethers } from 'ethers';
 import { produce } from 'immer';
 
+import { IProviderSlice } from '../../rpcSwitcher/store/providerSlice';
 import { texts } from '../../ui/utils/texts';
 import { appConfig } from '../../utils/appConfig';
 import { IWeb3Slice } from '../../web3/store/web3Slice';
@@ -113,7 +114,7 @@ export interface IProposalsHistorySlice {
 
 export const createProposalsHistorySlice: StoreSlice<
   IProposalsHistorySlice,
-  IWeb3Slice
+  IWeb3Slice & IProviderSlice
 > = (set, get) => ({
   // initial
   proposalHistory: {},
@@ -462,7 +463,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getPayloadsCreatedEvents(
           txInfo.chainId,
@@ -500,7 +501,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getProposalCreatedEvents(
           minBlockNumber,
@@ -535,7 +536,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getProposalActivatedEvents(
           minBlockNumber,
@@ -636,7 +637,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getProposalQueuedEvents(
           minBlockNumber,
@@ -677,7 +678,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getPayloadsQueuedEvents(
           txInfo.chainId,
@@ -721,7 +722,7 @@ export const createProposalsHistorySlice: StoreSlice<
           await getBlockNumberByTimestamp(
             txInfo.chainId,
             historyItem.timestamp,
-            appConfig.providers[txInfo.chainId],
+            get().appProviders[txInfo.chainId].instance,
           );
         const events = await get().govDataService.getPayloadsExecutedEvents(
           txInfo.chainId,

diff --git a/src/proposals/store/proposalsSlice.ts b/src/proposals/store/proposalsSlice.ts
@@ -22,6 +22,7 @@ import { produce } from 'immer';
 
 import { IDelegationSlice } from '../../delegate/store/delegationSlice';
 import { IRepresentationsSlice } from '../../representations/store/representationsSlice';
+import { IProviderSlice } from '../../rpcSwitcher/store/providerSlice';
 import { TransactionsSlice } from '../../transactions/store/transactionsSlice';
 import { IUISlice } from '../../ui/store/uiSlice';
 import { texts } from '../../ui/utils/texts';
@@ -209,7 +210,8 @@ export const createProposalsSlice: StoreSlice<
     IUISlice &
     IProposalsHistorySlice &
     IRepresentationsSlice &
-    IEnsSlice
+    IEnsSlice &
+    IProviderSlice
 > = (set, get) => ({
   isInitialLoading: true,
 
@@ -1066,9 +1068,9 @@ export const createProposalsSlice: StoreSlice<
       const proposalData = get().detailedProposalsData[proposalId];
 
       if (checkHash(proposalData.snapshotBlockHash).notZero) {
-        const block = await appConfig.providers[
+        const block = await get().appProviders[
           appConfig.govCoreChainId
-        ].getBlock(proposalData.snapshotBlockHash);
+        ].instance.getBlock(proposalData.snapshotBlockHash);
 
         await get().executeTx({
           body: () => {
@@ -1148,7 +1150,7 @@ export const createProposalsSlice: StoreSlice<
 
             const proofOfRepresentative =
               await generateProofsRepresentativeByChain(
-                appConfig.providers[appConfig.govCoreChainId],
+                get().appProviders[appConfig.govCoreChainId].instance,
                 appConfig.govCoreConfig.contractAddress,
                 slots[appConfig.govCoreConfig.contractAddress.toLowerCase()]
                   .balance,