Add Transaction History fetched from TheGraph

Hacker-web-Vi · Jul 24, 2021 · 27cf07e · 27cf07e
1 parent 966402d
commit 27cf07e
Show file tree

Hide file tree

Showing 8 changed files with 606 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.3.21",
     "@biconomy/hyphen": "0.0.5",
     "@biconomy/mexa": "^1.5.10",
     "@material-ui/core": "^4.9.0",
@@ -21,6 +22,7 @@
     "ethereumjs-tx": "^2.1.2",
     "ethereumjs-util": "^7.0.7",
     "ethers": "^5.0.24",
+    "graphql": "^15.5.1",
     "ms": "^2.1.3",
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.3",

diff --git a/src/App.js b/src/App.js
@@ -99,13 +99,6 @@ let chainLogoMap = {
   1: EthereumLogo
 }
 
-let explorerURLMap = {
-  80001: "https://explorer-mumbai.maticvigil.com/tx/",
-  137: "https://polygonscan.com/tx/",
-  5: "https://goerli.etherscan.io/tx/",
-  1: "https://etherscan.io/tx/"
-}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     minWidth: 275,
@@ -292,6 +285,7 @@ function App() {
   const toChainProvider = useSelector(state => state.network.toChainProvider);
   const fromLPManagerAddress = useSelector(state => state.network.fromLPManagerAddress);
   const toLPManagerAddress = useSelector(state => state.network.toLPManagerAddress);
+  const selectedWalletFromStore = useSelector(state => state.network.selectedWallet);
 
   let toLPManager;
   if(toChainProvider && toLPManagerAddress) {
@@ -433,7 +427,7 @@ function App() {
 
   useEffect(() => {
     try {
-      init();
+      // init();
     } catch(error) {
       console.log(error);
       showErrorMessage("Error while initiazing the App");
@@ -473,7 +467,7 @@ function App() {
   const connectToLastSelectedWallet = () => {
     if(localStorage) {
       let lastSelectedWallet = localStorage.getItem(config.selectedWalletKey);
-      if(lastSelectedWallet) {
+      if(lastSelectedWallet && !selectedWalletFromStore) {
         switch(lastSelectedWallet) {
           case config.WALLET.METAMASK:
             if (window && typeof window.ethereum !== "undefined" &&
@@ -701,10 +695,6 @@ function App() {
     }
   }
 
-  const getExplorerURL = (hash, chainId) => {
-    return `${explorerURLMap[chainId]}${hash}`;
-  }
-
   const onFromChainSelected = (event) => {
     let selectedNetwork = config.chainIdMap[event.target.value]
     let currentToChain = selectedToChain;
@@ -1127,7 +1117,7 @@ function App() {
             setOpenTransferActivity(true);
             dispatch(updateTransferStepsContentArray(2, <div>
               Transfer Initiated. 
-              <a className={classes.exitHashLink} target="_blank" href={getExplorerURL(data.exitHash, data.toChainId)}>Check explorer</a>
+              <a className={classes.exitHashLink} target="_blank" href={config.getExplorerURL(data.exitHash, data.toChainId)}>Check explorer</a>
             </div>));
           } else if(data.statusCode == 2 && data.exitHash && data.exitHash !== "") {
             console.log("Funds transfer successful");
@@ -1146,7 +1136,7 @@ function App() {
                   if (receiptLog.topics[0] === selectedToChain.assetSentTopicId && toLPManager) {
                     const data = toLPManager.interface.parseLog(receiptLog);
                     if (data.args) {
-                      let amount = data.args.amount;
+                      let amount = data.args.transferredAmount;
                       let tokenAddress = data.args.asset;
                       let recieverAddress = data.args.target;
 
@@ -1177,7 +1167,7 @@ function App() {
               currentStep: 3,
               transferActivityStatus: <div>
                 ✅ Transfer successful. 
-                <a className={classes.exitHashLink} target="_blank" href={getExplorerURL(data.exitHash, data.toChainId)}>Check explorer</a>
+                <a className={classes.exitHashLink} target="_blank" href={config.getExplorerURL(data.exitHash, data.toChainId)}>Check explorer</a>
               </div>
             }));
           }
@@ -1337,12 +1327,13 @@ function App() {
         handleClose={()=> {
           dispatch(updateTransferState({showTransferDetailsModal: false}))
         }}
-        getExplorerURL={getExplorerURL}
+        getExplorerURL={config.getExplorerURL}
       />
 
       <Header switchButtonText={switchNetworkText} showSwitchNetworkButton={showSwitchNetworkButton}
         onClickNetworkChange={onClickSwitchNetwork} selectedFromChain={selectedFromChain}
-        connectWalletText={config.connectWalletText} connectWallet={onClickConnectWallet}/>
+        connectWalletText={config.connectWalletText} connectWallet={onClickConnectWallet}
+        onClickWalletChange={onClickConnectWallet}/>
 
       <div className="App">
         { (selectedFromChain.name === "Mumbai" || selectedFromChain.name === "Goerli") &&

diff --git a/src/assets/white-arrow.svg b/src/assets/white-arrow.svg
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -102,7 +102,7 @@ function Header(props) {
 
     return (
         <HeaderWrapper>
-            <UserDetails />
+            <UserDetails onClickWalletChange={props.onClickWalletChange}/>
             <IconWrapper className={classes.headerItems, classes.logoText}>
 
             </IconWrapper>