PP-504/remove-worker-configuration

.env.qa

@@ -3,9 +3,6 @@ REACT_APP_CONTRACTS_DEPLOY_VERIFIER=0x1A92e1061791658dA9dCF94749de317B86F341A4
 REACT_APP_CONTRACTS_RELAY_VERIFIER=0x36cEd034CaEc41cD4f19949B5BbeB52f091bbC77
 REACT_APP_CONTRACTS_SMART_WALLET_FACTORY=0x79C7701aEb19c0D33CAC9d8b528a76162D2Ea276
 REACT_APP_CONTRACTS_SMART_WALLET=0x8aA7fC30C712aD550Fea30F75834E948615A82Ee
-REACT_APP_CONTRACTS_RELAY_WORKER=0x50f072699dcdf567e60c053cc48fa5a4f3cb9236
-REACT_APP_CONTRACTS_COLLECTOR=0xcf243FB47B0DCDB66680a7307006d9f94A65f82C
-REACT_APP_CONTRACTS_PARTNERS="0xD27eE084157342438D3e3709784fAc92cC984931,0x1b5449Ca10E7a23BD2EfbE6cc8E807C87D022250,0xDe199c66f49B34EF09655Af839A0BfD7775D50cd,0xD69C69F0cdc6c83E43C08F9Fa5784000c2f939F1"
 
 REACT_APP_RIF_RELAY_CHAIN_ID=31
 REACT_APP_RIF_RELAY_GAS_PRICE_FACTOR_PERCENT=0

.env.sample

@@ -3,9 +3,6 @@ REACT_APP_CONTRACTS_DEPLOY_VERIFIER=0x8921BF2f074b5470c02Cc7473F17282576111591
 REACT_APP_CONTRACTS_RELAY_VERIFIER=0xC9dB73F54D43479b1a67DB2284bCFed17b0A13c2
 REACT_APP_CONTRACTS_SMART_WALLET_FACTORY=0xb824784A5bF2Bc7139d1786639444e4Da259934B
 REACT_APP_CONTRACTS_SMART_WALLET=0x20804b7317D2F4d0d2123f30c2D3A6B0E33DfB37
-REACT_APP_CONTRACTS_RELAY_WORKER=0x60c79373d8e46e97da9d3a73047bdf479125466c
-REACT_APP_CONTRACTS_COLLECTOR=0x9957A338858bc941dA9D0ED2ACBCa4F16116B836
-REACT_APP_CONTRACTS_PARTNERS="0x7986b3DF570230288501EEa3D890bd66948C9B79,0x0a3aA774752ec2042c46548456c094A76C7F3a79,0xCF7CDBbB5F7BA79d3ffe74A0bBA13FC0295F6036,0x39B12C05E8503356E3a7DF0B7B33efA4c054C409"
 
 REACT_APP_RIF_RELAY_CHAIN_ID=33
 REACT_APP_RIF_RELAY_GAS_PRICE_FACTOR_PERCENT=0

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@openeth/truffle-typings": "0.0.6",
-    "@rsksmart/rif-relay-sdk": "1.0.0-alpha.2",
+    "@rsksmart/rif-relay-sdk": "1.0.0-alpha.3",
     "@rsksmart/rlogin": "^1.4.0-beta.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     DefaultRelayingServices,
     EnvelopingConfig,
@@ -17,11 +17,13 @@ import rLogin from 'src/rLogin';
 import Utils from 'src/Utils';
 import 'src/App.css';
 import Web3 from 'web3';
-import PartnerBalances from './components/PartnerBalances';
+
 import { useStore } from './context/context';
 import TransactionHistory from './modals/TransactionHistory';
 import Validate from './modals/Validate';
