From 94da78ebf76867fcdba1f689f7363225585d0b17 Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Mon, 28 Oct 2024 12:34:37 +0530 Subject: [PATCH] Added styles as per the request --- .../sfa-web-ton-telegram-example/src/App.css | 247 ++++++++---------- .../sfa-web-ton-telegram-example/src/App.tsx | 122 ++++++--- .../src/assets/web3AuthLogoDark.png | Bin 1692 -> 6771 bytes .../src/assets/web3AuthLogoDark.svg | 6 + .../src/assets/web3AuthLogoLight.png | Bin 2030 -> 8851 bytes .../src/assets/web3AuthLogoLight.svg | 6 + 6 files changed, 212 insertions(+), 169 deletions(-) create mode 100644 single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.svg create mode 100644 single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.svg diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css index cdcd2afd..6b6247ae 100644 --- a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css +++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css @@ -1,191 +1,172 @@ -/* Main Container */ -.container { - width: 60%; - margin: auto; - padding: 0; -} +/* Importing the Inter font with specified weights */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); body { - background-color: var(--bg-color, #ffffff); /* Fallback to white if not set */ - color: var(--text-color, #333333); /* Fallback to black text */ + font-family: 'Inter', sans-serif; + background-color: var(--bg-color, #ffffff); + color: var(--text-color, #333333); /* Default text color */ + margin: 0; + padding: 0; } -.user-info-box, .info-box { - background-color: var(--bg-color); - color: var(--text-color); +/* Main Container */ +.container { + width: 90%; + max-width: 600px; + margin: auto; + padding: 20px; } -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; +/* Header with Logo and Title */ +.header { display: flex; flex-direction: column; - justify-content: center; align-items: center; -} - -.title { - line-height: 1.15; - font-size: 3rem; text-align: center; - margin: 50px; + gap: 10px; + margin-bottom: 20px; } -.title a { - color: #0070f3; - text-decoration: none; +.web3auth-logo { + width: 150px; + height: auto; } -.grid { - display: flex; - flex-direction: column; - align-items: center; +.title { + font-size: 1.8rem; + font-weight: 700; + color: var(--text-color); + margin: 0; } -.card { - margin: 0.5rem; - padding: 0.7rem; +.description { + font-size: 1rem; + font-weight: 400; + margin: 10px 0; text-align: center; - color: #0070f3; - background-color: #fafafa; - text-decoration: none; - border: 1px solid #0070f3; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - width: 100%; -} - -.card:hover, -.card:focus, -.card:active { - cursor: pointer; - background-color: #f1f1f1; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; - margin-top: 10rem; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.logo { - height: 1.5rem; - margin-left: 0.5rem; + color: var(--text-color); } -@media (max-width: 1200px) { - .container { - width: 100%; - } +/* How It Works Section */ +.how-it-works { + margin: 20px 0; + text-align: center; + color: var(--text-color); } -.flex-container { - display: flex; - flex-flow: row wrap; +.how-it-works h3 { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-color); } -.flex-container > div { - width: 100px; - margin: 10px; - text-align: center; - line-height: 75px; - font-size: 30px; +.how-it-works ul { + list-style-type: none; + padding: 0; + font-weight: 400; } -#console { - width: 100%; - height: 100%; - overflow: auto; - word-wrap: break-word; - font-size: 16px; - font-family: monospace; +.how-it-works li { + margin: 5px 0; + color: var(--text-color); } -/* Updated box sizes */ +/* Info Boxes for User and TON Account */ .user-info-box, .info-box { padding: 15px; - margin: 15px 0; + margin: 10px 0; border: 1px solid #ccc; border-radius: 10px; background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 350px; - height: auto; - display: flex; - align-items: center; - justify-content: center; + width: 100%; text-align: center; cursor: pointer; transition: background-color 0.3s ease; + color: var(--text-color); } .info-box:hover { background-color: #eef; } -.loader-container { +/* Avatar and Telegram Logo */ +.user-avatar { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 10px; +} + +.id-with-logo { display: flex; - justify-content: center; align-items: center; - height: 100%; + gap: 4px; + max-width: fit-content; + margin: 0 auto; + color: var(--text-color); } -/* Ellipsis for long strings */ -p { +.telegram-logo { + width: 20px; + height: 20px; +} + +/* Ellipsis for Long Text */ +.ellipsed-text { + display: inline-block; + max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; /* Ensure ellipsis kicks in at full box width */ + vertical-align: middle; + color: var(--text-color); } -/* Adjust alignment and spacing of ID and Logo */ -.id-with-logo { - display: inline-flex; - align-items: center; /* Vertically align the text and logo */ - gap: 4px; /* Reduce the gap between the ID and the logo */ - margin-bottom: 0; /* Remove unnecessary margin below the ID */ - max-width: fit-content; /* Adjust width to fit content only */ +/* Footer Button */ +.footer { + display: flex; + justify-content: center; + padding: 2rem 0; + border-top: 1px solid #eaeaea; + margin-top: 30px; + color: var(--text-color); } -/* Style the logo */ -.telegram-logo { - width: 20px; - height: 20px; - margin-left: 4px; /* Minimal space between the ID and logo */ +.learn-more-button { + padding: 10px 20px; + font-weight: 600; + text-align: center; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease, color 0.3s ease; } -/* Adjust overall spacing for user-info-box */ -.user-info-box { - padding: 15px; - margin: 10px 0; /* Adjust the margin for better spacing */ - border: 1px solid #ccc; - border-radius: 10px; - background-color: #f9f9f9; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 350px; - height: auto; - display: flex; - align-items: center; - text-align: center; - cursor: pointer; - transition: background-color 0.3s ease; +.light-mode { + background-color: #0063F5; + color: #ffffff; } -.user-avatar { - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 10px; +.dark-mode { + background-color: #ffffff; + color: #000000; + border: 1px solid #000000; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .container { + width: 90%; + } + + .title { + font-size: 1.5rem; + } + + .web3auth-logo { + width: 150px; + max-width: 100%; + height: auto; + margin-bottom: 8px; + } } diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx index b37b5453..026f62f8 100644 --- a/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx +++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx @@ -3,11 +3,13 @@ import { Web3Auth, decodeToken } from "@web3auth/single-factor-auth"; import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base"; import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; import { getHttpEndpoint } from "@orbs-network/ton-access"; -import TonRPC from "./tonRpc"; // Import the TonRPC class -import { useLaunchParams, mainButton } from "@telegram-apps/sdk-react"; +import TonRPC from "./tonRpc"; +import { useLaunchParams, miniApp } from "@telegram-apps/sdk-react"; import { useTelegramMock } from "./hooks/useMockTelegramInitData"; import Loading from "./components/Loading"; -// import TelegramLogo from "./assets/TelegramLogo.svg"; // Assuming the logo is in the assets folder +import TelegramLogo from "./assets/TelegramLogo.svg"; +import web3AuthLogoLight from "./assets/web3AuthLogoLight.svg"; +import web3AuthLogoDark from "./assets/web3AuthLogoDark.svg"; import "./App.css"; const verifier = "w3a-telegram-demo"; @@ -24,7 +26,9 @@ function App() { const { initDataRaw, initData, themeParams } = useLaunchParams() || {}; - useTelegramMock(); // Initialize the Telegram mock data + useTelegramMock(); + + console.log("isDark:", miniApp.isDark()); // Log the isDark value to verify useEffect(() => { if (themeParams) { @@ -62,7 +66,6 @@ function App() { }); setWeb3authSfa(web3authInstance); - await web3authInstance.init(); setWeb3AuthInitialized(true); } catch (error) { @@ -73,6 +76,12 @@ function App() { initializeWeb3Auth(); }, []); + useEffect(() => { + const isDarkMode = miniApp.isDark(); + document.documentElement.style.setProperty("--bg-color", isDarkMode ? "#000000" : "#ffffff"); + document.documentElement.style.setProperty("--text-color", isDarkMode ? "#ffffff" : "#333333"); + }, []); + useEffect(() => { const connectWeb3Auth = async () => { if (web3authSfa && web3AuthInitialized && initDataRaw) { @@ -103,19 +112,6 @@ function App() { const messageToSign = "Hello, TON!"; const signedMsg = await tonRpc.signMessage(messageToSign); setSignedMessage(signedMsg); - - mainButton.setParams({ - text: tonAccountAddress ? "Copy TON Address" : "Copy Signed Message", - backgroundColor: "#000000", - textColor: "#ffffff", - isVisible: true, - }); - - mainButton.onClick(() => { - const textToCopy = tonAccountAddress || signedMessage || ""; - navigator.clipboard.writeText(textToCopy); - alert("Copied to clipboard!"); - }); } catch (error) { console.error("Error during Web3Auth connection:", error); } finally { @@ -127,7 +123,7 @@ function App() { if (web3AuthInitialized && initDataRaw) { connectWeb3Auth(); } - }, [initDataRaw, web3authSfa, web3AuthInitialized, tonAccountAddress, signedMessage]); + }, [initDataRaw, web3authSfa, web3AuthInitialized]); const getIdTokenFromServer = async (initDataRaw: string, photoUrl: string | undefined) => { const isMocked = !!sessionStorage.getItem("____mocked"); @@ -142,28 +138,82 @@ function App() { return data.token; }; + const logo = miniApp.isDark() ? web3AuthLogoDark : web3AuthLogoLight; + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); + alert("Copied to clipboard!"); + }; + return (
-

Web3Auth TON Telegram MiniApp

- {isLoggingIn ? : null} - {isLoggedIn ? ( +
+ Web3Auth Logo +

Telegram MiniApp Demo

+
+ +
+

+ Seamlessly generate a blockchain wallet with Web3Auth right inside Telegram. This demo shows a wallet for the TON blockchain, but it’s fully + adaptable for any other chain. No extra steps—just connect and go! +

+
+ +
+

How It Works

+
    +
  • Your Telegram account authenticates you securely, creating an embedded wallet.
    • +
  • The wallet is available across both desktop and mobile Telegram clients.
    • +
  • Your wallet stays accessible whenever you log in with Telegram—no setup needed each time.
    • +
+
+ + {isLoggingIn ? ( + + ) : (
-
- User avatar -
-

- Username: {userData?.username} -

-

- Name: {userData?.name} -

-
-
+ {isLoggedIn && ( + <> +
+ User avatar +
+
+

+ ID: {userData?.telegram_id} +

+ Telegram Logo +
+

+ Username: {userData?.username} +

+

+ Name: {userData?.name} +

+
+
+
copyToClipboard(tonAccountAddress || "")}> +

+ TON Account: {tonAccountAddress} +

+
+
copyToClipboard(signedMessage || "")}> +

+ Signed Message: {signedMessage} +

+
+ + )}
- ) : null} + )} +
diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.png b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.png index af2f8f8497a41fb60ee468e2c626bcf6db65a557..cd4b904f5194980fa24160fe2896d980106d17f8 100644 GIT binary patch literal 6771 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 delta 1661 zcmV-@27>wXG@K0~iBL{Q4GJ0x0000DNk~Le0001B0001B2nGNE0OFW;IFTVVe+Ds0 zL_t(|0qvZPapN`+g`Zr3uLE8MaVj{Zg1b}@r2}`6O9e>>b_dB-V5EX`Dv(lv-2np3 zQ8UsCAb#G0^v&R#(a01b2wV^k%SRf(U@#aA27|$1Fc=I5gTY`hScP5eL+9MBf7|=l z2miXoGOzyiWw+Zsq7%M7`?)Psf8kfwXp`}8zaZbHy0(Pi``1@j&mZW3ulLEd)2mIt zxq3oOZ%ZnFaP1f<(s-bfdnn@T+q-r?m;AuNwevR=A=`4|07ZO#f4O#EWPQ8H4>+{* z>b3426!6Ws^KW0F!#m%uS12$CF)t+vd^;{;eiJG4jCR8OVW5M79-pAVe|&7s!AB&v zu@3kL90odkgdQKDg8|1?Y-1h3>iAnZ*mG1y0Qh6OifwET2tzDPT+C3TGHu~GG#{)V>J#`86oajke?2LpF^zVBmm!O99!4vZE4l2B(zW@8JRg}aRkg?v}mU$_bx4` zK~ajVU_aa3grAe3z`x)yh2?tK4=H{qEXP_Z+1QnIKzDn3mO6v=C=G0BN2SQdZkH>t zhCRKq{-0R1r+eAYf0FD7P_m~@W`7U+Ifo(l=ddM(N+c-I`+8ta{Xg-M+@GT;W~Ciq z!I3&W3RiUiX-~^10}OZ`!JCBvnU1zfZPtF4)Q*5a>(kRRP;CDHt3TNA z`q}^eJ2;Hke{Sv6>ev*gp(k3M%X4Q?+iBFkb4S$oQ|bY%6xAc3@u@j0whcJ!`G$gS zU);HCl-k$Y;0IbHC{SxpOHJ+JG-^AxwQ|xV&8;0!d$3k)v+1Xee5QTp&Y}*BwFqgO zYy8i^%J0TFB-(WAI9{Bvr{~W~X*#KzM!=lUm(By)f9Yq`Y1DXv1J@(dqKsnuS<)&& zfl?Wg($LdsWdFhNQ)7J=jW8Wx8_V_3|B`(r$a$c2UST`FoU2AX zoCgjC-TEdEL1CA1%wcx0gp(^`X!bngc*SIzEe+erGwdv^k@^iuuJySWH zSz_`ae`StMb7k6`lUjqV$TaRrl+ATkj-~pH*mrOolc;ZL{Upj#rz9wod&_)1^#npG zvc9{--+{H#(Q5ly!p;GKRO7Vm=cVfj?YmkA%fEes^`CfLTv}>%G)Jz!3md`p`Mp?r zYd}JefP_6Q(?tUgS)Y`g3mZYkv%%nH46&N!Q3Oi^h+4#|M}OS%*9ux zEt7w{N7*to;TGuQj#%(}Fc=I5gTY`h7z_r3!C){LydnMvWqkjLQg#Z100000NkvXX Hu0mjfy9h4% diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.svg b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.svg new file mode 100644 index 00000000..8d925fc6 --- /dev/null +++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoDark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.png b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.png index b91942b5856dec5c796f7af849897fd7c7c2f2f3..66788c11dea308ffbde340e533d42b67664397f9 100644 GIT binary patch literal 8851 zcmb`NWm6nH+lGNf3&puv+=>;7ySuv=*P_L>xVshC#a)X#ix!8axD_kT;tOSgx6glg zXRahy@*$JSWR5w{B(WN5^6%e~zC%Djc(14+qlJKg`0_6|M@Riv6HC_?|7$Q@6+U|) zAYc;wuOK4i<^%r?B6?`aOCdDOlArwRAlpi+N+KXMCu71bP!JGknG|Itb$k&o3bvd# zS{pD-ZbkT%rKNzM>Fh@UX(L_!OCMg>9+8Jlj9Penox zdr*F43itq~4J!^b0$Xy4ReR8P}-9#3kIEn%As-nrEwn3vdv^sL}u5!T`}= zOMJ|qw*T?HH%YjQq(q&dG{f7o$7>vggz{ZKLC+0NZ|2A`3Wf3FnDzoO7Nuijb+{wV z{}w>-B|(f7zVnKc6cO^ZDMa?l{n6(E3u)2+W6}XtpleaRV_ad}(M|Y9hhHLsz#r+= zP(UW4qyR3XBG#Jzy_zrFKeL=U@l#k8?s%~3pEoYJN6Y!#Ny0)_?db|c>LLtqV=X)k zT17zGwKT3(uzF5-8!?rlPCupo%_~3+Jw$tYItNG!xW4=;(0-EVg2ED-<=4h>q9t%6 zX#2fj#khN4hiRC5#-Pz$BiEob8Dlxob(_zY)2afqO8Xy*ccF3V
BnFJRg;A*f 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 diff --git a/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.svg b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.svg new file mode 100644 index 00000000..d3744ebc --- /dev/null +++ b/single-factor-auth-web/sfa-web-ton-telegram-example/src/assets/web3AuthLogoLight.svg @@ -0,0 +1,6 @@ + + + + + +