Tracking Issue: Keeeeeeks

[MariusVanDerWijden]

Q:

Here's the repo, this file is the one giving me trouble
https://github.com/Keeeeeeeks/scaffold-eth/blob/master/packages/react-app/src/components/Vorple2.jsx
GitHub
Keeeeeeeks/scaffold-eth
🏗 forkable Ethereum dev stack focused on fast product iterations - Keeeeeeeks/scaffold-eth

Basically i want to make it so that:
- If user logs in through MM/WC AND logs in with the right address, they're able to load the page
else
- The Vorple component doesn't load

At the moment, this seems to load the stuff for failing, and the stuff for it succeeding

Proposed solution: Only initializing the vorple if the userAddress was correct

diff --git a/packages/react-app/src/components/Vorple2.jsx b/packages/react-app/src/components/Vorple2.jsx
index 3beb7ed..7004d98 100644
--- a/packages/react-app/src/components/Vorple2.jsx
+++ b/packages/react-app/src/components/Vorple2.jsx
@@ -22,13 +22,13 @@ export default function Vorple2( address, vorpAddress, userProvider, mainnetProv
                 // Container for the interpreter
                 container: containerRef.current
             };
-            vorple.init();
+            //vorple.init();
         } 
     }, [ containerRef ]);
 
-
     if (userAddress == vorpAddress) {
         isRightAddress = true;
+        vorple.init();
         return (
             <Row align="middle">
                     <vorple-section>

[MariusVanDerWijden]

Hmm, this doesn't seem to work for him.
Seems the vorple now reinits whenever the backend refreshes.
I proposed to implement something like this:

initialized = false // has to be global
...
if !initialized {
    vorple.init()
    initialized = true
} 

[tenthirtyone]

Taking a look

[tenthirtyone]

@MariusVanDerWijden I got the same result as you moving the init and could not replicate the reinit experienced by the user, either.

They can do the check in App.jsx L313:

       <Route path="/vorple2">
{address === vorpAddress ?
            <Vorple2
            address={address}
            VorpAddress={vorpAddress}
            userProvider={userProvider}
            mainnetProvider={mainnetProvider}
            localProvider={localProvider}
            tx={tx}
            writeContracts={writeContracts}
            />
:
null
}
          </Route>

And leave the Vorple2 component unchanged. That way React won't put the Vorple 2 component on the dom. They'll have to clean up the component code because only the userAddress ==[sic] vorpAddress branch will ever run. But this is the quickest way.