aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Feed.svelte5
-rw-r--r--src/components/Toggle.svelte2
-rw-r--r--src/lib/utils.js2
-rw-r--r--src/locales/en.json14
-rw-r--r--src/routes/(app)/[username]/(profile)/+layout.svelte57
-rw-r--r--src/routes/(app)/[username]/(profile)/+page.svelte22
-rw-r--r--src/routes/(app)/[username]/(profile)/follows/+page.svelte2
-rw-r--r--src/routes/(app)/[username]/settings/[...tab]/_account.svelte36
-rw-r--r--src/routes/(app)/[username]/settings/[...tab]/_pos.svelte12
-rw-r--r--src/routes/(app)/[username]/settings/[...tab]/_security.svelte28
-rw-r--r--src/routes/(app)/invoice/[id]/+page.svelte2
11 files changed, 116 insertions, 66 deletions
diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index 4869ab0c..d969f8dd 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -1,4 +1,5 @@
<script>
+ import { t } from '$lib/translations';
import { onMount } from 'svelte';
import { Avatar } from '$comp';
import { browser } from '$app/environment';
@@ -108,6 +109,8 @@
</div>
</VirtualScroll>
{:else}
- <div>Nothing here yet</div>
+ <div class="flex w-full">
+ <div class="mx-auto text-secondary">{$t('user.noNotes')}</div>
+ </div>
{/if}
{/if}
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 85fd08d5..7f3db2f5 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -7,6 +7,6 @@
<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" {value} {checked} {id} class="sr-only peer" />
<div
- class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"
+ class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-gray-600"
/>
</label>
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 77ed93bd..2b425626 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -11,7 +11,7 @@ export function scroll(section) {
const base = browser ? '' : PUBLIC_COINOS_URL;
export const punk = (k) => {
- return Math.floor((parseInt(k.substr(0, 2), 16) / 256) * 64) + 1 + '.webp';
+ return Math.floor((parseInt(k.slice(-2), 16) / 256) * 64) + 1 + '.webp';
};
export const g = (url, fetch, headers) =>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9b24935e..5714adff 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -166,7 +166,14 @@
"unfollow": "Unfollow",
"following": "Following",
"follow": "Follow",
+ "followers": "Followers",
"remove": "Remove",
+ "noNotes": "No notes yet",
+ "message": "Message",
+ "messages": "Messages",
+ "feed": "Feed",
+ "notes": "Notes",
+ "pay": "Pay",
"scanToPayBTC": "Scan to pay with bitcoin",
"this": "This",
"lightningAddress": "lightning address",
@@ -204,7 +211,7 @@
"accountId": "Account Secret",
"header": "Settings",
"ACCOUNT": "ACCOUNT",
- "POINT_OF_SALE": "POINT OF SALE",
+ "POINT_OF_SALE": "PREFERENCES",
"SECURITY": "SECURITY",
"locale": "Language",
"username": "Username",
@@ -217,6 +224,9 @@
"smsNotifications": "SMS Notifications",
"smsNotificationsDescription": "Coinos will send you text notifications when this is enabled.",
"theme": "Color Theme",
+ "tipPrompt": "Prompt for tips",
+ "tipPromptDescription": "Ask people if they want to add a tip before paying their invoices",
+ "displayName": "Display name",
"themeDescription": "Select from the default color themes.",
"localCurrency": "Currency",
"btcUnit": "Display bitcoin in:",
@@ -229,7 +239,7 @@
"securityPINDescription": "Set a security pin that will be used to unlock your settings and to send outgoing payments.",
"setPIN": "Set PIN",
"autoLock": "Auto-Lock Timer",
- "autoLockDescription": "Your account will go into a secure mode automatically after a specified time:",
+ "autoLockDescription": "Your account will go into a secure mode, requiring you to re-enter your credentials after a specified time:",
"twofa": "2-Factor Authentication",
"twofaDescription": "Add an extra level of security to your device by enableing 2-factor authentication.",
"twofaSetup": "Set up 2FA",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 32daca68..a30b6f38 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -6,9 +6,9 @@
export let data;
let events, user, subject, src, text;
$: ({ events, user, subject, src, text } = data);
- $: ({ username: n } = subject);
+ $: ({ username: n, display } = subject);
- $: username = n.length > 60 ? n.substr(0, 6) : n;
+ $: username = n.length > 60 ? n.substr(0, 6) : display || n;
let follow = async () => {
user.follows.push(['p', subject.pubkey, 'wss://nostr.coinos.io', subject.username]);
@@ -44,15 +44,21 @@
<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap md:flex-nowrap">
<div class="hidden lg:block w-[240px] md:mr-10" />
<div class="w-[240px] lg:absolute pt-20 space-y-5 left-20 mx-auto md:mr-10">
- <h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{username}</h1>
+ <h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{display || username}</h1>
<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
{subject.address && subject.address !== 'null' ? subject.address : ''}
</div>
<div class="flex justify-around">
- <a href={`/${subject.pubkey}/follows`}><b>{subject.follows.length}</b> Following</a>
- <a href={`/${subject.pubkey}/followers`}><b>{subject.followers.length}</b> Followers</a>
+ <a href={`/${subject.pubkey}/follows`}
+ ><b>{subject.follows.length}</b>
+ <span class="text-secondary">{$t('user.following')}</span></a
+ >
+ <a href={`/${subject.pubkey}/followers`}
+ ><b>{subject.followers.length}</b>
+ <span class="text-secondary">{$t('user.followers')}</span></a
+ >
</div>
<div class="flex flex-wrap gap-2 w-full">
@@ -88,7 +94,7 @@
<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
<div class="mx-auto flex">
<Icon icon="support" style="mr-1" />
- <div>Message</div>
+ <div>{$t('user.message')}</div>
</div>
</button>
</a>
@@ -99,36 +105,25 @@
<a href={`/${subject.username}/receive`} class="mx-auto">
<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
<div class="mx-auto flex">
- <div style="mr-1">⚡️</div>
- <div>{$t('user.lightning')} {$t('user.invoice')}</div>
+ <Icon icon="send" style="mr-1" />
+ <div>{$t('user.pay')}</div>
</div>
</button>
</a>
</div>
- <div class="w-full flex">
- <a href={`/${subject.username}/receive/bitcoin`} class="mx-auto">
- <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
- <div class="mx-auto flex">
- <img src="/images/bitcoin.svg" class="w-5 my-auto mr-1" />
- <div>{$t('user.bitcoin')} {$t('user.invoice')}</div>
- </div>
- </button>
- </a>
- </div>
-
- {#if user?.username !== subject.username}
- <div class="w-full flex">
- <a href={`/${subject.username}/request`} class="mx-auto">
- <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
- <div class="mx-auto flex">
- <Icon icon="support" style="mr-1" />
- <div>{$t('transactions.requestAnInvoice')}</div>
- </div>
- </button>
- </a>
- </div>
- {/if}
+ <!-- {#if user?.username !== subject.username} -->
+ <!-- <div class="w-full flex"> -->
+ <!-- <a href={`/${subject.username}/request`} class="mx-auto"> -->
+ <!-- <button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
+ <!-- <div class="mx-auto flex"> -->
+ <!-- <Icon icon="support" style="mr-1" /> -->
+ <!-- <div>{$t('transactions.requestAnInvoice')}</div> -->
+ <!-- </div> -->
+ <!-- </button> -->
+ <!-- </a> -->
+ <!-- </div> -->
+ <!-- {/if} -->
{/if}
</div>
</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index f23a1753..f9ded033 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -6,4 +6,24 @@
let { events, subject, user } = data;
</script>
-<Feed {events} user={subject?.username === user?.username && user} />
+<!-- <div class="font-bold flex justify-around items-center border-b pb-3 text-secondary mt-20"> -->
+<!-- <a href={`/${user.username}`}> -->
+<!-- <button class="hover:opacity-80 uppercase" class:text-black={true}> -->
+<!-- {$t(`user.notes`)} -->
+<!-- </button> -->
+<!-- </a> -->
+<!-- <a href={`/${user.username}`}> -->
+<!-- <button class="hover:opacity-80 uppercase"> -->
+<!-- {$t(`user.feed`)} -->
+<!-- </button> -->
+<!-- </a> -->
+<!-- <a href={`/${user.username}`}> -->
+<!-- <button class="hover:opacity-80 uppercase"> -->
+<!-- {$t(`user.messages`)} -->
+<!-- </button> -->
+<!-- </a> -->
+<!-- </div> -->
+
+<div class="mt-20">
+ <Feed {events} user={subject?.username === user?.username && user} />
+</div>
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index a9b65483..97269f45 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -13,7 +13,7 @@
<svelte:window bind:innerWidth={w} />
<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
- <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Follows</h1>
+ <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Following</h1>
{#if browser}
{#if follows.length}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 6b9fb2c6..77e7ab73 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -53,21 +53,25 @@
$bannerUpload = { file, type, progress };
}
};
+
+ if (!user.display) user.display = user.username;
</script>
-<!-- <div> -->
-<!-- <label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> -->
-<!-- <input type="text" name="username" bind:value={user.username} /> -->
-<!-- </div> -->
+<div class="relative">
+ <div>
+ <label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
+ <input type="text" name="username" bind:value={user.username} />
+ </div>
+ <div
+ class="absolute right-[2px] top-[30px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l "
+ >
+ @coinos.io
+ </div>
+</div>
<div>
- <label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
- <textarea
- type="text"
- name="address"
- bind:value={user.address}
- placeholder={$t('user.settings.aboutPlaceholder')}
- />
+ <label for="display" class="font-bold mb-1 block">{$t('user.settings.displayName')}</label>
+ <input type="text" name="display" bind:value={user.display} />
</div>
<div>
@@ -182,3 +186,13 @@
<div class="text-red-600">Max file size 10MB</div>
{/if}
</div>
+
+<div>
+ <label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
+ <textarea
+ type="text"
+ name="address"
+ bind:value={user.address}
+ placeholder={$t('user.settings.aboutPlaceholder')}
+ />
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index bade7a99..e9fcc5ba 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -1,5 +1,5 @@
<script>
- import { Icon, LocaleSelector } from '$comp';
+ import { Icon, LocaleSelector, Toggle } from '$comp';
import { t } from '$lib/translations';
import { success, failure } from '$lib/utils';
import { page } from '$app/stores';
@@ -21,3 +21,13 @@
{/each}
</select>
</div>
+
+<div>
+ <div class="flex justify-between items-center">
+ <span class="font-bold">{$t('user.settings.tipPrompt')}</span>
+ <Toggle id="sms-notify" />
+ </div>
+ <p class="text-secondary mt-1 w-9/12">
+ {$t('user.settings.tipPromptDescription')}
+ </p>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 4d175025..cf969f1c 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -189,20 +189,6 @@
</div>
<div>
- <label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
- <p class="text-secondary mb-1">
- {$t('user.settings.autoLockDescription')}
- </p>
- <select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
- <option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
- <option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
- <option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
- <option value={60 * 60}>1 {$t('user.settings.hour')}</option>
- <option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
- </select>
-</div>
-
-<div>
<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
<p class="text-secondary mb-4">
{$t('user.settings.twofaDescription')}
@@ -252,3 +238,17 @@
</button>
{/if}
</div>
+
+<div>
+ <label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
+ <p class="text-secondary mb-1">
+ {$t('user.settings.autoLockDescription')}
+ </p>
+ <select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
+ <option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
+ <option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
+ <option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
+ <option value={60 * 60}>1 {$t('user.settings.hour')}</option>
+ <option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
+ </select>
+</div>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 222cbb53..e99d6747 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -79,8 +79,6 @@
<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
<div>
- <h1 class="text-secondary text-center text-xl">{$t('transactions.pleasePay')}</h1>
-
<div class="flex w-full">
<div class="mx-auto">
<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 07:32:42 +0000