+ setTransactionError(null)} />}
+ {transactionSuccess && setTransactionSuccess(null)} />}
+
+ 
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/spl-tokens/app/app/src/components/Active.scss b/spl-tokens/app/app/src/components/Active.scss
new file mode 100644
index 0000000..354b3a9
--- /dev/null
+++ b/spl-tokens/app/app/src/components/Active.scss
@@ -0,0 +1,34 @@
+.active {
+ display: grid;
+ place-items: center;
+ margin: -5px 20px 5px;
+ width: 100%;
+ height: 100%;
+
+ .circle {
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ transition: border-color 0.3s ease;
+
+ &.on {
+ border: 4px solid #ccc;
+ background-color: green;
+ }
+
+ &.off {
+ border: 4px solid #ccc;
+ background-color: transparent;
+ }
+ }
+}
+
+.active-div {
+ display: flex;
+ justify-content: center;
+ margin: 15px auto;
+ width: fit-content;
+ position: relative;
+ border-radius: 10px;
+}
\ No newline at end of file
diff --git a/spl-tokens/app/app/src/components/Active.tsx b/spl-tokens/app/app/src/components/Active.tsx
new file mode 100644
index 0000000..421d147
--- /dev/null
+++ b/spl-tokens/app/app/src/components/Active.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import './Active.scss'; // Assuming you'll create a corresponding SCSS file
+
+type ActiveProps = {
+ clsName: string; // Expected to be "on" or "off"
+};
+
+const Active: React.FC+ +
+ {accounts.map((a, i) => (
+
+
+ {mint && (
+ <>
+
+ {
+ // Allow dropping quick-transfer buttons
+ e.preventDefault();
+ }}
+ onDrop={(e) => {
+ try {
+ const raw = e.dataTransfer.getData('text/plain');
+ if (!raw) return;
+ const payload = JSON.parse(raw);
+ if (payload && payload.type === 'quickTransfer') {
+ const fromIdx = Number(payload.from);
+ const amountUi = String(payload.amountUi);
+ if (!Number.isNaN(fromIdx) && amountUi) {
+ performQuickTransfer(fromIdx, i, amountUi).catch(console.error);
+ }
+ }
+ } catch (_) { /* ignore malformed payloads */ }
+ }}
+ style={{
+ minWidth: 250,
+ background: 'linear-gradient(180deg, #0f172a 0%, #0b1220 100%)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: 12,
+ padding: 16,
+ color: '#e5e7eb',
+ boxShadow: '0 10px 25px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04)'
+ }}>
+
+
+ ))}
+ Address
+
+
+
+ {/* SOL balance, centered and shown before SPL balances */}
+
+ {short(a.keypair.publicKey)}
+
+
+
+
+
+ SOL
+ {fmt(a.solLamports, 9)}
+
+
+
+ {/* Quick transfer draggable chips (1, 3, 10) */}
+
+
+ SPL
+ {fmt(a.balance, decimals)}
+
+
+ Ephemeral SPL
+ {a.eDelegated ? fmt(a.eBalance, decimals) : '-'}
+
+ {[1, 3, 10].map((amt) => (
+
+ ))}
+
+
+ {/* Delegation status on Ephemeral chain */}
+
+
+
+ {/* Delegate */}
+
+ {a.eDelegated ? 'eATA Delegated' : 'eAta not delegated'}
+
+
+ {
+ // Keep only valid numeric input (non-negative, single decimal point, limited fractional digits)
+ let v = e.target.value.replace(/[^0-9.]/g, '');
+ const firstDot = v.indexOf('.');
+ if (firstDot !== -1) {
+ // Remove extra dots
+ const head = v.slice(0, firstDot + 1);
+ const tail = v.slice(firstDot + 1).replace(/\./g, '');
+ v = head + tail;
+ const [w, f = ''] = v.split('.');
+ v = w + '.' + f.slice(0, Math.min(decimals, 6));
+ }
+ const next = delegateAmounts.slice();
+ next[i] = v;
+ setDelegateAmounts(next);
+ }}
+ placeholder=""
+ inputMode="decimal"
+ style={{
+ width: '100%', // equals 70% of the row due to 7fr/3fr grid
+ background: 'rgba(255,255,255,0.06)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: '#e5e7eb',
+ borderRadius: 6,
+ padding: '8px 12px',
+ margin: 0,
+ outline: 'none',
+ boxSizing: 'border-box',
+ height: 40
+ }}
+ />
+
+
+
+ {/* Undelegate */}
+
+ {
+ let v = e.target.value.replace(/[^0-9.]/g, '');
+ const firstDot = v.indexOf('.');
+ if (firstDot !== -1) {
+ const head = v.slice(0, firstDot + 1);
+ const tail = v.slice(firstDot + 1).replace(/\./g, '');
+ v = head + tail;
+ const [w, f = ''] = v.split('.');
+ v = w + '.' + f.slice(0, Math.min(decimals, 6));
+ }
+ const next = undelegateAmounts.slice();
+ next[i] = v;
+ setUndelegateAmounts(next);
+ }}
+ placeholder=""
+ inputMode="decimal"
+ style={{
+ width: '100%', // equals 70% of the row due to 7fr/3fr grid
+ background: 'rgba(255,255,255,0.06)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: '#e5e7eb',
+ borderRadius: 6,
+ padding: '8px 12px',
+ margin: 0,
+ outline: 'none',
+ boxSizing: 'border-box',
+ height: 40
+ }}
+ />
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isSubmitting && (
+ {!mint ? (
+
+
+ No test mint yet — click "Setup" to create one.
+
+ ) : (
+
+ Mint
+ {short(mint)}
+
+
+
+ )}
+ {!mint && (
+
+ )}
+
+
+
)}
+
+ {transactionError &&
+
+ {message}
+
+ );
+};
+
+export default Alert;
\ No newline at end of file
diff --git a/spl-tokens/app/app/src/components/Button.tsx b/spl-tokens/app/app/src/components/Button.tsx
new file mode 100644
index 0000000..6ca473e
--- /dev/null
+++ b/spl-tokens/app/app/src/components/Button.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+type ButtonProps = {
+ title: string;
+ resetGame: () => void;
+ disabled?: boolean;
+};
+
+const Button: React.FC