Skip to content

Commit 37db540

Browse files
0xjojo10xjojo1
authored
Merge pull request #1 from 0xjojo1/main
update
2 parents e81a01c + f1f3657 commit 37db540

20 files changed

+652
-456
lines changed

‎app/page.tsx‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,45 +22,23 @@ export default function DashboardPage() {
2222
};
2323

2424
const handleSend = () => {
25-
console.log('Send action clicked');
26-
// Navigate to send page or open send modal
25+
router.push('/transactions/new?type=send_token');
2726
};
2827

2928
const handleSwap = () => {
30-
console.log('Swap action clicked');
31-
// Navigate to swap page or open swap modal
32-
};
33-
34-
const handleBuy = () => {
35-
console.log('Buy action clicked');
36-
// Navigate to buy page or open buy modal
29+
router.push('/transactions/new?type=custom');
3730
};
3831

3932
const handleReceive = () => {
4033
console.log('Receive action clicked');
4134
// Show receive address or QR code
4235
};
4336

44-
const handleManageWallets = () => {
45-
router.push('/wallets');
46-
};
47-
48-
const handleSettings = () => {
49-
router.push('/settings');
50-
};
51-
5237
return (
5338
<PageContainer>
5439
<div className='space-y-6'>
5540
{/* Transaction Activity Panel - Full Width */}
56-
<TransactionActivityPanel
57-
onSend={handleSend}
58-
onSwap={handleSwap}
59-
onBuy={handleBuy}
60-
onReceive={handleReceive}
61-
onManageWallets={handleManageWallets}
62-
onSettings={handleSettings}
63-
/>
41+
<TransactionActivityPanel onSend={handleSend} onSwap={handleSwap} onReceive={handleReceive} />
6442

6543
{/* Two Column Layout */}
6644
<div className='grid gap-6 md:grid-cols-2'>

‎app/transactions/new/page.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,26 @@ import { Card, CardContent } from '@/components/ui/card';
55
import { Coins } from 'lucide-react';
66
import { useSelectedSafeAddress } from '@/providers/SafeProvider';
77
import { TransactionFlow } from '@/components/Transactions/TransactionFlow/TransactionFlow';
8+
import { useTransactionDetails } from '@/hooks/safe/useTransactionDetails';
89

9-
export default function NewTransactionPage() {
10+
interface NewTransactionPageProps {
11+
searchParams: {
12+
type?: string;
13+
safeTxHash?: string;
14+
};
15+
}
16+
17+
export default function NewTransactionPage({ searchParams }: NewTransactionPageProps) {
1018
const { selectedSafeAddress } = useSelectedSafeAddress();
1119

20+
const typeParam = searchParams.type;
21+
const safeTxHash = searchParams.safeTxHash;
22+
23+
const initialType =
24+
typeParam === 'send_token' || typeParam === 'custom' ? (typeParam as 'send_token' | 'custom') : undefined;
25+
26+
const { transactionDetails, loading } = useTransactionDetails(safeTxHash);
27+
1228
if (!selectedSafeAddress) {
1329
return (
1430
<PageContainer>
@@ -29,7 +45,9 @@ export default function NewTransactionPage() {
2945

3046
return (
3147
<PageContainer>
32-
<TransactionFlow />
48+
{safeTxHash && loading ? null : (
49+
<TransactionFlow initialType={initialType} pendingTransaction={safeTxHash ? transactionDetails ?? undefined : undefined} />
50+
)}
3351
</PageContainer>
3452
);
3553
}

‎app/transactions/queue/page.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@ import { TransactionsQueue } from '@/components/Transactions/TransactionsQueue';
55
import { useSelectedSafeAddress } from '@/providers/SafeProvider';
66
import { Card, CardContent } from '@/components/ui/card';
77
import { Clock } from 'lucide-react';
8+
import { useRouter } from 'next/navigation';
9+
import { SafeMultisigTransactionResponse } from '@safe-global/types-kit';
810

911
export default function TransactionsQueuePage() {
12+
const router = useRouter();
1013
const { selectedSafeAddress } = useSelectedSafeAddress();
1114

1215
if (!selectedSafeAddress) {
@@ -35,7 +38,11 @@ export default function TransactionsQueuePage() {
3538
</p>
3639
</div>
3740

38-
<TransactionsQueue />
41+
<TransactionsQueue
42+
onTransactionClick={(tx: SafeMultisigTransactionResponse) =>
43+
router.push(`/transactions/new?safeTxHash=${tx.safeTxHash}`)
44+
}
45+
/>
3946
</div>
4047
</PageContainer>
4148
);

‎components/Dashboard/TransactionActivityPanel.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,15 @@
22

33
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
44
import { Button } from '@/components/ui/button';
5-
import { Send, ArrowLeftRight, Plus, Download, Wallet, Settings } from 'lucide-react';
5+
import { Send, ArrowLeftRight, Download } from 'lucide-react';
66

77
interface TransactionActivityPanelProps {
88
onSend?: () => void;
99
onSwap?: () => void;
10-
onBuy?: () => void;
1110
onReceive?: () => void;
12-
onManageWallets?: () => void;
13-
onSettings?: () => void;
1411
}
1512

16-
export function TransactionActivityPanel({
17-
onSend,
18-
onSwap,
19-
onBuy,
20-
onReceive,
21-
onManageWallets,
22-
onSettings,
23-
}: TransactionActivityPanelProps) {
13+
export function TransactionActivityPanel({ onSend, onSwap, onReceive }: TransactionActivityPanelProps) {
2414
return (
2515
<Card className='col-span-full'>
2616
<CardHeader className='pb-4'>
@@ -35,7 +25,7 @@ export function TransactionActivityPanel({
3525
</CardHeader>
3626
<CardContent className='space-y-6'>
3727
{/* Primary Action Buttons */}
38-
<div className='grid grid-cols-2 md:grid-cols-4 gap-3'>
28+
<div className='grid grid-cols-2 md:grid-cols-3 gap-3'>
3929
<Button variant='outline' className='flex flex-col items-center gap-2 h-auto py-4' onClick={onSend}>
4030
<Send className='h-5 w-5' />
4131
<span className='text-sm'>Send</span>
@@ -46,11 +36,6 @@ export function TransactionActivityPanel({
4636
<span className='text-sm'>Swap</span>
4737
</Button>
4838

49-
<Button variant='outline' className='flex flex-col items-center gap-2 h-auto py-4' onClick={onBuy}>
50-
<Plus className='h-5 w-5' />
51-
<span className='text-sm'>Buy Crypto</span>
52-
</Button>
53-
5439
<Button variant='outline' className='flex flex-col items-center gap-2 h-auto py-4' onClick={onReceive}>
5540
<Download className='h-5 w-5' />
5641
<span className='text-sm'>Receive</span>

‎components/Transactions/TransactionFlow/TransactionBuilder.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@ import { Button } from '@/components/ui/button';
77
import { Input } from '@/components/ui/input';
88
import { Label } from '@/components/ui/label';
99
import { Textarea } from '@/components/ui/textarea';
10-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
1110
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
1211
import { useBalance } from '@/hooks/safe/useBalance';
13-
14-
type TransactionType = 'send_token' | 'custom';
12+
import type { TransactionType } from './TransactionTypeSelector';
1513

1614
interface BuildFormData {
1715
recipient?: string;
@@ -157,8 +155,8 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
157155
};
158156

159157
const renderSendTokenForm = () => (
160-
<div className='space-y-4'>
161-
<div>
158+
<div className='grid gap-4'>
159+
<div className='grid gap-2'>
162160
<Label htmlFor='recipient'>Recipient Address</Label>
163161
<Input
164162
id='recipient'
@@ -167,10 +165,10 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
167165
onChange={(e) => setFormData((prev) => ({ ...prev, recipient: e.target.value }))}
168166
className={errors.recipient ? 'border-destructive' : ''}
169167
/>
170-
{errors.recipient && <p className='text-sm text-destructive mt-1'>{errors.recipient}</p>}
168+
{errors.recipient && <p className='text-sm text-destructive'>{errors.recipient}</p>}
171169
</div>
172170

173-
<div>
171+
<div className='grid gap-2'>
174172
<Label htmlFor='tokenAddress'>Token (Optional - ETH if empty)</Label>
175173
<Input
176174
id='tokenAddress'
@@ -179,10 +177,10 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
179177
onChange={(e) => setFormData((prev) => ({ ...prev, tokenAddress: e.target.value }))}
180178
className={errors.tokenAddress ? 'border-destructive' : ''}
181179
/>
182-
{errors.tokenAddress && <p className='text-sm text-destructive mt-1'>{errors.tokenAddress}</p>}
180+
{errors.tokenAddress && <p className='text-sm text-destructive'>{errors.tokenAddress}</p>}
183181
</div>
184182

185-
<div>
183+
<div className='grid gap-2'>
186184
<Label htmlFor='amount'>Amount</Label>
187185
<Input
188186
id='amount'
@@ -193,17 +191,17 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
193191
onChange={(e) => setFormData((prev) => ({ ...prev, amount: e.target.value }))}
194192
className={errors.amount ? 'border-destructive' : ''}
195193
/>
196-
{errors.amount && <p className='text-sm text-destructive mt-1'>{errors.amount}</p>}
194+
{errors.amount && <p className='text-sm text-destructive'>{errors.amount}</p>}
197195
{balances.length > 0 && (
198-
<p className='text-sm text-muted-foreground mt-1'>Available tokens: {balances.length} types</p>
196+
<p className='text-sm text-muted-foreground'>Available tokens: {balances.length} types</p>
199197
)}
200198
</div>
201199
</div>
202200
);
203201

204202
const renderCustomContractForm = () => (
205-
<div className='space-y-4'>
206-
<div>
203+
<div className='grid gap-4'>
204+
<div className='grid gap-2'>
207205
<Label htmlFor='contractAddress'>Contract Address</Label>
208206
<Input
209207
id='contractAddress'
@@ -212,10 +210,10 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
212210
onChange={(e) => setFormData((prev) => ({ ...prev, contractAddress: e.target.value }))}
213211
className={errors.contractAddress ? 'border-destructive' : ''}
214212
/>
215-
{errors.contractAddress && <p className='text-sm text-destructive mt-1'>{errors.contractAddress}</p>}
213+
{errors.contractAddress && <p className='text-sm text-destructive'>{errors.contractAddress}</p>}
216214
</div>
217215

218-
<div>
216+
<div className='grid gap-2'>
219217
<Label htmlFor='abi'>ABI (JSON format)</Label>
220218
<Textarea
221219
id='abi'
@@ -225,10 +223,10 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
225223
className={errors.abi ? 'border-destructive' : ''}
226224
rows={4}
227225
/>
228-
{errors.abi && <p className='text-sm text-destructive mt-1'>{errors.abi}</p>}
226+
{errors.abi && <p className='text-sm text-destructive'>{errors.abi}</p>}
229227
</div>
230228

231-
<div>
229+
<div className='grid gap-2'>
232230
<Label htmlFor='functionName'>Function Name</Label>
233231
<Input
234232
id='functionName'
@@ -237,10 +235,10 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
237235
onChange={(e) => setFormData((prev) => ({ ...prev, functionName: e.target.value }))}
238236
className={errors.functionName ? 'border-destructive' : ''}
239237
/>
240-
{errors.functionName && <p className='text-sm text-destructive mt-1'>{errors.functionName}</p>}
238+
{errors.functionName && <p className='text-sm text-destructive'>{errors.functionName}</p>}
241239
</div>
242240

243-
<div>
241+
<div className='grid gap-2'>
244242
<Label htmlFor='value'>Value (ETH to send, optional)</Label>
245243
<Input
246244
id='value'
@@ -251,7 +249,7 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
251249
onChange={(e) => setFormData((prev) => ({ ...prev, value: e.target.value }))}
252250
className={errors.value ? 'border-destructive' : ''}
253251
/>
254-
{errors.value && <p className='text-sm text-destructive mt-1'>{errors.value}</p>}
252+
{errors.value && <p className='text-sm text-destructive'>{errors.value}</p>}
255253
</div>
256254
</div>
257255
);
@@ -261,7 +259,7 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
261259
<CardHeader>
262260
<CardTitle>{type === 'send_token' ? 'Send Token' : 'Custom Contract Transaction'}</CardTitle>
263261
</CardHeader>
264-
<CardContent className='space-y-6'>
262+
<CardContent className='grid gap-6'>
265263
{type === 'send_token' ? renderSendTokenForm() : renderCustomContractForm()}
266264

267265
{errors.general && (
@@ -270,11 +268,11 @@ export function TransactionBuilder({ type, onComplete, onBack }: TransactionBuil
270268
</div>
271269
)}
272270

273-
<div className='flex justify-between'>
274-
<Button variant='outline' onClick={onBack}>
271+
<div className='flex flex-col sm:flex-row gap-3'>
272+
<Button variant='outline' onClick={onBack} className='sm:flex-1'>
275273
Cancel
276274
</Button>
277-
<Button onClick={handleSubmit} disabled={isLoading}>
275+
<Button onClick={handleSubmit} disabled={isLoading} className='sm:flex-1'>
278276
{isLoading ? 'Building...' : 'Build Transaction'}
279277
</Button>
280278
</div>

‎components/Transactions/TransactionFlow/TransactionExecute.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export function TransactionExecute({ transactionData, onComplete, onBack }: Tran
125125
</div>
126126

127127
<p className='text-xs text-muted-foreground text-center'>
128-
"Sign Only" creates a proposal, "Sign & Execute" immediately executes the transaction
128+
&quot;Sign Only&quot; creates a proposal, &quot;Sign &amp; Execute&quot; immediately executes the transaction
129129
</p>
130130
</div>
131131
);

0 commit comments

Comments
 (0)