Skip to content

Commit

Permalink
Merge pull request #7 from fastbuka/tesimune
Browse files Browse the repository at this point in the history
Added link
  • Loading branch information
tesimune authored Jan 4, 2025
2 parents c92d19c + bcd158a commit 6935f03
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 101 deletions.
2 changes: 0 additions & 2 deletions .env

This file was deleted.

1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Provide the base_url for the backend API
NEXT_PUBLIC_BACKEND_URL=https://api.domain.com/api
NEXT_PUBLIC_BRIDGE_KEY=dewdew
20 changes: 4 additions & 16 deletions next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,12 @@ const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.pexels.com",
protocol: 'http',
hostname: '*',
},
{
protocol: "https",
hostname: "images.unsplash.com",
},
{
protocol: "https",
hostname: "img.freepik.com",
},
{
protocol: "https",
hostname: "plus.unsplash.com",
},
{
protocol: "https",
hostname: "cdn.pixabay.com",
protocol: 'https',
hostname: '*',
},
],
},
Expand Down
8 changes: 8 additions & 0 deletions package-lock.json

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

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@ngnc/bridge": "^1.4.1",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
Expand Down
197 changes: 114 additions & 83 deletions src/app/user/wallet/page.tsx
Original file line number Diff line number Diff line change
@@ -1,149 +1,180 @@
// src/app/user/wallet/page.tsx
"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { getToken, getUser } from "@/utils/token";
import { getProfile } from "@/utils/userProfile";
import { Wallet, CreditCard, RefreshCcw, Check, Copy } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { useRouter } from "next/navigation";
import { useProfile } from "@/queries/profile";
import { getDefaultAddress } from "@/utils/defaults";

'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { getToken, getUser } from '@/utils/token';
import { getProfile } from '@/utils/userProfile';
import {
Wallet,
CreditCard,
RefreshCcw,
Check,
Copy,
DollarSign,
} from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { useRouter } from 'next/navigation';
import { useProfile } from '@/queries/profile';
import { getDefaultAddress } from '@/utils/defaults';
import { FaNairaSign } from 'react-icons/fa6';

export default function UserWallet() {
const [amount, setAmount] = useState("");
const [address, setAddress] = useState("");
const [amount, setAmount] = useState(100);
const [address, setAddress] = useState('');
const [balance, setBalance] = useState(0);
const [isCopied, setIsCopied] = useState(false)
const [isCopied, setIsCopied] = useState(false);
const [token, setToken] = useState<string | null>(null);
const [isUserLoggedIn, setIsUserLoggedIn] = useState(!!getToken());
const router = useRouter()



const router = useRouter();

// Set the wallet address directly from profile data when available
useEffect(() => {
const profile = getProfile();
const profile = getProfile();
// console.log(profile)
if (profile) {

setAddress(profile.walletAddress);
setBalance(profile.balance);
}
}, []);



// Display only the first 4 and last 4 characters of the address
const formattedAddress =
address.length > 8 ? `${getDefaultAddress(address).slice(0, 6)}...${getDefaultAddress(address).slice(-6)}` : getDefaultAddress(address);


address.length > 8
? `${getDefaultAddress(address).slice(0, 6)}...${getDefaultAddress(
address
).slice(-6)}`
: getDefaultAddress(address);

const handleTopUp = (method: string) => {
// Implement top-up logic here
console.log(`Top up ${amount} via ${method}`);

if (amount < 100) {
alert('Amount must be greater than 0');
return;
} else if (method !== 'ngn' && method !== 'usd') {
alert('Invalid method');
return;
}

const Bridge = require('@ngnc/bridge');
const widget = new Bridge({
key: process.env.NEXT_PUBLIC_BRIDGE_KEY,
type: 'buy',
currency: method,
data: {
amount: amount,
network: 'Stellar',
wallet_address: formattedAddress,
type: 'buy',
},
onSuccess: (response: {}) => alert('Transaction successful'),
onLoad: () => console.log('Bridge widget loaded successfully'),
});
widget.setup();
widget.open();
};


// copy wallet address to clipboard
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(address)
setIsCopied(true)
setTimeout(() => setIsCopied(false), 4000)
await navigator.clipboard.writeText(address);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 4000);
} catch (err) {
console.error('Failed to copy text: ', err)
console.error('Failed to copy text: ', err);
}
}
};

