Skip to content

Commit a4c51e2

Browse files
codebestiacodebestia
committed
feat: update panel popup
1 parent 3c80676 commit a4c51e2

File tree

4 files changed

+75
-67
lines changed

4 files changed

+75
-67
lines changed

‎frontend/app/components/Providers.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
2727
rpc: (chain) => {
2828
if (chain.id === sepolia.id) {
2929
return {
30-
nodeUrl: 'https://starknet-sepolia.public.blastapi.io/rpc/v0_7',
30+
nodeUrl: process.env.NEXT_PUBLIC_RPC_URL,
3131
}
3232
}
3333
// Don't provide mainnet RPC to force Sepolia usage

‎frontend/app/components/modals/WalletSignInModal.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const WalletSignInModal = () => {
3232
try {
3333
// Get the public key from the account
3434
// @ts-expect-error - Accessing signer from account
35-
3635

3736
// Create typed data matching backend's expected format
3837
const typedDataMessage = {
@@ -67,16 +66,16 @@ const WalletSignInModal = () => {
6766
if (!publicKey) {
6867
throw new Error('Could not retrieve public key from wallet')
6968
}
70-
69+
7170
const mainSignatures = [signature[-2], signature[-1]]
7271

7372
// Convert signature to numbers for backend
7473
const signatures = mainSignatures.map((sig: string | bigint) =>
7574
typeof sig === 'string' ? parseInt(sig, 16) : Number(sig),
7675
)
77-
console.log("Signature length: ", signature.length)
78-
console.log("Signature", signatures)
79-
console.log("Public Key", publicKey)
76+
console.log('Signature length: ', signature.length)
77+
console.log('Signature', signatures)
78+
console.log('Public Key', publicKey)
8079
// Send to backend for authentication
8180
const response = await SpherreApi.signIn({
8281
signatures,

‎frontend/components/examples/AuthenticationExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,8 @@ const AuthenticationExample = () => {
228228
}`}
229229
>
230230
This button requires authentication before executing sensitive
231-
operations. If you're not authenticated, clicking it will open the
232-
sign-in modal.
231+
operations. If you're not authenticated, clicking it will open
232+
the sign-in modal.
233233
</p>
234234

235235
<button

‎frontend/components/shared/WalletConnected.tsx‎

Lines changed: 68 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,19 @@
33
import Image from 'next/image'
44
import React, { useState, useEffect } from 'react'
55
import avatar from '../../public/Images/avatar.png'
6-
import { Copy, LogOut, X } from 'lucide-react'
7-
import { useAccount } from '@starknet-react/core'
6+
import { Copy, LogOut, X, Power } from 'lucide-react'
7+
import { useAccount, useDisconnect, useNetwork } from '@starknet-react/core'
88
import { useRouter } from 'next/navigation'
9-
import { useTheme } from '@/app/context/theme-context-provider'
109
import { useWalletAuth } from '@/app/context/wallet-auth-context'
1110

1211
const WalletConnected = ({ address }: { address: string }) => {
13-
const { actualTheme } = useTheme()
1412
const [panelOpen, setPanelOpen] = useState(false)
1513
const [copied, setCopied] = useState(false)
1614
const { address: walletAddress } = useAccount()
15+
const { disconnect } = useDisconnect()
16+
const { chain } = useNetwork()
1717
const router = useRouter()
18-
const { logout } = useWalletAuth()
19-
// Dummy balance for now
20-
const balance = '0.00'
18+
const { logout, isAuthenticated, setIsAuthModalOpen } = useWalletAuth()
2119

2220
// Close panel on outside click or ESC
2321
useEffect(() => {
@@ -61,10 +59,14 @@ const WalletConnected = ({ address }: { address: string }) => {
6159
}
6260

6361
const handleDisconnect = async () => {
64-
// Use the auth context logout to clear all auth state
62+
disconnect()
63+
setPanelOpen(false)
64+
router.push('/')
65+
}
66+
67+
const handleLogout = () => {
6568
logout()
6669
setPanelOpen(false)
67-
router.push('/') // Route to connect wallet page (home)
6870
}
6971

7072
return (
@@ -102,62 +104,69 @@ const WalletConnected = ({ address }: { address: string }) => {
102104
</button>
103105
<div className="flex items-center gap-3 mb-4">
104106
<Image src={avatar} alt="avatar" width={40} height={40} />
105-
<span className="text-lg font-semibold text-theme transition-colors duration-300">
106-
{(walletAddress || address).slice(0, 6)}...
107-
{(walletAddress || address).slice(-4)}
108-
</span>
107+
<div className="flex flex-col">
108+
<span className="text-lg font-semibold text-theme transition-colors duration-300">
109+
{(walletAddress || address).slice(0, 6)}...
110+
{(walletAddress || address).slice(-4)}
111+
</span>
112+
<div className="flex items-center gap-2">
113+
<span className="text-xs text-theme-secondary">Network:</span>
114+
<span className="text-xs text-theme">
115+
{chain?.name ?? 'Unknown'}
116+
</span>
117+
</div>
118+
</div>
109119
</div>
110-
<div className="flex gap-2 mb-6">
111-
<button
112-
onClick={handleCopy}
113-
className="p-2 rounded hover:bg-theme-bg-tertiary transition-colors duration-200"
114-
aria-label="Copy address"
115-
>
116-
<Copy className="w-5 h-5 text-primary" />
117-
</button>
120+
121+
{isAuthenticated ? (
122+
<div className="mb-4">
123+
<div className="flex gap-2">
124+
<button
125+
onClick={handleCopy}
126+
className="p-2 rounded hover:bg-theme-bg-tertiary transition-colors duration-200"
127+
aria-label="Copy address"
128+
>
129+
<Copy className="w-5 h-5 text-primary" />
130+
</button>
131+
<button
132+
onClick={handleLogout}
133+
className="flex-1 p-2 rounded bg-theme-bg-tertiary border border-theme-border text-theme-secondary hover:bg-theme-bg-secondary hover:text-theme flex items-center justify-center gap-2 transition-colors duration-200"
134+
>
135+
<LogOut className="w-5 h-5" />
136+
Logout
137+
</button>
138+
</div>
139+
</div>
140+
) : (
141+
<div className="mb-4">
142+
<div className="flex gap-2">
143+
<button
144+
onClick={handleCopy}
145+
className="p-2 rounded hover:bg-theme-bg-tertiary transition-colors duration-200"
146+
aria-label="Copy address"
147+
>
148+
<Copy className="w-5 h-5 text-primary" />
149+
</button>
150+
<button
151+
onClick={() => setIsAuthModalOpen(true)}
152+
className="flex-1 p-2 rounded bg-primary text-white hover:opacity-90 transition-all duration-200"
153+
>
154+
Sign In
155+
</button>
156+
</div>
157+
</div>
158+
)}
159+
160+
<div className="mt-auto flex justify-between gap-2">
118161
<button
119162
onClick={handleDisconnect}
120-
className="p-2 rounded bg-theme-bg-tertiary border border-theme-border text-theme-secondary hover:bg-theme-bg-secondary hover:text-theme flex items-center gap-1 transition-colors duration-200"
121-
aria-label="Logout"
163+
className="flex-1 p-2 rounded border border-theme-border text-theme-secondary hover:bg-theme-bg-tertiary transition-colors duration-200 flex items-center justify-center gap-2"
122164
>
123-
<LogOut className="w-5 h-5" /> Logout
165+
<Power className="w-5 h-5" />
166+
Disconnect Wallet
124167
</button>
125168
</div>
126-
<div className="text-4xl font-bold text-theme mb-2 transition-colors duration-300">
127-
${balance}
128-
</div>
129-
<div className="mb-4">
130-
<span className="text-theme font-semibold transition-colors duration-300">
131-
Activity
132-
</span>
133-
<span className="ml-2 px-2 py-0.5 rounded-full bg-primary text-xs text-white">
134-
0
135-
</span>
136-
</div>
137-
<div className="flex flex-col items-center justify-center h-40">
138-
<svg width="48" height="48" fill="none" viewBox="0 0 24 24">
139-
<rect
140-
width="24"
141-
height="24"
142-
rx="12"
143-
fill={actualTheme === 'dark' ? '#292929' : '#e2e8f0'}
144-
/>
145-
<path
146-
d="M8 17V15.5C8 14.1193 9.11929 13 10.5 13H13.5C14.8807 13 16 14.1193 16 15.5V17"
147-
stroke="#A78BFA"
148-
strokeWidth="1.5"
149-
strokeLinecap="round"
150-
strokeLinejoin="round"
151-
/>
152-
<circle cx="12" cy="9" r="2" stroke="#A78BFA" strokeWidth="1.5" />
153-
</svg>
154-
<p className="text-theme-secondary text-center mt-2 transition-colors duration-300">
155-
Transactions you send from the app will appear here.
156-
</p>
157-
</div>
158-
<button className="w-full mt-4 bg-primary text-white py-2 rounded-lg font-semibold hover:opacity-90 transition-all duration-200">
159-
Create a position
160-
</button>
169+
161170
{copied && (
162171
<div className="absolute top-2 right-16 bg-primary text-white px-2 py-1 rounded shadow-lg">
163172
Copied!

0 commit comments

Comments
 (0)