Skip to content

Commit

Permalink
theme tweak, fixed alignment of webhook
Browse files Browse the repository at this point in the history
  • Loading branch information
ihsraham committed Nov 13, 2024
1 parent f2d2302 commit 0e519aa
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 91 deletions.
Original file line number Diff line number Diff line change
@@ -1,51 +1,48 @@
import { Telegraf } from "telegraf";

export default async function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method not allowed' });
}
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method not allowed' });
}

const bot = new Telegraf(process.env.TELEGRAM_BOT_TOKEN);

// Command handler
bot.command('start', async (ctx) => {
await ctx.reply(
`Welcome to Web3Auth MiniApp! 🌟
Experience blockchain wallets reimagined inside Telegram! Our demo showcases integration with the TON blockchain, but that's just the beginning - the same seamless experience can be adapted for any blockchain network.
How does it work? It's brilliantly simple:
- Your Telegram identity securely powers your Web3 wallet creation
- Access your wallet seamlessly across all your Telegram devices
- No repeated setups - your wallet is always ready when you are
Ready to experience the future of Web3 authentication?`,
{
reply_markup: {
inline_keyboard: [[
{
text: "Launch Web3Auth MiniApp 🚀",
web_app: { url: process.env.APP_URL }
}
]]
}
}
);
});
const bot = new Telegraf(process.env.TELEGRAM_BOT_TOKEN);

bot.command('start', async (ctx) => {
await ctx.reply(
`Welcome to Web3Auth MiniApp! 🌟
try {
// Process the update
await bot.handleUpdate(req.body);
res.status(200).json({ ok: true });
} catch (error) {
console.error('Webhook handling error:', error);
res.status(500).json({ error: 'Failed to process update' });
}
Experience blockchain wallets reimagined inside Telegram! Our demo showcases integration with the TON blockchain, but that's just the beginning - the same seamless experience can be adapted for any blockchain network.
How does it work? It's brilliantly simple:
- Your Telegram identity securely powers your Web3 wallet creation
- Access your wallet seamlessly across all your Telegram devices
- No repeated setups - your wallet is always ready when you are
Ready to experience the future of Web3 authentication?`,
{
reply_markup: {
inline_keyboard: [[
{
text: "Launch Web3Auth MiniApp 🚀",
web_app: { url: process.env.APP_URL }
}
]]
}
}
);
});

try {
await bot.handleUpdate(req.body);
res.status(200).json({ ok: true });
} catch (error) {
console.error('Webhook handling error:', error);
res.status(500).json({ error: 'Failed to process update' });
}
}

// Disable body parsing as Telegram sends updates in raw format
export const config = {
api: {
bodyParser: false,
},
api: {
bodyParser: false,
},
};
101 changes: 74 additions & 27 deletions single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
--bg-color: #ffffff;
--text-color: #333333;
--bg-color: #f8faff;
--text-color: #1a1b25;
--border-color: #e0e0e0;
--hover-bg: rgba(0, 0, 0, 0.05);
--box-shadow: rgba(0, 0, 0, 0.1);
--box-shadow: rgba(0, 0, 0, 0.08);
--card-bg: #ffffff;
}

.dark-mode {
--bg-color: #1a1a1a;
:root.dark-mode {
--bg-color: #0F1221;
--text-color: #ffffff;
--border-color: #333333;
--border-color: #2a2d3d;
--hover-bg: rgba(255, 255, 255, 0.1);
--box-shadow: rgba(0, 0, 0, 0.2);
--box-shadow: rgba(0, 0, 0, 0.3);
--card-bg: #1A1F35;
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
transition: background-color 0.3s ease, color 0.3s ease;
min-height: 100vh;
background: var(--bg-color);
color: var(--text-color);
transition: all 0.3s ease;
}

body:not(.dark-mode) {
background: linear-gradient(135deg, #f5f7ff 0%, #eef1ff 100%);
}

body.dark-mode {
background: #0F1221;
}

.container {
width: 90%;
max-width: 600px;
margin: auto;
padding: 20px;
background-color: var(--bg-color);
color: var(--text-color);
}

Expand All @@ -39,24 +49,27 @@ body {
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
margin-bottom: 30px;
gap: 12px;
margin-bottom: 40px;
position: relative;
width: 100%;
padding-top: 10px;
}

.logo-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}

.web3auth-logo {
width: 150px;
width: 180px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 2px 4px var(--box-shadow));
}

