feat: toggle options based on isProduction

NaturalSelectionLabs · Dec 12, 2023 · 7cccd43 · 7cccd43
1 parent de2e774
commit 7cccd43
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/packages/site/.env.development b/packages/site/.env.development
@@ -0,0 +1,5 @@
+/**
+* To use this, rename to $(.env.production) and set the production SNAP_ORIGIN here
+*/
+SNAP_ORIGIN=local:http://localhost:8080
+ENVIRONMENT=production
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -152,17 +152,18 @@ const Index = () => {
                 {isProduction ? 'Install MetaMask' : 'Install MetaMask Flask'}
               </CardTitle>
               <CardDescription className="h-[120px]">
-                Snaps is pre-release software only available in MetaMask Flask,
-                a canary distribution for developers with access to upcoming
-                features.
+                MetaMask Snaps allows users to add features and functionality to
+                their MetaMask wallet. Individual Snaps are features created by
+                third-party developers that MetaMask users can install directly
+                into their wallet.
               </CardDescription>
             </CardHeader>
             <CardFooter>
               <InstallFlaskButton />
             </CardFooter>
           </Card>
         )}
-        {!state.installedSnap && (
+        {isMetaMaskReady && !state.installedSnap && (
           <Card>
             <CardHeader>
               <CardTitle>Install</CardTitle>
@@ -194,24 +195,25 @@ const Index = () => {
             </CardFooter>
           </Card>
         )}
+        {state.installedSnap && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Reset Snap State</CardTitle>
+              <CardDescription className="h-[120px]">
+                Reset the Snap's state, in case anything does not work properly.
+                This does not affect your wallet or assets in anyway.
+              </CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <ResetButton
+                onClick={handleSendClearStateClick}
+                disabled={!state.installedSnap}
+              />
+            </CardFooter>
+          </Card>
+        )}
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Reset Snap State</CardTitle>
-            <CardDescription className="h-[120px]">
-              Reset the Snap's state, in case anything does not work properly.
-              This does not affect your wallet or assets in anyway.
-            </CardDescription>
-          </CardHeader>
-          <CardFooter>
-            <ResetButton
-              onClick={handleSendClearStateClick}
-              disabled={!state.installedSnap}
-            />
-          </CardFooter>
-        </Card>
-
-        {!isProduction && (
+        {!isProduction && state.installedSnap && (
           <>
             <Card>
               <CardHeader>