structure cleanup

softstack · Apr 3, 2024 · 8d99934 · 8d99934
1 parent 0a32c05
commit 8d99934
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 137 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@web3modal/ethers": "^4.1.1",
+    "crypto": "^1.0.1",
     "ethers": "^6.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.css b/src/App.css
@@ -54,21 +54,6 @@
     color: #273f44;
 }
 
-.avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    height: 100%;
-    padding: 1em 2em 1em 2em;
-}
-
-.avatar img {
-    object-fit: scale-down;
-    max-width: 100%;
-    max-height: 100%;
-}
-
 .add-to-home {
     display: flex;
     flex-direction: column;
@@ -96,79 +81,3 @@
     border-top-right-radius: 25px;
     box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2);
 }
-
-.connect-button {
-    display: flex;
-    align-items: center; /* Vertically center align items */
-    justify-content: center; /* Horizontally center content */
-    background-color: #007aff; /* Background color of the button */
-    color: white; /* Text color */
-    padding: 10px 20px; /* Padding around text and icon */
-    border-radius: 10px; /* Rounded corners */
-    border: none; /* No border */
-    cursor: pointer; /* Pointer cursor on hover */
-    font-size: 16px; /* Text size */
-    font-weight: bold; /* Font weight for the text */
-    white-space: nowrap; /* Prevents wrapping of text */
-}
-
-.connect-button-icon {
-    flex-shrink: 0; /* Prevent the icon container from shrinking */
-    width: 24px; /* Width of the icon container */
-    height: 24px; /* Height of the icon container */
-    display: flex;
-    align-items: center; /* Center the icon vertically */
-    justify-content: center; /* Center the icon horizontally */
-    margin-right: 10px; /* Space between icon and text */
-}
-
-.connect-button-icon img {
-    max-width: 100%; /* Ensure the icon is contained within the icon-container */
-    max-height: 100%;
-}
-
-.button-text {
-    flex-grow: 1;
-    margin-left: -34px;
-    text-align: center; /* Center the text */
-}
-
-.primary-button {
-    display: flex;
-    align-items: center; /* Vertically center align items */
-    justify-content: center; /* Horizontally center content */
-    background-color: #007aff; /* Background color of the button */
-    color: white; /* Text color */
-    padding: 10px 20px; /* Padding around text and icon */
-    border-radius: 10px; /* Rounded corners */
-    border: none; /* No border */
-    cursor: pointer; /* Pointer cursor on hover */
-    font-size: 16px; /* Text size */
-    font-weight: bold; /* Font weight for the text */
-    /* white-space: nowrap; Prevents wrapping of text */
-    text-align: center;
-}
-
-.skip-button {
-    color: #888a8c;
-    display: flex;
-    padding: 1em;
-    font-size: 0.8rem;
-    font-weight: 600;
-    justify-content: flex-end;
-}
-
-.skip-button span {
-    cursor: pointer;
-}
-
-.back-button {
-    display: flex;
-    padding: 1em;
-    font-size: 0.8rem;
-    justify-content: flex-start;
-}
-
-.back-button img {
-    cursor: pointer;
-}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useWeb3ModalAccount } from '@web3modal/ethers/react';
 import { useTonWallet } from '@tonconnect/ui-react';
-import WebApp from '@twa-dev/sdk';
 
 import './App.css';
 
 import PrimaryButton from './components/buttons/PrimaryButton';
+import Avatar from './components/utils/Avatar';
+import BackButton from './components/buttons/BackButton';
+import SkipButton from './components/buttons/SkipButton';
 
 import WalletConnectModal from './components/connectors/WalletConnectModal';
 import TonConnectModal from './components/connectors/TonConnectModal';
@@ -14,7 +16,6 @@ import SolanaConnectModal from './components/connectors/SolanaConnectModal';
 import avatarPhone from './assets/avatar_phone.png';
 import avatarScooter from './assets/avatar_scooter.png';
 import avatarTable from './assets/avatar_table.png';
-import chevronLeftIcon from './assets/chevron-left.svg';
 
 import walletConnectIcon from './assets/wallet_connect.png';
 import tonConnectIcon from './assets/ton_connect.png';
