Skip to content

Commit

Permalink
feature(setler): some ui cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
mankins committed Jan 19, 2024
1 parent 161d250 commit d911d42
Show file tree
Hide file tree
Showing 11 changed files with 4,186 additions and 1,659 deletions.
4,449 changes: 3,127 additions & 1,322 deletions identity-wallet/setler/pnpm-lock.yaml

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions identity-wallet/setler/readme.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
# Setler


Setler is a non-custodial wallet that allows users to send and receive payments on the XRPL. It also allows users to associate their XRPL account with a DID (Decentralized Identifier) which can be used to send and receive payments.

# Screenshots

<img width="778" alt="image" src="https://user-images.githubusercontent.com/170588/227735912-14d638ad-0df2-4ac7-b759-35f077877dee.png">

<img width="1017" alt="image" src="https://user-images.githubusercontent.com/170588/227735944-a09d134d-8347-4fb6-a2d6-b1731534776d.png">

<img width="1017" alt="image" src="https://user-images.githubusercontent.com/170588/227735971-1d87db19-03f3-4d8f-9f98-05040f303cde.png">


## Dev Overview

Setler is a [Tauri app](https://tauri.app/), with a SvelteKit frontend and a Rust backend.
Expand Down
2 changes: 2 additions & 0 deletions identity-wallet/setler/src/lib/components/Icon.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,10 @@
| 'brand/facebook'
| 'brand/google'
| 'brand/instagram'
| 'brand/kudos'
| 'brand/nft'
| 'brand/notion'
| 'brand/setler-cli'
| 'brand/stripe'
| 'brand/stripe-square'
| 'brand/twitter'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,9 @@
Add value to your <span
class="cursor-pointer text-cyan-800 underline"
on:click={() => {
goto('https://www.loremlabs.com/');
goto(
'https://www.kudos.community/?utm_source=setler&utm_medium=app&utm_campaign=import'
);
}}>kudos</span
>. After importing, you can send money to your a collection of kudos, or
you can recognize them publicly for their work by publishing.
Expand All @@ -135,7 +137,7 @@
>
<li class="flow-root">
<div
class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 focus-within:ring-2 focus-within:ring-cyan-500 hover:bg-gray-50"
class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 focus-within:ring-0 focus-within:ring-cyan-500 hover:bg-gray-50"
>
<div
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-cyan-700"
Expand All @@ -159,7 +161,7 @@

<li class="flow-root">
<div
class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 focus-within:ring-2 focus-within:ring-cyan-500 hover:bg-gray-50"
class="relative -m-2 flex items-center space-x-4 rounded-xl p-2 focus-within:ring-0 focus-within:ring-cyan-500 hover:bg-gray-50"
>
<div
class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-cyan-500"
Expand Down
26 changes: 17 additions & 9 deletions identity-wallet/setler/src/lib/components/ModalShowQr.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@
import { buttonClass, buttonInactiveClass } from '$lib/tokens';
import QrCode from '$lib/components/QrCode.svelte';
import { addToast } from '$lib/stores/toasts';
import { open as openShell } from '@tauri-apps/api/shell';
import { onMount } from 'svelte';
export let address = '';
export let network = '';
export let open = false;
export let handleCancel = () => {};
export let handleConfirm = async () => {
// console.log('saving', JSON.stringify(formData));
processing = false;
open = false;
modalDone(formData);
// reset
done = new Promise((resolve) => {
Expand Down Expand Up @@ -86,6 +91,7 @@
};
export let formData = {};
export let buyActive = false;
let processing = false;
let value = '';
Expand Down Expand Up @@ -147,14 +153,16 @@
</div>
</div>
<div class="mt-4 ml-4 flex flex-row-reverse">
<button on:click={handleConfirm} type="button" class={`${buttonClass}`}>
Ok
{#if processing}
<span aria-label={'processing'} class="ml-2 mr-3 animate-spin">
<Icon name="misc/spinner" class="text-primary-500 h-5 w-5" />
</span>
{/if}
</button>
{#if buyActive}
<button on:click={handleConfirm} type="button" class={`${buttonClass}`}>
Buy XRP
{#if processing}
<span aria-label={'processing'} class="ml-2 mr-3 animate-spin">
<Icon name="misc/spinner" class="text-primary-500 h-5 w-5" />
</span>
{/if}
</button>
{/if}
{#if cancelActive}
<button
on:click={() => {
Expand All @@ -163,7 +171,7 @@
type="button"
class={`${buttonInactiveClass} mr-2`}
>
Cancel
Close
</button>
{/if}
</div>
Expand Down
81 changes: 78 additions & 3 deletions identity-wallet/setler/src/lib/components/assets/XrpAsset.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@
import { createEventDispatcher, onMount } from 'svelte';
import Icon from '$lib/components/Icon.svelte';
import { addToast } from '$lib/stores/toasts';
import KudosStartImport from '$lib/components/KudosStartImport.svelte';
// import Panel from '$lib/components/Panel.svelte';
import Modal from '$lib/components/Modal.svelte';
import ModalShowQr from '$lib/components/ModalShowQr.svelte';
let opener: HTMLElement | null | true = null;
export let networkName = 'xrpl:livenet';
export let address = '';
export let balance = {
Expand Down Expand Up @@ -166,6 +171,32 @@
<div class="">Fund via Faucet</div>
</button>
{/if}
{#if ['xrpl:livenet'].includes(networkName)}
<button
class="block flex w-full flex-row items-center justify-start px-4 py-2 text-sm text-gray-700 hover:bg-slate-400"
id={`net-${networkName}-menu-item`}
on:click={async () => {
addToast({
type: 'info',
msg: `Starting purchase in browser. Come back when done.`,
duration: 5000,
});
const url = `https://www.setler.app/prompts/onramper?wallet=${address}&network=${networkName}`;
openShell(url);

// todo waiter http server to do this
// dispatch('action', {
// action: 'update:balance',
// params: {},
// });
}}
>
<div class="w-6">
<Icon name="credit-card" class="mr-2 h-4 w-4" />
</div>
<div class="">Fund</div>
</button>
{/if}
</div>
</div>
<button on:click={async () => {}}>
Expand Down Expand Up @@ -222,6 +253,22 @@
<span class="text-sm font-medium text-slate-700">Send</span>
</button>
{/if}
{#if true}
<button
class="opener-kudos mr-8 flex flex-col items-center justify-center"
on:click={() => {
opener = document.querySelectorAll('.opener-kudos')[0];
console.log('opener', opener);
}}
>
<div
class="m-auto flex h-10 w-10 flex-col items-center justify-center rounded-full bg-slate-300 hover:bg-slate-400"
>
<Icon name="brand/kudos" class="h-4 w-4" />
</div>
<span class="text-sm font-medium text-slate-700">Kudos</span>
</button>
{/if}
<button
class="flex flex-col items-center justify-center"
on:click={() => {
Expand Down Expand Up @@ -251,10 +298,10 @@
</div>
<ModalShowQr
bind:open={showQrModal}
cancelActive={true}
buyActive={false}
{address}
handleConfirm={() => {
showQrModal = false;
}}
network={networkName}
handleCancel={() => {}}
>
<div slot="header">
Expand Down Expand Up @@ -283,3 +330,31 @@
</h3>
</div>
</ModalShowQr>
<Modal
heading="Kudos Import"
open={opener ? true : false}
on:hide={() => {
console.log('hide');
}}
ariaLabelledBy="modal-headline"
class="max-w-4xl rounded-sm bg-white pl-4 pt-5 pr-8 pb-16 shadow-xl sm:p-6"
>
<KudosStartImport />

<div slot="footer">
<button
on:click={async () => {
// save config
console.log('closing');
opener = null;
}}
type="submit"
class="cursor-pointer rounded-full border border-gray-300 bg-gray-700 py-2
px-4 text-sm font-medium text-white
shadow-sm transition delay-150 ease-in-out hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
>
Close
</button>
</div>
</Modal>
88 changes: 60 additions & 28 deletions identity-wallet/setler/src/lib/kudos/db.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,77 @@
import SQLite from 'tauri-plugin-sqlite-api';
import { readBinaryFile, readTextFile } from '@tauri-apps/api/fs';

// const readKudosDb = async ({ dbFile }) => {
// return [];
// };

const readKudosDb = async ({ dbFile }) => {
console.log('dbFile', { dbFile });
const db = await SQLite.open(dbFile);
if (!dbFile) {
throw new Error('dbFile is not defined');
}
console.log('dbFile', { dbFile, db });
const exists = await db.select(
`SELECT name FROM sqlite_master WHERE type='table' AND name='kudos'`
);
if (!exists || exists.length === 0) {
throw new Error('not a valid kudos database');
}
console.log('exists', { exists });
const result = await db.select(
`SELECT identifier, cohort, weight, createTime, description, id, context
FROM kudos ORDER BY createTime ASC`
);
//.where("cohort", "=", `${cohort}`)
//.where("user", "=", user)
// .orderBy("createTime", "asc");

// iterate through result, JSON.parse context
result.forEach((row) => {
// read dbFile
// all data, newline delimited json
const file = await readTextFile(dbFile);
// parse the data as json, converting from buffer to text
const data = file.toString();

// split the data into lines
const lines = data.split('\n');
console.log('lines', lines);

// for each
// parse the line as json
// add to array
const result = lines.map((line) => {
let row = {};
try {
row.context = JSON.parse(row.context);
row = JSON.parse(line);
row.context = line;
row.weight = row.weight || 1;
} catch (e) {
// TODO: throw error/event
console.log('error parsing context', { row, e });
console.log('error parsing line', { line, e });
return null;
}
return row;
});
console.log({ result });

// db.destroy();
const isClosed = await db.close();

console.log({ result });
return result;
// const parsed = JSON.parse(file.toLocaleString());
// console.log('file', parsed);
// const db = await SQLite.open(dbFile);
// if (!dbFile) {
// throw new Error('dbFile is not defined');
// }
// console.log('dbFile', { dbFile, db });
// const exists = await db.select(
// `SELECT name FROM sqlite_master WHERE type='table' AND name='kudos'`
// );
// if (!exists || exists.length === 0) {
// throw new Error('not a valid kudos database');
// }
// console.log('exists', { exists });
// const result = await db.select(
// `SELECT identifier, cohort, weight, createTime, description, id, context
// FROM kudos ORDER BY createTime ASC`
// );
// //.where("cohort", "=", `${cohort}`)
// //.where("user", "=", user)
// // .orderBy("createTime", "asc");

// // iterate through result, JSON.parse context
// result.forEach((row) => {
// try {
// row.context = JSON.parse(row.context);
// } catch (e) {
// // TODO: throw error/event
// console.log('error parsing context', { row, e });
// }
// });

// // db.destroy();
// const isClosed = await db.close();

// return result;
};

export { readKudosDb };
11 changes: 11 additions & 0 deletions identity-wallet/setler/src/lib/static/icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

2 comments on commit d911d42

@vercel
Copy link

@vercel vercel bot commented on d911d42 Jan 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ident-agency-net-enola – ./ident-agency/packages/enola

ident-agency-net-enola-loremlabs.vercel.app
ident-agency-net-enola.vercel.app
ident-agency-net-enola-git-main-loremlabs.vercel.app

@vercel
Copy link

@vercel vercel bot commented on d911d42 Jan 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.