Allow users to choose where to publish their profile #359

CHANGELOG.md

@@ -5,6 +5,7 @@
 - [x] Show toast when offline
 - [x] Use new indexeddb wrapper
 - [x] Add `k` tag to deletions
+- [x] Allow users to choose where to publish their profile when using a white-labeled instance
 
 # 0.4.6
 

README.md

@@ -72,7 +72,7 @@ Coracle is intended to be fully white-labeled by groups of various kinds. The fo
 - `VITE_DUFFLEPUD_URL` is a [Dufflepud](https://github.com/coracle-social/dufflepud) instance url, which helps Coracle with things like link previews and image uploads.
 - `VITE_PLATFORM_ZAP_SPLIT` is a decimal between 0 and 1 defining the default zap split percent.
 - `VITE_PLATFORM_PUBKEY` is the pubkey of the platform owner. This gets zapped when using the platform zap split.
-- `VITE_FORCE_GROUP` is an optional `kind:34550` or `kind:35834` address. If provided, the home page of Coracle will be the home page for the group, and most views will be filtered down to the group's scope.
+- `VITE_FORCE_GROUP` is an optional `kind:34550` or `kind:35834` address. If provided, the home page of Coracle will be the home page for the group, and most views will be filtered down to the group's scope. For user privacy, `VITE_PLATFORM_RELAYS` should also be set when using `VITE_FORCE_GROUP`.
 - `VITE_PLATFORM_RELAYS` is an optional comma-separated list of relay urls to use for feeds. If provided, most UI components related to relay selection will be hidden from the user.
 - `VITE_ENABLE_ZAPS` can be set to `false` to disable zaps.
 - `VITE_APP_NAME` is the app's name.

src/app/views/UserProfile.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import Input from "src/partials/Input.svelte"
+  import FlexColumn from "src/partials/FlexColumn.svelte"
+  import Card from "src/partials/Card.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
   import Textarea from "src/partials/Textarea.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Footer from "src/partials/Footer.svelte"
   import Heading from "src/partials/Heading.svelte"
+  import Modal from "src/partials/Modal.svelte"
   import Field from "src/partials/Field.svelte"
-  import {pubkey, getProfile, publishProfile} from "src/engine"
+  import {env, pubkey, getProfile, publishProfile} from "src/engine"
   import {router} from "src/app/util/router"
 
   const nip05Url = "https://github.com/nostr-protocol/nips/blob/master/05.md"
@@ -14,13 +17,34 @@
   const pseudUrl =
     "https://www.coindesk.com/markets/2020/06/29/many-bitcoin-developers-are-choosing-to-use-pseudonyms-for-good-reason/"
 
-  const submit = () => {
-    publishProfile(values)
+  const closeModal = () => {
+    modal = null
+  }
+
+  const publishToPlatform = () => {
+    publishProfile(values, {forcePlatform: true})
+    router.pop()
     router.pop()
   }
 
+  const publishToNetwork = () => {
+    publishProfile(values, {forcePlatform: false})
+    router.pop()
+    router.pop()
+  }
+
+  const submit = () => {
+    if ($env.PLATFORM_RELAYS.length === 0) {
+      publishToNetwork()
+    } else {
+      modal = 'select-scope'
+    }
+  }
+
   const values = {...getProfile($pubkey)}
 
+  let modal
+
   document.title = "Profile"
 </script>
 
@@ -85,3 +109,42 @@
     <Anchor grow button tag="button" type="submit">Save</Anchor>
   </Footer>
 </form>
+
+{#if modal === 'select-scope'}
+  <Modal onEscape={closeModal}>
+    <div class="mb-4 flex flex-col items-center justify-center">
+      <Heading>Update Profile</Heading>
+      <p>Where would you like to publish your profile?</p>
+    </div>
+    <Card interactive on:click={publishToNetwork}>
+      <FlexColumn>
+        <div class="flex items-center justify-between">
+          <p class="flex items-center gap-4 text-xl">
+            <i class="fa fa-share-nodes text-neutral-600" />
+            <strong>The wider nostr network</strong>
+          </p>
+          <i class="fa fa-arrow-right" />
+        </div>
+        <p>
+          Publishing your profile to the wider nostr network will allow anyone to see it.
+          Use this if you plan to use other clients or relay selections.
+        </p>
+      </FlexColumn>
+    </Card>
+    <Card interactive on:click={publishToPlatform}>
+      <FlexColumn>
+        <div class="flex items-center justify-between">
+          <p class="flex items-center gap-4 text-xl">
+            <i class="fa fa-thumbtack text-neutral-600" />
+            <strong>Just this instance</strong>
+          </p>
+          <i class="fa fa-arrow-right" />
+        </div>
+        <p>
+          Publish your profile just to the relays configured on this instance if you prefer.
+          Be aware that how private this is depends on how the instance operator has set things up.
+        </p>
+      </FlexColumn>
+    </Card>
+  </Modal>
+{/if}

src/engine/commands.ts

@@ -661,13 +661,13 @@ export const deleteEventByAddress = address =>
 
 // Profile
 
-export const publishProfile = profile =>
+export const publishProfile = (profile, {forcePlatform = false} = {}) =>
   createAndPublish({
     kind: 0,
     tags: getClientTags(),
     content: JSON.stringify(profile),
     relays: withIndexers(hints.WriteRelays().getUrls()),
-    forcePlatform: false,
+    forcePlatform,
   })
 
 // Singletons