@@ -28,11 +29,6 @@ enum View {
 }
 
 function App() {
-    // DEBUG
-    const initData = WebApp.initData;
-
-    // DEBUG
-
     const [view, setView] = useState<View>(View.LANDING);
 
     const addToHomeScreen = () => {
@@ -50,7 +46,7 @@ function App() {
     };
 
     // Wallet Connect
-    const { isConnected } = useWeb3ModalAccount();
+    const { address, isConnected } = useWeb3ModalAccount();
     useEffect(() => {
         if (view === View.LANDING || view === View.WALLET) {
             return;
@@ -77,13 +73,8 @@ function App() {
             <div className="main-component">
                 {view === View.LANDING && (
                     <div className="components-container">
-                        <div className="skip-button">
-                            <span onClick={skip}>Skip</span>
-                        </div>
-                        {initData}
-                        <div className="avatar">
-                            <img src={avatarScooter} alt="" />
-                        </div>
+                        <SkipButton skip={skip} />
+                        <Avatar src={avatarScooter} />
                         <div className="add-to-home">
                             <div>
                                 <h2 className="headline">CALL IT HOME</h2>
@@ -94,27 +85,19 @@ function App() {
                                     pengeluaran dan pemasukan akan terdata rapi
                                 </p>
                             </div>
-                            <div>
-                                <PrimaryButton
-                                    title="Add to your Home Screen"
-                                    callback={addToHomeScreen}
-                                />
-                            </div>
+                        </div>
+                        <div className="button-container">
+                            <PrimaryButton
+                                title="Add to your Home Screen"
+                                callback={addToHomeScreen}
+                            />
                         </div>
                     </div>
                 )}
                 {view === View.CONNECT && (
                     <div className="components-container">
-                        <div className="back-button">
-                            <img
-                                onClick={goBack}
-                                src={chevronLeftIcon}
-                                alt="Back"
-                            />
-                        </div>
-                        <div className="avatar" style={{ height: '58%' }}>
-                            <img src={avatarPhone} alt="" />
-                        </div>
+                        <BackButton goBack={goBack} />
+                        <Avatar src={avatarPhone} height="58%" />
                         <div className="connect-buttons">
                             <h2 className="headline">CONNECT</h2>
                             <WalletConnectModal
@@ -135,18 +118,13 @@ function App() {
                 {view === View.CONNECTED && (
                     <div>
                         <div className="components-container">
-                            <div className="back-button">
-                                <img
-                                    onClick={goBack}
-                                    src={chevronLeftIcon}
-                                    alt="Back"
-                                />
-                            </div>
-                            <div className="avatar" style={{ height: '58%' }}>
-                                <img src={avatarTable} alt="" />
-                            </div>
-                            <div className="connect-buttons">
+                            <BackButton goBack={goBack} />
+                            <Avatar src={avatarTable} height="58%" />
+                            <div className="wallet-overview">
                                 <h2 className="headline">HORRAY!</h2>
+                                <div className="address-container">
+                                    <p>{address}</p>
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/src/components/buttons/BackButton.css b/src/components/buttons/BackButton.css
@@ -0,0 +1,10 @@
+.back-button {
+    display: flex;
+    padding: 1em;
+    font-size: 0.8rem;
+    justify-content: flex-start;
+}
+
+.back-button img {
+    cursor: pointer;
+}
diff --git a/src/components/buttons/BackButton.tsx b/src/components/buttons/BackButton.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import chevronLeftIcon from '../../assets/chevron-left.svg';
+
+import './BackButton.css';
+
+type Props = {
+    goBack: () => void;
+};
+
+const BackButton: React.FC<Props> = ({ goBack }) => {
+    return (
+        <div className="back-button">
+            <img onClick={goBack} src={chevronLeftIcon} alt="Back" />
+        </div>
+    );
+};
+
+export default BackButton;
diff --git a/src/components/buttons/ConnectButton.css b/src/components/buttons/ConnectButton.css
@@ -0,0 +1,35 @@
+.connect-button {
+    display: flex;
+    align-items: center; /* Vertically center align items */
+    justify-content: center; /* Horizontally center content */
+    background-color: #007aff; /* Background color of the button */
+    color: white; /* Text color */
+    padding: 10px 20px; /* Padding around text and icon */
+    border-radius: 10px; /* Rounded corners */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer cursor on hover */
+    font-size: 16px; /* Text size */
+    font-weight: bold; /* Font weight for the text */
+    white-space: nowrap; /* Prevents wrapping of text */
+}
+
+.connect-button-icon {
+    flex-shrink: 0; /* Prevent the icon container from shrinking */
+    width: 24px; /* Width of the icon container */
+    height: 24px; /* Height of the icon container */
+    display: flex;
+    align-items: center; /* Center the icon vertically */
+    justify-content: center; /* Center the icon horizontally */
+    margin-right: 10px; /* Space between icon and text */
+}
+
+.connect-button-icon img {
+    max-width: 100%; /* Ensure the icon is contained within the icon-container */
+    max-height: 100%;
+}
+
+.button-text {
+    flex-grow: 1;
+    margin-left: -34px;
+    text-align: center; /* Center the text */
+}
diff --git a/src/components/buttons/ConnectButton.tsx b/src/components/buttons/ConnectButton.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './ConnectButton.css';
+
 type Props = {
     title: string;
     icon: string;

diff --git a/src/components/buttons/PrimaryButton.css b/src/components/buttons/PrimaryButton.css
@@ -0,0 +1,14 @@
+.primary-button {
+    display: flex;
+    align-items: center; /* Vertically center align items */
+    justify-content: center; /* Horizontally center content */
+    background-color: #007aff; /* Background color of the button */
+    color: white; /* Text color */
+    padding: 10px 20px; /* Padding around text and icon */
+    border-radius: 10px; /* Rounded corners */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer cursor on hover */
+    font-size: 16px; /* Text size */
+    font-weight: bold; /* Font weight for the text */
+    text-align: center;
+}
diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './PrimaryButton.css';
+
 type Props = {
     title: string;
     callback: () => void;

diff --git a/src/components/buttons/SkipButton.css b/src/components/buttons/SkipButton.css
@@ -0,0 +1,12 @@
+.skip-button {
+    color: #888a8c;
+    display: flex;
+    padding: 1em;
+    font-size: 0.8rem;
+    font-weight: 600;
+    justify-content: flex-end;
+}
+
+.skip-button span {
+    cursor: pointer;
+}
diff --git a/src/components/buttons/SkipButton.tsx b/src/components/buttons/SkipButton.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './SkipButton.css';
+
+type Props = {
+    skip: () => void;
+};
+
+const SkipButton: React.FC<Props> = ({ skip }) => {
+    return (
+        <div className="skip-button" onClick={skip}>
+            <span>Skip</span>
+        </div>
+    );
+};
+
+export default SkipButton;
diff --git a/src/components/utils/Avatar.css b/src/components/utils/Avatar.css
@@ -0,0 +1,14 @@
+.avatar {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    height: 100%;
+    padding: 1em 2em 1em 2em;
+}
+
+.avatar img {
+    max-width: 100%;
+    max-height: 100%;
+}