return (
<>
{isUserLoggedIn ? (
<div>
<h1 className="text-2xl md:text-4xl font-bold mb-6">Your Wallet</h1>
<h1 className='text-2xl md:text-4xl font-bold mb-6'>Your Wallet</h1>

<div className="bg-white rounded-lg shadow-md p-6 mb-8">
<div className="flex items-center mb-4">
<Wallet className="h-8 w-8 text-green-500 mr-3" />
<h2 className="text-2xl font-semibold">Balance: ₦{balance}</h2>

<div className='bg-white rounded-lg shadow-md p-6 mb-8'>
<div className='flex items-center mb-4'>
<Wallet className='h-8 w-8 text-green-500 mr-3' />
<h2 className='text-2xl font-semibold'>Balance: ₦{balance}</h2>
</div>

<button
onClick={copyToClipboard}
className="focus:outline-none flex "
aria-label="Copy mint hash"
>
{formattedAddress}
{isCopied ? (
<Check className="w-5 h-5 text-green-500" />
) : (
<Copy className="w-5 h-5" />
)}
</button>


<p className="text-gray-600 mb-4">
onClick={copyToClipboard}
className='focus:outline-none flex '
aria-label='Copy mint hash'
>
{formattedAddress}
{isCopied ? (
<Check className='w-5 h-5 text-green-500' />
) : (
<Copy className='w-5 h-5' />
)}
</button>

<p className='text-gray-600 mb-4'>
Top up your wallet to order from your favorite restaurants.
</p>

<div className="mb-4">
<div className='mb-4'>
<Input
type="number"
placeholder="Enter amount"
type='number'
placeholder='Enter amount'
value={amount}
onChange={(e) => setAmount(e.target.value)}
className="mb-2"
onChange={(e) => setAmount(Number(e.target.value))}
className='mb-2'
/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
<Button
onClick={() => handleTopUp("Solana")}
className="flex items-center justify-center"
onClick={() => handleTopUp('ngn')}
className='flex items-center justify-center'
>
<img
{/* <img
src="/images/ngnc.png"
alt="Solana"
className="h-5 w-5 mr-2"
/>
Top-Up with NGNC (Stellar)
/> */}
<FaNairaSign className='h-5 w-5 mr-2' />
Top-Up with NGN (Links)
</Button>
<Button
onClick={() => handleTopUp("Paystack")}
className="flex items-center justify-center"
onClick={() => handleTopUp('usd')}
className='flex items-center justify-center'
>
<CreditCard className="h-5 w-5 mr-2" />
Top-Up with Paystack
<DollarSign className='h-5 w-5 mr-2' />
Top-Up with USD (Links)
</Button>
<Button
onClick={() => handleTopUp("Flutterwave")}
className="flex items-center justify-center"
onClick={() => handleTopUp('Flutterwave')}
className='flex items-center justify-center'
>
<RefreshCcw className="h-5 w-5 mr-2" />
Top-Up with Flutterwave
<RefreshCcw className='h-5 w-5 mr-2' />
Top-Up with Exachange
</Button>
</div>
</div>
</div>

<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-xl font-semibold mb-4">Transaction History</h2>
<div className='bg-white rounded-lg shadow-md p-6'>
<h2 className='text-xl font-semibold mb-4'>Transaction History</h2>
{/* Add transaction history table or list here */}
</div>
</div>
) : (
<>
<Alert variant={"warning"} className="mb-4">
<AlertDescription>
You must be logged in to access this page
</AlertDescription>
</Alert>

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={() => router.push("/auth/login")}>Login</button>
<>
<Alert variant={'warning'} className='mb-4'>
<AlertDescription>
You must be logged in to access this page
</AlertDescription>
</Alert>

<button
className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
onClick={() => router.push('/auth/login')}
>
Login
</button>
</>
)}
</>
Expand Down

0 comments on commit 6935f03

Please sign in to comment.