JavaScript

[marwajameel]

<style> /* رسید کا اسٹائل */ .receipt-box { display: none; /* شروع میں چھپی رہے گی */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.2); text-align: center; width: 90%; max-width: 350px; border-top: 5px solid #28a745; z-index: 1000; } .receipt-box h2 { color: #28a745; margin-bottom: 5px; } .receipt-detail { font-size: 14px; border-bottom: 1px dashed #ddd; padding: 10px 0; } .close-btn { background: #0052FF; color: white; border: none; padding: 8px 20px; border-radius: 5px; margin-top: 15px; cursor: pointer; } </style>

شکریہ! ✅

ادائیگی کامیابی سے مکمل ہو گئی ہے

وصول کنندہ: جمیل احمد کلیال

رقم: 1.00 USD (USDC)

نیٹ ورک: Base Mainnet

تاریخ:

بند کریں

<script> // جب ادائیگی کامیاب ہو جائے تو یہ فنکشن چلے گا function showReceipt() { document.getElementById('currentDate').innerText = new Date().toLocaleDateString(); document.getElementById('paymentReceipt').style.display = 'block'; } </script>

[marwajameel]

import {
ConnectWallet,
Wallet,
WalletDropdown,
WalletAdvancedAddressDetails,
WalletAdvancedTokenHoldings,
WalletAdvancedTransactionActions,
WalletAdvancedWalletActions,
} from '@coinbase/onchainkit/wallet';

function WalletAdvancedDemo() {
return (

{/* والٹ کنیکٹ ہونے پر صارف کا اوتار دکھاتا ہے */}

میرا والٹ

    <WalletDropdown>
      {/* ایڈوانسڈ تفصیلات: ایڈریس اور نیٹ ورک */}
      <WalletAdvancedAddressDetails />
      
      {/* ٹوکن ہولڈنگز: صارف کے پاس موجود ٹوکنز کی فہرست */}
      <WalletAdvancedTokenHoldings />
      
      {/* ٹرانزیکشن ہسٹری اور دیگر ایکشنز */}
      <WalletAdvancedTransactionActions />
      
      {/* والٹ مینیجمنٹ کے اختیارات جیسے لاگ آؤٹ وغیرہ */}
      <WalletAdvancedWalletActions />
    </WalletDropdown>
  </Wallet>
</div>

);
}

export default WalletAdvancedDemo;

[marwajameel]

import {
ConnectWallet,
Wallet,
WalletDropdown,
WalletAdvancedAddressDetails,
WalletAdvancedTokenHoldings,
WalletAdvancedTransactionActions,
WalletAdvancedWalletActions,
} from '@coinbase/onchainkit/wallet';

function WalletAdvancedDemo() {
return (

{/* والٹ کنیکٹ ہونے پر صارف کا اوتار دکھاتا ہے */}

میرا والٹ

    <WalletDropdown>
      {/* ایڈوانسڈ تفصیلات: ایڈریس اور نیٹ ورک */}
      <WalletAdvancedAddressDetails />
      
      {/* ٹوکن ہولڈنگز: صارف کے پاس موجود ٹوکنز کی فہرست */}
      <WalletAdvancedTokenHoldings />
      
      {/* ٹرانزیکشن ہسٹری اور دیگر ایکشنز */}
      <WalletAdvancedTransactionActions />
      
      {/* والٹ مینیجمنٹ کے اختیارات جیسے لاگ آؤٹ وغیرہ */}
      <WalletAdvancedWalletActions />
    </WalletDropdown>
  </Wallet>
</div>

);
}

export default WalletAdvancedDemo;

[marwajameel]

import {
ConnectWallet,
Wallet,
WalletDropdown,
WalletAdvancedAddressDetails,
WalletAdvancedTokenHoldings,
WalletAdvancedTransactionActions,
WalletAdvancedWalletActions,
} from '@coinbase/onchainkit/wallet';

function WalletAdvancedDemo() {
return (

{/* والٹ کنیکٹ ہونے پر صارف کا اوتار دکھاتا ہے */}

میرا والٹ

    <WalletDropdown>
      {/* ایڈوانسڈ تفصیلات: ایڈریس اور نیٹ ورک */}
      <WalletAdvancedAddressDetails />
      
      {/* ٹوکن ہولڈنگز: صارف کے پاس موجود ٹوکنز کی فہرست */}
      <WalletAdvancedTokenHoldings />
      
      {/* ٹرانزیکشن ہسٹری اور دیگر ایکشنز */}
      <WalletAdvancedTransactionActions />
      
      {/* والٹ مینیجمنٹ کے اختیارات جیسے لاگ آؤٹ وغیرہ */}
      <WalletAdvancedWalletActions />
    </WalletDropdown>
  </Wallet>
</div>

);
}

