feat: set up the reference app with wallet connect and onboarding

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+        with:
+          node-version: 24
+      - run: npm ci
+      - run: npm run format:check
+      - run: npm run build

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmrc

@@ -0,0 +1,4 @@
+ignore-scripts=true
+save-exact=true
+min-release-age=7
+@jsr:registry=https://npm.jsr.io

.prettierrc

@@ -0,0 +1 @@
+{ "singleQuote": true }

README.md

@@ -0,0 +1,42 @@
+# Loktin SDK example
+
+A small web app that shows how an integrator uses the Loktin SDK, [`@loktin/sdk`](https://github.com/Lokt-In/loktin-sdk). It runs on Stellar testnet only. Test assets have no value.
+
+This is the app's first part. It shows:
+
+- connecting a wallet through Stellar Wallets Kit;
+- XLM and USDC balances;
+- the steps a new account needs: test XLM, the USDC trustline and test USDC;
+- the network settings and the contract's minimum cadence, read through the SDK.
+
+The Target Savings and Spend & Save flows come next.
+
+The app never handles a secret key. All signing happens in the wallet.
+
+## Run it locally
+
+You need Node 22.12 or later. CI uses Node 24.
+
+```sh
+npm ci
+npm run dev
+```
+
+## Wallet kit audit findings
+
+`npm audit` reports 29 issues, 11 of them high. All of them come through Stellar Wallets Kit's WalletConnect/Reown, HOT Wallet (NEAR, Solana) and Coinbase dependencies.
+
+The app does not load those modules. It uses the kit's `defaultModules()`, which has no WalletConnect, HOT, Ledger or Trezor module, so that code is installed but not shipped.
+
+`scripts/check-bundle.mjs` enforces this. It runs at the end of `npm run build`, reads every file in `dist/assets`, and fails the build if it finds one of those packages' names.
+
+The kit comes from JSR, installed under its npm name, because its MetaMask module imports it by that name.
+
+## Links
+
+- [SDK documentation](https://docs.loktin.xyz/sdk/)
+- [SDK repo](https://github.com/Lokt-In/loktin-sdk)
+
+## Licence
+
+Apache-2.0. See [LICENSE](LICENSE).

index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Loktin SDK example</title>
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Loktin SDK example</h1>
+      <div id="wallet-button"></div>
+    </header>
+    <main>
+      <p class="notice">Testnet only. Test assets have no value.</p>
+      <p id="wallet-error" class="error" role="alert" hidden></p>
+
+      <section aria-labelledby="account-heading">
+        <h2 id="account-heading">Account</h2>
+        <p id="account-address">Connect a wallet to see your balances.</p>
+        <dl id="balances" hidden>
+          <dt>XLM</dt>
+          <dd id="balance-xlm"></dd>
+          <dt>USDC</dt>
+          <dd id="balance-usdc"></dd>
+        </dl>
+        <p id="account-message" hidden></p>
+        <button id="refresh" type="button" hidden>Refresh balances</button>
+        <p id="account-error" class="error" role="alert" hidden></p>
+      </section>
+
+      <section id="onboarding" aria-labelledby="onboarding-heading" hidden>
+        <h2 id="onboarding-heading">Get started</h2>
+        <div id="onboarding-step"></div>
+      </section>
+
+      <section aria-labelledby="network-heading">
+        <h2 id="network-heading">Network</h2>
+        <dl>
+          <dt>Passphrase</dt>
+          <dd id="network-passphrase"></dd>
+          <dt>Target Savings contract</dt>
+          <dd id="network-target-savings"></dd>
+          <dt>Spend &amp; Save contract</dt>
+          <dd id="network-spend-save"></dd>
+          <dt>Minimum cadence</dt>
+          <dd id="network-min-cadence">Loading...</dd>
+        </dl>
+        <p><a href="https://docs.loktin.xyz/sdk/">SDK documentation</a></p>
+        <p id="network-error" class="error" role="alert" hidden></p>
+      </section>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>