added navigation

softstack · Apr 3, 2024 · eb7f384 · eb7f384
1 parent 9e377f2
commit eb7f384
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/src/App.css b/src/App.css
@@ -54,6 +54,11 @@
     color: #273f44;
 }
 
+.navigation {
+    display: flex;
+    justify-content: space-between;
+}
+
 .add-to-home {
     display: flex;
     flex-direction: column;
@@ -81,3 +86,21 @@
     border-top-right-radius: 25px;
     box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2);
 }
+
+.wallet-overview {
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    padding: 1em 2em 2em 2em;
+    gap: 1em;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2);
+}
+
+.address-container {
+    font-size: 0.8em;
+    font-weight: 500;
+    text-align: center;
+    color: #707579;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -37,12 +37,8 @@ enum View {
 function App() {
     const [view, setView] = useState<View>(View.LANDING);
 
-    const addToHomeScreen = () => {
-        setView(View.CONNECT);
-    };
-
     const skip = () => {
-        setView(View.CONNECT);
+        setView(view + 1);
     };
     const goBack = () => {
         if (view === View.LANDING) {
@@ -51,6 +47,14 @@ function App() {
         setView(view - 1);
     };
 
+    const addToHomeScreen = () => {
+        setView(View.CONNECT);
+    };
+
+    const openWallet = () => {
+        setView(View.WALLET);
+    };
+
     // Wallet Connect
     const { address, isConnected } = useWeb3ModalAccount();
     useEffect(() => {
@@ -122,7 +126,10 @@ function App() {
                 )}
                 {view === View.CONNECT && (
                     <div className="components-container">
-                        <BackButton goBack={goBack} />
+                        <div className="navigation">
+                            <BackButton goBack={goBack} />
+                            {isConnected && <SkipButton skip={skip} />}
+                        </div>
                         <Avatar src={avatarPhone} height="60%" />
                         <div className="connect-buttons">
                             <h2 className="headline">CONNECT</h2>
@@ -152,10 +159,22 @@ function App() {
                                     <p>{address}</p>
                                 </div>
                             </div>
+                            <div className="button-container">
+                                <PrimaryButton
+                                    title="Open my Wallet"
+                                    callback={openWallet}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {view === View.WALLET && (
+                    <div>
+                        <div className="components-container">
+                            <BackButton goBack={goBack} />
                         </div>
                     </div>
                 )}
-                {view === View.WALLET && <div></div>}
             </div>
         </>
     );

diff --git a/src/components/utils/Avatar.css b/src/components/utils/Avatar.css
@@ -9,8 +9,9 @@
 }
 
 .avatar img {
-    max-width: auto;
     max-height: 100%;
+    width: auto;
+    max-width: 100%;
     /* width: 100%; */
     /* height: 100%; */
     object-fit: scale-down;