.theme-toggle {
Expand All @@ -66,13 +79,14 @@ body {
transform: translateY(-50%);
padding: 8px;
border-radius: 50%;
background: var(--card-bg);
border: 1px solid var(--border-color);
background-color: var(--bg-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin-right: 10px;
}

.theme-toggle:hover {
Expand All @@ -86,18 +100,28 @@ body {
}

.title {
font-size: 1.8rem;
font-weight: 700;
font-size: 2rem;
font-weight: 800;
margin: 0;
color: var(--text-color);
letter-spacing: -0.5px;
background: linear-gradient(to right, #66D4F6, #4D92FF, #BB65FF);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.description {
font-size: 1rem;
font-weight: 400;
margin: 10px 0;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5;
margin: 16px 0 24px 0;
text-align: center;
color: var(--text-color);
opacity: 0.9;
max-width: 500px;
padding: 0 20px;
}

.how-it-works {
Expand Down Expand Up @@ -133,9 +157,9 @@ body {
padding: 20px;
margin: 0;
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--bg-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
background: var(--card-bg);
box-shadow: 0 4px 12px var(--box-shadow);
width: 100%;
cursor: pointer;
transition: all 0.3s ease;
Expand All @@ -156,6 +180,19 @@ body {
transform: translateY(-2px);
}

.dark-mode .user-info-box,
.dark-mode .info-box {
background: #1A1F35;
border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .info-box:hover,
.dark-mode .learn-more-button:hover,
.dark-mode .theme-toggle:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}

.user-info {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -253,16 +290,23 @@ body {
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
background-color: var(--bg-color);
color: var(--text-color);
background: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--box-shadow);
}

.learn-more-button:hover {
background-color: var(--hover-bg);
border-color: var(--text-color);
}

.dark-mode .learn-more-button,
.dark-mode .theme-toggle {
background: #1A1F35;
border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
.container {
width: 95%;
Expand All @@ -274,7 +318,10 @@ body {
}

.web3auth-logo {
width: 120px;
width: 180px;
height: auto;
margin: 0 auto;
filter: drop-shadow(0 2px 4px var(--box-shadow));
}

.user-info-box {
Expand Down
35 changes: 13 additions & 22 deletions single-factor-auth-web/sfa-web-ton-telegram-example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,13 @@ function App() {
};

useEffect(() => {
const newBgColor = isDarkMode ? "#1a1a1a" : "#ffffff";
const newTextColor = isDarkMode ? "#ffffff" : "#333333";
document.documentElement.style.setProperty("--bg-color", newBgColor);
document.documentElement.style.setProperty("--text-color", newTextColor);
document.documentElement.classList.toggle("dark-mode", isDarkMode);
if (isDarkMode) {
document.documentElement.classList.add("dark-mode");
document.body.classList.add("dark-mode");
} else {
document.documentElement.classList.remove("dark-mode");
document.body.classList.remove("dark-mode");
}
}, [isDarkMode]);

useEffect(() => {
Expand Down Expand Up @@ -168,25 +170,14 @@ function App() {
{isDarkMode ? <Sun className="text-yellow-500" /> : <Moon className="text-gray-700" />}
</button>
</div>
<h4 className="title">Telegram MiniApp Demo</h4>
</div>

<div className="description">
<p>
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!
</p>
</div>
<div className="title">
<h4>Web3Auth Telegram MiniApp</h4>
</div>

<div className="how-it-works">
<h3>How It Works</h3>
<ul>
<li>Your Telegram account authenticates you securely, creating an embedded wallet.</li>
<li>The wallet is available across both desktop and mobile Telegram clients.</li>
<li>Your wallet stays accessible whenever you log in with Telegram—no setup needed each time.</li>
</ul>
<div className="description">
<p>Seamless wallet access on any chain with Telegram. Just one click, and you're in!</p>
</div>
</div>

{isLoggingIn ? (
<Loading />
) : (
Expand Down

0 comments on commit 0e519aa

Please sign in to comment.