Private-Phosyn/index.html at main · Miracle395/Private-Phosyn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Phosyn – Private USDC Payment</title>

  <link rel="icon" href="phosyn10.png" type="image/png" sizes="32x32" />
  <link rel="stylesheet" href="phosyn.css" />
</head>
<body>

  <div class="container">
    <div class="modal">

      <!-- HEADER -->
      <div class="top-bar">
        <div class="branding">
          <img src="phosyn.png" alt="Phosyn" />
        </div>
        <button id="connectBtn" class="connect-btn">Connect</button>
      </div>

      <!-- AMOUNT -->
      <div class="amount">$1.00</div>

      <!-- TOKEN INFO -->
      <div class="label">Paying with</div>
      <div class="wallet-info">
        <div class="wallet-token">
          <img src="usdc.png" alt="USDC" />
          <span>USDC</span>
          <span class="chain-tag base">Devnet</span>
        </div>
        <span>1.000000 USDC</span>
      </div>

      <!-- RECIPIENT -->
      <div class="label">To</div>
      <input
        id="recipient"
        type="text"
        value="4M5fmmQNQhXGxT2DfFprXoA9kCGXcDkY3VFgfiT7FzK9"
        disabled
      />

      <!-- MEMO -->
      <div class="label">Memo (optional)</div>
      <input
        id="paymentMemo"
        type="text"
        placeholder="What is this payment for?"
      />

      <!-- PAY -->
      <button id="payBtn" class="pay-btn">Pay</button>

      <!-- LOADER -->
      <div
        id="loader"
        style="
          display:none;
          text-align:center;
          margin-top:24px;
          color:#aaa;
        "
      >
        ⏳ Processing private payment…
      </div>

      <!-- SUCCESS -->
      <div
        id="successScreen"
        style="display:none; text-align:center; margin-top:32px;"
      >
        <div style="font-size:42px;">✅</div>
        <h3>Payment Successful</h3>
        <p id="successDetails"></p>
        <button
          id="viewTxBtn"
          class="pay-btn"
          style="background:#444;"
        >
          View on Explorer
        </button>
      </div>

    </div>
  </div>

  <!-- Solana Web3 + SPL Token (browser-safe) -->
  <script src="https://cdn.jsdelivr.net/npm/@solana/web3.js@1.98.0/lib/index.iife.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@solana/spl-token@0.4.9/lib/index.iife.min.js"></script>

  <!-- Inco + main logic -->
  <script type="module">
    import { encryptValue } from "https://esm.sh/@inco/lightning-sdk";

    const { Connection, PublicKey, Transaction, TransactionInstruction } = solanaWeb3;
    const { getAssociatedTokenAddress, createTransferInstruction } = splToken;

    const connection = new Connection("https://api.devnet.solana.com", "confirmed");
    const USDC_MINT = new PublicKey("4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU");
    const INCO_PROGRAM_ID = new PublicKey("5sjEbPiqgZrYwR31ahR6Uk9wf5awoX61YGg7jExQSwaj");

    let wallet = null;

    const connectBtn = document.getElementById("connectBtn");
    const payBtn = document.getElementById("payBtn");
    const loader = document.getElementById("loader");
    const successScreen = document.getElementById("successScreen");
    const successDetails = document.getElementById("successDetails");
    const viewTxBtn = document.getElementById("viewTxBtn");

    connectBtn.addEventListener("click", async () => {
      if (!window.solana) {
        alert("Please install Phantom or Solflare");
        return;
      }
      wallet = window.solana;
      await wallet.connect();
      connectBtn.textContent = "Connected";
      connectBtn.disabled = true;
      connectBtn.style.background = "#a5e21d";
    });

    payBtn.addEventListener("click", async () => {
      try {
        if (!wallet) throw new Error("Connect wallet first");
        loader.style.display = "block";

        const sender = wallet.publicKey;
        const recipient = new PublicKey(document.getElementById("recipient").value);
        const amountUi = 1; // you can later read dynamic from UI
        const amount = BigInt(amountUi * 1_000_000);

        const encryptedAmount = await encryptValue(amount);

        const senderATA = await getAssociatedTokenAddress(USDC_MINT, sender);
        const recipientATA = await getAssociatedTokenAddress(USDC_MINT, recipient);

        const transferIx = createTransferInstruction(senderATA, recipientATA, sender, Number(amount));
        const incoIx = new TransactionInstruction({
          programId: INCO_PROGRAM_ID,
          keys: [{ pubkey: sender, isSigner: true, isWritable: false }],
          data: Buffer.from(encryptedAmount)
        });

        const tx = new Transaction().add(transferIx, incoIx);
        tx.feePayer = sender;
        tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash;

        const signed = await wallet.signTransaction(tx);
        const sig = await connection.sendRawTransaction(signed.serialize());
        await connection.confirmTransaction(sig);

        loader.style.display = "none";
        successScreen.style.display = "block";
        successDetails.innerHTML = `Sent 1 USDC<br/>Tx: ${sig.slice(0,12)}…`;

        viewTxBtn.onclick = () =>
          window.open(`https://explorer.solana.com/tx/${sig}?cluster=devnet`, "_blank");

      } catch (err) {
        loader.style.display = "none";
        console.error("PRIVATE PAYMENT ERROR:", err);
        alert(err.message || "Private payment failed");
      }
    });
  </script>
</body>
</html>