api docs

7 files changed, 128 insertions, 17 deletions

diff --git a/src/components/Code.svelte b/src/components/Code.svelte
new file mode 100644
index 00000000..b3181d0a
--- /dev/null
+++ b/src/components/Code.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { copy } from '$lib/utils';
+	import { Icon } from '$comp';
+	import samples from '$lib/samples';
+	export let sample;
+</script>
+
+<div class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono">
+	<div class="w-full break-all">{samples[sample]}</div>
+	<button
+		class="ml-auto my-auto invert opacity-90"
+		on:click={() => copy(samples[sample].replace(/^\s+/gm, '').replace(/\n/g, ''))}
+		><Icon icon="copy" style="w-8" /></button
+	>
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index 0d1d8d1d..1853e7c9 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Code } from './Code.svelte';
 export { default as Slider } from './Slider.svelte';
 export { default as Pinpad } from './Pinpad.svelte';
 export { default as Balance } from './Balance.svelte';
diff --git a/src/lib/samples.js b/src/lib/samples.js
new file mode 100644
index 00000000..4af61822
--- /dev/null
+++ b/src/lib/samples.js
@@ -0,0 +1,22 @@
+export default {
+	register: `curl -s "https://coinos.io/api/register" -H "application/json" -d '{
+  "username": "adam",
+  "password": "hunter2"
+}'`,
+	login: `curl -s "https://coinos.io/api/login" -H "application/json" -d '{
+  "username": "adam",
+  "password": "hunter2"
+}'`,
+	invoice: `curl -s "https://coinos.io/api/invoice" 
+  -H "application/json" 
+  -H "Authorization: Bearer $token"
+  -d '{
+    "invoice": {
+      "amount": 1000,
+      "type": "lightning",
+      "webhook": "https://example.com/payment/received",
+      "secret": "hunter2"
+    },
+}'`,
+	fetchInvoice: `curl -s "https://coinos.io/api/invoice/bc1qmhfk9stzffhd9umzmld92vff7zg3mdlh7rvvaj" -H "application/json" }'`
+};
diff --git a/src/routes/(static)/+layout.server.js b/src/routes/(static)/+layout.server.js
new file mode 100644
index 00000000..2deeebc5
--- /dev/null
+++ b/src/routes/(static)/+layout.server.js
@@ -0,0 +1,16 @@
+import { get, post, auth, protectedRoutes } from '$lib/utils';
+
+export async function load({ cookies, request, url, params }) {
+	let token = cookies.get('token');
+	let rate,
+		rates = { USD: 1 };
+
+	let user;
+	if (token) {
+		try {
+			user = await get('/me', auth(cookies));
+		} catch (e) {}
+	}
+
+	return { user };
+}
diff --git a/src/routes/(static)/+layout.svelte b/src/routes/(static)/+layout.svelte
index 6e31f17e..3d596dff 100644
--- a/src/routes/(static)/+layout.svelte
+++ b/src/routes/(static)/+layout.svelte
@@ -1,8 +1,12 @@
 <script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { Footer, LandingHeader } from '$comp';
+	export let data;
+	$: ({ user } = data);
 </script>
 
-<LandingHeader />
+<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
+<LandingHeader {user} />
 <main class="container flex px-10 md:px-40 mx-auto min-h-[600px] pb-20">
 	<slot />
 </main>
diff --git a/src/routes/(static)/docs/+page.server.js b/src/routes/(static)/docs/+page.server.js
new file mode 100644
index 00000000..e80365fa
--- /dev/null
+++ b/src/routes/(static)/docs/+page.server.js
@@ -0,0 +1,4 @@
+export let load = async ({ cookies }) => {
+	let token = cookies.get('token');
+	return { token };
+};
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index c634cd76..d44204d8 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -1,17 +1,67 @@
-Coming soon
-<!-- <h1>API Examples</h1> -->
-<!-- <pre><code class="whitespace-pre-wrap" -->
-<!-- 		>{` -->
-<!-- api="https://coinos.io/api" -->
-<!-- json="Content-Type: application/json" -->
-<!--  -->
-<!-- username=$(cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 32 | head -n 1) -->
-<!-- password="pw" -->
-<!--  -->
-<!-- echo Create user $username with password $password -->
-<!-- curl -s "$api/register" -H "$json" -d '{"user": {"username": "'$username'", "password": "'$password'", "confirm": "'$password'"}}' > /dev/null -->
-<!-- echo "" -->
-<!--  -->
+<script>
+	import { Code, Icon } from '$comp';
+	export let data;
+	let { token } = data;
+</script>
+
+<div class="space-y-8 text-xl mt-20">
+	<h1 class="text-4xl">API Documentation</h1>
+
+	<p class="text-secondary">
+		Coinos has a simple REST API that can be used to register accounts, fetch data, and make
+		payments
+	</p>
+
+	<p class="text-secondary">* = required parameter</p>
+
+	<h2 class="text-2xl">Base URL</h2>
+	<div class="bg-black text-white rounded-lg p-4 flex gap-4">
+		<div>https://coinos.io/api</div>
+		<div class="ml-auto my-auto invert opacity-90"><Icon icon="copy" style="w-8" /></div>
+	</div>
+
+	<h2 class="text-2xl">Auth Token</h2>
+	<p class="text-secondary">This JWT authorizes you to use the API</p>
+	<div class="bg-black text-white rounded-lg p-4 flex gap-4">
+		<div class="w-full break-all">export token="{token}"</div>
+		<div class="ml-auto my-auto invert opacity-90"><Icon icon="copy" style="w-8" /></div>
+	</div>
+
+	<h2 class="text-2xl">POST /register</h2>
+	<p class="text-secondary">Register a new user account with a username and password</p>
+	<Code sample="register" />
+
+	<h2 class="text-2xl">POST /login</h2>
+	<p class="text-secondary">Login to an account to get its auth token</p>
+	<Code sample="login" />
+
+	<h2 class="text-2xl">POST /invoice</h2>
+	<p class="text-secondary">Create an invoice.</p>
+	<div>
+		<div class="text-secondary">
+			<span class="font-mono font-bold">type</span>: bitcoin or lightning
+		</div>
+		<div class="text-secondary">
+			<span class="font-mono font-bold">amount</span>: integer satoshis (optional)
+		</div>
+		<div class="text-secondary">
+			<span class="font-mono font-bold">webhook</span>: a URL that we'll POST to when the invoice is
+			paid (optional)
+		</div>
+		<div class="text-secondary">
+			<span class="font-mono font-bold">secret</span>: a secret to send with the POST (optional)
+		</div>
+	</div>
+
+	<Code sample="invoice" />
+
+	<h2 class="text-2xl">GET /invoice/:hash</h2>
+	<p class="text-secondary">
+		Fetch an invoice by passing a bitcoin address or lightning payment hash
+	</p>
+	<Code sample="fetchInvoice" />
+</div>
+
 <!-- echo Login and get an API token -->
 <!-- token=$(curl -s "$api/taboggan" -H "$json" -d '{"username": "'$username'", "password": "'$password'"}' | jq -r .token) -->
 <!-- echo $token -->
@@ -73,5 +123,4 @@ Coming soon
 <!--  -->
 <!-- curl -s "$api/bitcoin/send" -H "$json" -H "$auth" -d '{"address": "bc1qqc9azhdjjpdxenrndt8cw4tw9del5pyrjn0wln", "tx": { "hex": "'$hex'", "fee": "'$fee'" }}' | jq -r '{ amount, fee, balance: (.account.balance)}' -->
 <!-- echo "" -->
-<!-- `}</code -->
-<!-- 	></pre> -->
+<!-- `} -->