export default WalletAdvancedDemo;

[marwajameel]

import {
Transaction,
TransactionButton,
TransactionResponse,
TransactionStatus,
TransactionStatusAction,
TransactionStatusLabel
} from '@coinbase/onchainkit/transaction';
import type { Address } from 'viem';

// ٹرانزیکشن کی تفصیلات (مثال کے طور پر ٹوکن بھیجنا)
const contracts = [
{
address: '0x123...' as Address, // کنٹریکٹ ایڈریس
abi: [...], // کنٹریکٹ ABI
functionName: 'transfer',
args: ['0xABC...', 100], // وصول کنندہ اور رقم
},
];

function TransactionHandler() {
return (

Base ٹرانزیکشن

  <Transaction
    chainId={8453} // Base Mainnet کا ID
    contracts={contracts}
    onSuccess={(response) => console.log('کامیاب ٹرانزیکشن:', response)}
    onError={(error) => console.error('خرابی:', error)}
  >
    {/* ٹرانزیکشن شروع کرنے کا بٹن */}
    <TransactionButton text="ابھی ٹرانزیکشن کریں" />
    
    {/* ٹرانزیکشن کی صورتحال دکھانے کے لیے */}
    <TransactionStatus>
      <TransactionStatusLabel />
      <TransactionStatusAction />
    </TransactionStatus>
    
    {/* ٹرانزیکشن کا جواب (Hash وغیرہ) */}
    <TransactionResponse />
  </Transaction>
</div>

);
}

[marwajameel]

import {
ConnectWallet,
Wallet,
WalletDropdown,
WalletAdvancedAddressDetails,
WalletAdvancedTokenHoldings,
WalletAdvancedTransactionActions,
WalletAdvancedWalletActions
} from '@coinbase/onchainkit/wallet';
import {
Transaction,
TransactionButton,
TransactionResponse,
TransactionStatus,
TransactionStatusAction,
TransactionStatusLabel
} from '@coinbase/onchainkit/transaction';
import type { Address } from 'viem';

// ٹرانزیکشن کے لیے کنٹریکٹ کی تفصیلات
const contracts = [
{
address: '0x123...' as Address, // یہاں اپنا اسمارٹ کنٹریکٹ ایڈریس لکھیں
abi: [...], // یہاں کنٹریکٹ کا ABI شامل کریں
functionName: 'transfer',
args: ['0xABC...', 100], // وصول کنندہ کا ایڈریس اور رقم
},
];

export default function SDN_OnchainPortal() {
return (

Base آن چین پورٹل

  {/* والٹ سیکشن */}
  <div className="w-full max-w-md bg-white p-6 rounded-xl shadow-lg border">
    <div className="flex justify-between items-center mb-6">
      <h2 className="text-lg font-semibold">میرا والٹ</h2>
      <Wallet>
        <ConnectWallet>
          <div className="p-2 bg-blue-100 rounded text-blue-700 font-medium">کنیکٹ کریں</div>
        </ConnectWallet>
        <WalletDropdown>
          <WalletAdvancedAddressDetails />
          <WalletAdvancedTokenHoldings />
          <WalletAdvancedTransactionActions />
          <WalletAdvancedWalletActions />
        </WalletDropdown>
      </Wallet>
    </div>

    <hr className="my-6" />

    {/* ٹرانزیکشن سیکشن */}
    <div className="space-y-4">
      <h2 className="text-lg font-semibold">Base ٹرانزیکشن ہینڈلر</h2>
      <Transaction
        chainId={8453} // Base Mainnet ID
        contracts={contracts}
        onSuccess={(response) => console.log('کامیابی:', response)}
        onError={(error) => console.error('خرابی:', error)}
      >
        <TransactionButton 
          className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition"
          text="ٹرانزیکشن کی تصدیق کریں" 
        />
        
        <div className="mt-4 p-3 bg-gray-100 rounded-md">
          <TransactionStatus>
            <TransactionStatusLabel />
            <TransactionStatusAction />
          </TransactionStatus>
          <TransactionResponse />
        </div>
      </Transaction>
    </div>
  </div>
  
  <p className="mt-8 text-sm text-gray-500 italic">
    یہ سسٹم محفوظ طریقے سے Base نیٹ ورک پر کام کرتا ہے۔
  </p>
</div>

);
}