Merge pull request #19 from dm3-org/rpc-info-msg

Rpc info msg

src/components/App.tsx

@@ -72,6 +72,7 @@ const App = () => {
                 />
 
                 <Env
+                    rpc={rpc}
                     profileAndKeysCreated={profileAndKeysCreated}
                     storeEnv={storeEnv}
                 />

src/components/Env.tsx

@@ -1,11 +1,15 @@
+import { useState } from 'react';
 import { storeConfig } from '../utils/fileUtils';
 
 interface EnvProps {
+    rpc: string;
     profileAndKeysCreated: boolean;
     storeEnv: () => void;
 }
 
 export function Env(props: EnvProps) {
+    const [showRpcInfo, setShowRpcInfo] = useState<boolean>(false);
+
     return (
         <div className="step description-text">
             <h2 className="heading-text">
@@ -16,13 +20,24 @@ export function Env(props: EnvProps) {
                 clicking below buttons and keep it securely with you. Both the
                 files are needed in step 4.
             </p>
+            {showRpcInfo &&
+                props.profileAndKeysCreated &&
+                !props.rpc.length && (
+                    <p className="info-text">
+                        Remember to add a valid rpc url to your .env file before
+                        using it.
+                    </p>
+                )}
             {/* Button to download .env file */}
             <button
                 className={'btn env-btn active-btn '.concat(
                     !props.profileAndKeysCreated ? 'disabled-btn' : '',
                 )}
                 disabled={!props.profileAndKeysCreated}
-                onClick={props.storeEnv}
+                onClick={() => {
+                    setShowRpcInfo(true);
+                    props.storeEnv();
+                }}
             >
                 Store .env
             </button>{' '}

src/index.css

@@ -155,6 +155,12 @@ body {
   margin-top: 1rem;
 }
 
+.info-text {
+  font-size: 14px;
+  color: #0F980D;
+  margin-bottom: 0px;
+}
+
 /* changes rainbowkit button background color */
 [data-rk] {
   --rk-colors-connectButtonBackground: rgb(133, 53, 240) !important;