Skip to content

Commit

Permalink
add welcome
Browse files Browse the repository at this point in the history
  • Loading branch information
@jazz-cb
jazz-cb committed Sep 13, 2024
1 parent 8c1976e commit a3c55db
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 19 deletions.
74 changes: 55 additions & 19 deletions app/aave/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Loader2 } from "lucide-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";

export default function AaveInteraction() {
const [showIntro, setShowIntro] = useState(true);
const [accountData, setAccountData] = useState<any>(null);
const [supplyAmount, setSupplyAmount] = useState<string>('');
const [borrowAmount, setBorrowAmount] = useState<string>('');
Expand Down Expand Up @@ -84,16 +85,47 @@ export default function AaveInteraction() {
}
};

const closeIntro = () => {
setShowIntro(false);
};

useEffect(() => {
getUserAccountData();
}, []);

return (
<div className="min-h-screen bg-gradient-to-br from-white to-lavender-100 text-gray-800">
<div className="min-h-screen bg-white text-gray-800 relative">
{showIntro && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<Card className="w-full max-w-3xl bg-white shadow-xl">
<CardHeader>
<CardTitle className="text-2xl text-blue-600">Welcome to USDCFlow</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-4">USDCFlow is a lending App on Base-Sepolia that showcases:</p>
<ul className="list-disc list-inside text-gray-700 mb-4">
<li>MPC Wallets and CDP SDK for seamless, user-first onchain DeFi experiences</li>
<li>Customizable, accessible DeFi with global reach, low fees, and instant transactions</li>
<li>AI code assistants for quick frontend creation of onchain DeFi apps</li>
<li>Easily extend the app's repo with layout changes and DeFi smart contract integration</li>
</ul>
<p className="text-sm text-gray-600">Note: This app uses testnet USDC</p>
</CardContent>
<CardFooter className="flex justify-end">
<Button
onClick={closeIntro}
className="bg-gradient-to-r from-lavender-400 to-blue-500 hover:from-lavender-500 hover:to-blue-600 text-white transition-all duration-300"
>
Next
</Button>
</CardFooter>
</Card>
</div>
)}

<div className="container mx-auto px-4 py-12">
<h1 className="text-4xl font-semibold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
Aave V3 Interaction on Base Sepolia
<h1 className="text-4xl font-semibold text-center mb-8 text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
USDCFlow
</h1>

{isLoading ? (
Expand All @@ -102,22 +134,26 @@ export default function AaveInteraction() {
</div>
) : (
<>
{accountData && (
<Card className="mb-8 bg-white shadow-lg">
<CardHeader>
<CardTitle className="text-2xl text-blue-600">Account Overview</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-2">Wallet Address: {accountData.walletAddress}</p>
<p>Wallet Balance: {parseFloat(accountData.usdcBalance).toFixed(2)} USDC</p>
</CardContent>
</Card>
)}

<Card className="mb-8 bg-lavender-50 shadow-lg">
<CardHeader>
<CardTitle className="text-2xl text-blue-600">USDC Lending App</CardTitle>
</CardHeader>
<CardContent>
<p className="mb-2">This demo app allow you to:</p>
<ul className="list-disc list-inside text-gray-700">
<li>Borrow and lend USDC effortlessly with USDCFlow, the all-in-one USDC platform</li>
<li>Competitive yields, no credit checks, and instant access to USDC</li>
<li>Earn attractive yields on your idle USDC holdings with our user-friendly lending platform</li>
<li>Seamless, secure, and intuitive experience for borrowing and lending</li>
</ul>
</CardContent>
<CardFooter>
<p className="text-sm text-gray-600">Note: This app uses testnet USDC. Make sure you have Base Sepolia USDC in your wallet.</p>
</CardFooter>
</Card>
<Card className="mb-8 bg-white shadow-lg">
<CardHeader>
<CardTitle className="text-2xl text-blue-600">Aave Lending Pool</CardTitle>
<CardDescription>Interact with Aave lending pool</CardDescription>
<CardTitle className="text-2xl text-blue-600">Account overview</CardTitle>
</CardHeader>
<CardContent>
{error && (
Expand All @@ -131,11 +167,11 @@ export default function AaveInteraction() {
</Button>
{accountData && (
<div className="bg-lavender-50 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-blue-600">Account Data:</h3>
<p className="mb-2">Wallet Address: {accountData.walletAddress}</p>
<p>Wallet Balance: {parseFloat(accountData.usdcBalance).toFixed(2)} USDC</p>
<p className="mb-1">Total Deposited: {accountData.totalDeposited} USDC</p>
<p className="mb-1">Total Debt: {accountData.totalDebtBase} USDC</p>
<p className="mb-1">Available to borrow: {accountData.availableBorrowsBase} USDC</p>
<p>Health Factor: {accountData.healthFactor}</p>
</div>
)}
</CardContent>
Expand Down
53 changes: 53 additions & 0 deletions app/cryptopunch/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use client';

import React, { useState, useEffect } from 'react';
import { FaFistRaised } from 'react-icons/fa';

export default function PunchGame() {
const [score, setScore] = useState(0);
const [showPunch, setShowPunch] = useState(false);
const [glovePosition, setGlovePosition] = useState({ x: 0, y: 0 });

const handlePunch = () => {
setScore(score + 1);
setShowPunch(true);
setGlovePosition({ x: Math.random() * 20 - 10, y: Math.random() * 20 - 10 });
setTimeout(() => {
setShowPunch(false);
setGlovePosition({ x: 0, y: 0 });
}, 300);
};

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-8 text-center">Punch the Glove!</h1>
<div className="text-xl sm:text-2xl mb-4">Score: {score}</div>
<div className="relative w-48 h-48 sm:w-64 sm:h-64 md:w-80 md:h-80">
<svg
viewBox="0 0 200 200"
className={`w-full h-full cursor-pointer transform transition-transform duration-300 ${showPunch ? 'scale-95' : 'hover:scale-105'}`}
style={{
transform: `translate(${glovePosition.x}px, ${glovePosition.y}px)`,
}}
onClick={handlePunch}
>
<path
d="M100 180c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z"
fill="#d25627"
/>
<path
d="M100 30c38.66 0 70 31.34 70 70s-31.34 70-70 70-70-31.34-70-70 31.34-70 70-70z"
fill="#e64c3c"
/>
<rect x="70" y="20" width="60" height="40" fill="#c03a2b" />
</svg>
{showPunch && (
<FaFistRaised
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-4xl"
/>
)}
</div>
<p className="mt-4 text-lg sm:text-xl text-center">Click or tap the glove to punch!</p>
</div>
);
}

0 comments on commit a3c55db

Please sign in to comment.