Update README image format and add random color feature to LaserEyesL…

…ogo in App component
omnisat · Nov 15, 2024 · 5708310 · 5708310
1 parent 8ae500b
commit 5708310
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -28,9 +28,7 @@ Don't trust verify [Try Out The Demo Here](https://demo.lasereyes.build)
 - Xverse
 
 ## Why Laser Eyes?
-<img alt="herding_cats.gif" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbW92cmM4MDExcGE1NmJtZjhka2N3M25wNm4zeDR5cWQ4YzFnNzZiNiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/7MIULHLEeZyKs/giphy.gif">
-
-
+![herding cats](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbW92cmM4MDExcGE1NmJtZjhka2N3M25wNm4zeDR5cWQ4YzFnNzZiNiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/7MIULHLEeZyKs/giphy.gif) 
 
 ## Community
 

diff --git a/apps/demo.lasereyes.build/components/App.tsx b/apps/demo.lasereyes.build/components/App.tsx
@@ -54,6 +54,19 @@ const App = ({ setNetwork }: { setNetwork: (n: NetworkType) => void }) => {
       }
     | undefined
   >()
+  const [selectedColor, setSelectedColor] = useState<string>(
+    ['orange', 'pink', 'blue', 'darkBlue', 'yellow'][
+      Math.floor(Math.random() * 5)
+    ]
+  )
+
+  const pickRandomColor = () => {
+    setSelectedColor(
+      ['orange', 'pink', 'blue', 'darkBlue', 'yellow'][
+        Math.floor(Math.random() * 5)
+      ]
+    )
+  }
 
   const switchN = () => {
     try {
@@ -412,7 +425,12 @@ const App = ({ setNetwork }: { setNetwork: (n: NetworkType) => void }) => {
           </div>
         </div>
         <div className={'flex flex-row items-center gap-4 '}>
-          <LaserEyesLogo className={'m-4'} width={48} />
+          <LaserEyesLogo
+            className={'m-4'}
+            width={48}
+            onClick={address ? () => null : () => pickRandomColor()}
+            color={address ? 'green' : selectedColor}
+          />
           <div className={'grow'} />
         </div>
       </div>