-import { Partner, SmartWalletWithBalance } from './types';
+import { SmartWalletWithBalance } from './types';
+import Snackbar from './components/Snackbar';
+import PartnerBalances from './components/PartnerBalances';
 
 if (window.ethereum) {
     window.web3 = new Web3(window.ethereum);
@@ -37,28 +39,10 @@ function getEnvParamAsInt(value: string | undefined): number | undefined {
 
 function App() {
     const { state, dispatch } = useStore();
-    const { chainId, account, loader, connected, provider, token } = state;
+    const { chainId, account, loader, connected, provider, token, reload } =
+        state;
 
-    useEffect(() => {
-        const workerAddr = process.env.REACT_APP_CONTRACTS_RELAY_WORKER!;
-        const collectorAddr = process.env.REACT_APP_CONTRACTS_COLLECTOR;
-        const partnerAddresses = Utils.getPartners();
-        const partners = partnerAddresses
-            ? partnerAddresses.map<Partner>((address) => ({
-                  address,
-                  balance: '0'
-              }))
-            : [];
-
-        dispatch({
-            type: 'set_partners',
-            worker: { address: workerAddr, balance: '0' },
-            collector: collectorAddr
-                ? { address: collectorAddr, balance: '0' }
-                : undefined,
-            partners
-        });
-    }, []);
+    const [errorMessage, setErrorMessage] = useState('');
 
     const initProvider = async () => {
         try {
@@ -124,6 +108,26 @@ function App() {
         dispatch({ type: 'reload', reload: true });
     }, [account, chainId, dispatch]);
 
+    const checkServer = useCallback(async () => {
+        if (provider && reload) {
+            try {
+                const { ready } = await provider.getPingResponse();
+                dispatch({ type: 'reload_partners', reloadPartners: true });
+                if (!ready) {
+                    setErrorMessage('Server is not ready');
+                    return;
+                }
+                setErrorMessage('');
+            } catch (error) {
+                setErrorMessage('Server is not reachable');
+            }
+        }
+    }, [reload]);
+
+    useEffect(() => {
+        checkServer();
+    }, [checkServer]);
+
     const refreshAccount = async () => {
         const accounts = await Utils.getAccounts();
         const currentAccount = accounts[0];
@@ -209,6 +213,10 @@ function App() {
                     <Validate />
                 </div>
             )}
+
+            {errorMessage.length > 0 && (
+                <Snackbar message={errorMessage} position={2} />
+            )}
         </div>
     );
 }

src/Utils.ts

@@ -167,11 +167,6 @@ class Utils {
     static getTransactionKey(chainId: number, address: string): string {
         return `${chainId}.${address}`;
     }
-
-    static getPartners(): Array<string> | undefined {
-        const partnerEnvVar = process.env.REACT_APP_CONTRACTS_PARTNERS;
-        return partnerEnvVar ? partnerEnvVar.split(',') : undefined;
-    }
 }
 
 export default Utils;

src/components/ActionBar.tsx

@@ -3,7 +3,7 @@ import { Button, Col, Icon, Row } from 'react-materialize';
 import 'src/components/ActionBar.css';
 import AllowedTokens from 'src/components/AllowedTokens';
 import { useStore } from 'src/context/context';
-import LoadingButton from 'src/modals/LoadingButton';
+import LoadingButton from 'src/components/LoadingButton';
 
 function ActionBar() {
     const { state, dispatch } = useStore();

src/components/AllowedTokens.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Select } from 'react-materialize';
 import { useStore } from 'src/context/context';
+import Snackbar from './Snackbar';
 
 function AllowedTokens() {
     const { state, dispatch } = useStore();
@@ -43,6 +44,7 @@ function AllowedTokens() {
     };
 
     const queryTokens = async () => {
+        dispatch({ type: 'reload_token', reloadToken: false });
         const tokens = await provider!.getAllowedTokens();
         setAllowedTokens(tokens);
         if (tokens.length === 0) {
@@ -73,7 +75,6 @@ function AllowedTokens() {
         if (reloadToken) {
             queryTokens();
         }
-        dispatch({ type: 'reload_token', reloadToken: false });
     }, [reloadToken]);
 
     const handleChange = (event: any) => {
@@ -90,17 +91,7 @@ function AllowedTokens() {
                 ))}
             </Select>
             {showToast && (
-                <span
-                    className='toast'
-                    style={{
-                        position: 'absolute',
-                        bottom: '10%',
-                        right: '45%',
-                        top: 'unset'
-                    }}
-                >
-                    Not allowed tokens{' '}
-                </span>
+                <Snackbar message='Not Allowed Tokens' position={1} />
             )}
         </div>
     );

src/components/Header.tsx

@@ -36,6 +36,10 @@ function Header(props: HeaderProps) {
             type: 'reload_token',
             reloadToken: true
         });
+        dispatch({
+            type: 'reload_partners',
+            reloadPartners: true
+        });
     };
 
     return (

src/components/PartnerBalances.tsx

@@ -1,4 +1,7 @@
+import { useCallback, useEffect, useState } from 'react';
 import { useStore } from 'src/context/context';
+import { Partner } from 'src/types';
+import Utils from 'src/Utils';
 
 type PartnerBalanceProp = {
     label: string;
@@ -20,25 +23,55 @@ function PartnerBalance({ label, balance, symbol }: PartnerBalanceProp) {
 }
 
 function PartnerBalances() {
-    const { state } = useStore();
+    const { state, dispatch } = useStore();
 
-    const { worker, collector, partners, token } = state;
+    const { token, provider, reloadPartners } = state;
+
+    const [feesReceiver, setFeesReceiver] = useState<Partner | undefined>(
+        undefined
+    );
+    const [partners, setPartners] = useState<Partner[]>([]);
+
+    const getPartnerBalance = async (address: string) => {
+        try {
+            const balance = await Utils.getTokenBalance(address, token!);
+            return { address, balance };
+        } catch (error) {
+            console.error(error);
+            return { address, balance: '-' };
+        }
+    };
+
+    const refreshPartners = useCallback(async () => {
+        if (provider && reloadPartners) {
+            const localPartners = await provider.getPartners();
+            const updatedBalances = await Promise.all(
+                localPartners.map((partner) => getPartnerBalance(partner))
+            );
+            const [newFeesReceiver, ...newPartners] = updatedBalances;
+            setFeesReceiver(newFeesReceiver);
+            setPartners(newPartners);
+        }
+    }, [token, reloadPartners]);
+
+    useEffect(() => {
+        refreshPartners();
+        dispatch({
+            type: 'reload_partners',
+            reloadPartners: false
+        });
+    }, [refreshPartners]);
 
     return (
         <ul className='collection with-header' style={{ textAlign: 'left' }}>
             <li className='collection-header'>
                 <h4>Balances</h4>
             </li>
-            <PartnerBalance
-                label='Worker'
-                balance={worker!.balance}
-                symbol={token!.symbol!}
-            />
-            {collector && (
+            {feesReceiver && (
                 <PartnerBalance
-                    label='Collector'
-                    balance={collector.balance}
-                    symbol={token!.symbol!}
+                    label='Fees Receiver'
+                    balance={feesReceiver.balance}
+                    symbol={token?.symbol}
                 />
             )}
             {partners &&

src/components/Snackbar.tsx

@@ -0,0 +1,26 @@
+type SnackbarProps = {
+    message: string;
+    position: number;
+};
+
+function Snackbar({ message, position }: SnackbarProps) {
+    return (
+        <span
+            className='toast'
+            style={{
+                justifyContent: 'center',
+                position: 'absolute',
+                bottom: `${position * 10}%`,
+                right: 0,
+                left: 0,
+                margin: '0 auto',
+                width: '250px',
+                top: 'unset'
+            }}
+        >
+            {message}
+        </span>
+    );
+}
+
+export default Snackbar;