Skip to content

feat: add friendbot banner for testnet #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ejirowebfi merged 1 commit into from
Mar 24, 2026
Merged

feat: add friendbot banner for testnet #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

79 changes: 37 additions & 42 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,11 @@
import { ToastContainer,Button,Spinner } from './components/UI';
import { ToastContainer, Button, Spinner } from './components/UI';
import './App.css'
import { useDarkMode } from './hooks/useDarkMode'

function App() {
const [dark, setDark] = useDarkMode()

return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
<header className="bg-white dark:bg-gray-800 shadow">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">StellarForge</h1>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Stellar Token Deployer</p>
</div>
<button
onClick={() => setDark(!dark)}
aria-label="Toggle dark mode"
className="p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{dark ? (
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
</svg>
) : (
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
)}
</button>
</div>
</header>

<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="px-4 py-6 sm:px-0">
<div className="border-4 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-8">
<div className="text-center">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Welcome to Nova Launch</h2>
<p className="text-gray-600 dark:text-gray-400 mb-8">Deploy your custom tokens on Stellar blockchain</p>
<button className="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded">
Get Started
</button>
import { Routes, Route, Navigate } from 'react-router-dom'
import { useState } from 'react'
import { StellarProvider } from './context/StellarContext'
import { WalletProvider } from './context/WalletContext'
import { ToastProvider, useToast } from './context/ToastContext'
import { NetworkProvider } from './context/NetworkContext'
import { NetworkProvider, useNetwork } from './context/NetworkContext'
import { NetworkSwitcher } from './components/NetworkSwitcher'
import { useWallet } from './hooks/useWallet'
import { truncateAddress, formatXLM } from './utils/formatting'
Expand All @@ -67,6 +30,11 @@ const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {
function AppContent() {
const { wallet, connect, disconnect, isConnecting, error, isInstalled } = useWallet()
const { addToast } = useToast()
const { network } = useNetwork()
const [showBanner, setShowBanner] = useState(true)

const isLowBalance = wallet.isConnected && wallet.balance && parseFloat(wallet.balance) < 10
const showFriendbotBanner = showBanner && network === 'testnet' && isLowBalance

const handleGetStarted = () => addToast("Welcome! Let's deploy your token.", 'info')

Expand Down Expand Up @@ -149,6 +117,33 @@ function AppContent() {
</div>
</header>

{showFriendbotBanner && (
<div className="bg-blue-50 border-b border-blue-200 p-4">
<div className="max-w-7xl mx-auto flex items-center justify-between">
<div className="text-blue-800 text-sm">
Your testnet balance is low. Get free testnet XLM from{' '}
<a
href={`https://friendbot.stellar.org/?addr=${wallet.address}`}
target="_blank"
rel="noopener noreferrer"
className="font-bold underline"
>
Friendbot
</a>.
</div>
<button
onClick={() => setShowBanner(false)}
className="text-blue-600 hover:text-blue-800 focus:outline-none ml-4"
aria-label="Dismiss banner"
>
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
</div>
</div>
)}

<main id="main-content" className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="px-4 py-6 sm:px-0">
{error && (
Expand Down
Loading