diff --git a/index.html b/index.html index e4b78ea..280c907 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,17 @@ - + - - - - - Vite + React + TS - - -
- - + + + + + + Vite + React + TS + + +
+ + diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 086ab81..0000000 --- a/src/App.css +++ /dev/null @@ -1,183 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - text-align: center; - background-color: #1a1a1a; -} - -.main-component { - background-color: #aadaf1; - overflow: hidden; - display: flex; - flex-direction: column; - height: 100vh; - width: 100vw; - border-radius: 10px; - z-index: 10000; -} - -.components-container { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -} - -.headline { - margin: 5px; - color: #273f44; -} - -.navigation { - display: flex; - justify-content: space-between; -} - -.add-to-home { - 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; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2); -} - -.landing-text { - margin: 0 0 1em 0; - padding: 0 1em 0 1em; - color: #888a8c; -} - -.connect-buttons { - 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; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - 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; - min-height: 47%; - gap: 0.6em; - border-top-left-radius: 25px; - border-top-right-radius: 25px; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2); -} - -.address-container { - font-size: 0.65em; - font-weight: 600; - text-align: center; - color: #707579; -} - -.wallet-provider-icon { - display: flex; - justify-content: center; - align-items: center; - max-width: 12%; - margin: 0 auto; -} - -.wallet-provider-icon img { - max-width: 100%; - max-height: 100%; -} - -.wallet-balance-details { - display: flex; - align-items: center; - flex-direction: column; -} - -.wallet-balance-header { - display: flex; - justify-content: space-between; - align-items: center; - gap: 1em; - font-size: 1.1em; - font-weight: 600; -} - -.wallet-balance-header p { - margin: 0; -} - -.wallet-balance-value { - font-size: 1.7em; - font-weight: 800; - color: black; -} - -.wallet-details-container { - height: 100vh; - background-color: #efeff4; -} - -.wallet-details-wrapper { - padding: 1em; - display: flex; - flex-direction: column; - gap: 1em; -} - -.balance-details { - display: flex; - flex-direction: column; -} - -.balance-details-header { - margin: 0; - font-size: 1.2em; - font-weight: 600; - color: black; -} - -.balance-details-value { - font-size: 3em; - margin: 0; - font-weight: 800; - color: black; -} - -.transaction-options { - display: flex; - justify-content: space-around; - gap: 1em; - padding: 1em 2em; -} - -.test-functions { - display: flex; - flex-direction: column; - - gap: 0.6em; -} - -.transaction-history { - display: flex; - flex-direction: column; - min-height: 120px; -} - -.address-container { - width: 80%; - margin: 0 auto; - color: #707579; - word-wrap: anywhere; -} diff --git a/src/App.tsx b/src/App.tsx index 2291538..cfbc7aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,8 +3,6 @@ import { useState, useEffect } from 'react'; import WebApp from '@twa-dev/sdk'; import axios from 'axios'; -import './App.css'; - import Avatar from './components/utils/Avatar'; import BackButton from './components/buttons/BackButton'; import SkipButton from './components/buttons/SkipButton'; @@ -189,24 +187,24 @@ function App() { return ( <> -
+
{view === View.LANDING && (
-
+

Telegram Mini App Demo

-

+

Click on the button below and follow the instructions to link your wallet to this telegram mini app demo.

-

+

Softstack is a Web3 software development, cybersecurity and consulting service partner. @@ -217,13 +215,13 @@ function App() { )} {view === View.CONNECT && (

-
+
{account && } - {/* */} +
-
+

CONNECT

+ -
+

HORRAY!

-
+

{account}

-
- +
+
-
-
-

- Total Balance -

+
+
+

Total Balance

-
+
{balance || 0}
@@ -282,21 +283,21 @@ function App() { )} {view === View.WALLET && (
-
+
-
-
-

+

+
+

Total Balance

-

- +

+ ETH {balance || 0}

-
+
-
+
+ +
)} -
+
void; }; const BackButton: React.FC = ({ goBack }) => { return ( -
+
Back
); diff --git a/src/components/buttons/ConnectButton.css b/src/components/buttons/ConnectButton.css deleted file mode 100644 index 837a5b0..0000000 --- a/src/components/buttons/ConnectButton.css +++ /dev/null @@ -1,35 +0,0 @@ -.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 */ - height: 24px; /* Height of the icon container */ - width: 42px; /* Width 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 index 6038182..93c36c3 100644 --- a/src/components/buttons/ConnectButton.tsx +++ b/src/components/buttons/ConnectButton.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './ConnectButton.css'; - type Props = { title: string; icon: string; @@ -10,12 +8,15 @@ type Props = { const ConnectButton: React.FC = ({ title, icon, callback }) => { return ( -
-
- +
+
+
- {title} + {title}
); }; diff --git a/src/components/buttons/PrimaryButton.css b/src/components/buttons/PrimaryButton.css deleted file mode 100644 index 355d35c..0000000 --- a/src/components/buttons/PrimaryButton.css +++ /dev/null @@ -1,14 +0,0 @@ -.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 index c032b51..7341e97 100644 --- a/src/components/buttons/PrimaryButton.tsx +++ b/src/components/buttons/PrimaryButton.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './PrimaryButton.css'; - type Props = { title: string; callback: () => void; @@ -9,7 +7,10 @@ type Props = { const PrimaryButton: React.FC = ({ title, callback }) => { return ( -
+
{title}
); diff --git a/src/components/buttons/SkipButton.css b/src/components/buttons/SkipButton.css deleted file mode 100644 index 6d83678..0000000 --- a/src/components/buttons/SkipButton.css +++ /dev/null @@ -1,12 +0,0 @@ -.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 index 7e899d6..3e26fb9 100644 --- a/src/components/buttons/SkipButton.tsx +++ b/src/components/buttons/SkipButton.tsx @@ -1,15 +1,16 @@ import React from 'react'; -import './SkipButton.css'; - type Props = { skip: () => void; }; const SkipButton: React.FC = ({ skip }) => { return ( -
- Skip +
+ Skip
); }; diff --git a/src/components/buttons/TransactionButton.css b/src/components/buttons/TransactionButton.css deleted file mode 100644 index a3e3ec9..0000000 --- a/src/components/buttons/TransactionButton.css +++ /dev/null @@ -1,12 +0,0 @@ -.transaction-button-container { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.1em; -} - -.transaction-button-container p { - margin: 0; - color: #007aff; - font-weight: 600; -} diff --git a/src/components/buttons/TransactionButton.tsx b/src/components/buttons/TransactionButton.tsx index 7d48b8d..2c76f6c 100644 --- a/src/components/buttons/TransactionButton.tsx +++ b/src/components/buttons/TransactionButton.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './TransactionButton.css'; - interface Props { text: string; icon: string; @@ -10,11 +8,11 @@ interface Props { const TransactionButton: React.FC = ({ text, icon, callback }) => { return ( -
+
-

{text}

+

{text}

); }; diff --git a/src/components/connectOverlay/NetworkBadge.css b/src/components/connectOverlay/NetworkBadge.css deleted file mode 100644 index c8075da..0000000 --- a/src/components/connectOverlay/NetworkBadge.css +++ /dev/null @@ -1,12 +0,0 @@ -.network-badge { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - color: #212121; -} - -.network-badge img { - width: 42px; - height: 42px; -} diff --git a/src/components/connectOverlay/NetworkBadge.tsx b/src/components/connectOverlay/NetworkBadge.tsx index f4a7b11..22bfb33 100644 --- a/src/components/connectOverlay/NetworkBadge.tsx +++ b/src/components/connectOverlay/NetworkBadge.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './NetworkBadge.css'; - type Props = { network: string; icon: string; @@ -10,8 +8,11 @@ type Props = { const NetworkBadge: React.FC = ({ network, icon, callback }) => { return ( -
- +
+

{network}

); diff --git a/src/components/connectOverlay/WalletBadge.css b/src/components/connectOverlay/WalletBadge.css deleted file mode 100644 index f6fa461..0000000 --- a/src/components/connectOverlay/WalletBadge.css +++ /dev/null @@ -1,11 +0,0 @@ -.wallet-badge { - display: flex; - align-items: center; - gap: 0.7em; - color: #212121; -} - -.wallet-badge img { - width: 36px; - height: 36px; -} diff --git a/src/components/connectOverlay/WalletBadge.tsx b/src/components/connectOverlay/WalletBadge.tsx index a664660..9801ebb 100644 --- a/src/components/connectOverlay/WalletBadge.tsx +++ b/src/components/connectOverlay/WalletBadge.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './WalletBadge.css'; - type Props = { walletName: string; icon: string; @@ -10,8 +8,11 @@ type Props = { const WalletBadge: React.FC = ({ walletName, icon, callback }) => { return ( -
- +
+

{walletName}

); diff --git a/src/components/utils/Avatar.css b/src/components/utils/Avatar.css deleted file mode 100644 index 51426d6..0000000 --- a/src/components/utils/Avatar.css +++ /dev/null @@ -1,18 +0,0 @@ -.avatar { - display: flex; - flex-grow: 1; - align-items: center; - justify-content: center; - overflow: hidden; - height: 100%; - padding: 1em 2em 1em 2em; -} - -.avatar img { - max-height: 100%; - width: auto; - max-width: 100%; - /* width: 100%; */ - /* height: 100%; */ - object-fit: scale-down; -} diff --git a/src/components/utils/Avatar.tsx b/src/components/utils/Avatar.tsx index 6a129f4..21f400a 100644 --- a/src/components/utils/Avatar.tsx +++ b/src/components/utils/Avatar.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import './Avatar.css'; - type Props = { src: string; height?: string; @@ -9,8 +7,15 @@ type Props = { const Avatar: React.FC = ({ src, height = '100%' }) => { return ( -
- +
+
); }; diff --git a/src/components/utils/Tooltip.css b/src/components/utils/Tooltip.css deleted file mode 100644 index 5897c42..0000000 --- a/src/components/utils/Tooltip.css +++ /dev/null @@ -1,36 +0,0 @@ -.tooltip-container { - position: relative; -} - -.tooltip { - position: absolute; - height: fit-content; - z-index: 1000; - background-color: #007aff; - color: #ffffff; - border-radius: 15px; - padding: 10px; - text-align: left; - box-shadow: 0 8px 6px -6px #0c0c0c; - margin: 0 10px 0 0; - font-size: 0.8em; -} - -.tooltip-content { - max-width: 400px; -} - -.tooltip-content h3 { - padding: 0; - margin: 0; -} - -.tooltip-content p { - padding: 10px 0 0 0; - margin: 0; -} - -.tooltip-image img { - width: 16px; - height: 16px; -} diff --git a/src/components/utils/Tooltip.tsx b/src/components/utils/Tooltip.tsx index c436aba..2cc0c1d 100644 --- a/src/components/utils/Tooltip.tsx +++ b/src/components/utils/Tooltip.tsx @@ -2,8 +2,6 @@ import React, { PropsWithChildren, useState, useRef, useEffect } from 'react'; import tooltipIcon from '../../assets/tooltip_icon.svg'; -import './Tooltip.css'; - interface Props extends PropsWithChildren { headline: string; content: string; @@ -48,15 +46,20 @@ const Tooltip: React.FC = ({ onMouseLeave={handleMouseLeave} onClick={handleMouseEnter} > -
- Tooltip +
+ Tooltip
{children} {isHovering && ( -
-
-

{headline}

-

{content}

+
+
+

{headline}

+

+ {content} +

{link && ( = ({ }, []); return ( -
-
- +
+
+
-
-

{currency}

-
-

{valueSpot}

-

{symbol}

+
+

{currency}

+
+

{valueSpot}

+

{symbol}

-
+

${valueFiat}

diff --git a/src/index.css b/src/index.css index 947e619..f94ce9b 100644 --- a/src/index.css +++ b/src/index.css @@ -3,13 +3,16 @@ @tailwind utilities; :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; + font-family: Poppins, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 22.4px; font-weight: 400; + font-size: 16px; + color: black; + margin: 0 auto; + text-align: center; color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: #1a1a1a !important; font-synthesis: none; text-rendering: optimizeLegibility; @@ -17,15 +20,6 @@ -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - body { margin: 0; display: flex; @@ -34,28 +28,19 @@ body { min-height: 100vh; } -h1 { - font-size: 3.2em; - line-height: 1.1; +.headline { + margin: 5px; + font-weight: 600; + font-size: 20px; + line-height: 33.6px; + color: #273f44; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; +.components-container { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; } @media (prefers-color-scheme: light) { diff --git a/tailwind.config.js b/tailwind.config.js index 128382c..fd448b5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,25 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{js,jsx,ts,tsx}'], + content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], theme: { - extend: {}, + extend: { + boxShadow: { + 'custom-white': '0px 0px 4px 10px rgba(255, 255, 255, 0.2)', + }, + colors: { + customGreen: '#273f44', + customGrayText: '#888a8c', + customBlue: '#aadaf1', + customGraySkip: '#888A8C', + customBlueButton: '#007aff', + customGrayAddress: '#707579', + customGrayWallet: '#efeff4', + customBlackText: '#212121', + }, + gridTemplateColumns: { + 'custom-1-3-1': '1fr 3fr 1fr', + }, + }, }, plugins: [], };