From 1f38924820ba45afe8afb837d15d094ad75c6152 Mon Sep 17 00:00:00 2001
From: sarah olimpia <sarahscott@users.noreply.github.com>
Date: Fri, 15 May 2020 20:50:02 -0700
Subject: [PATCH] feat(ui): streamline transaction formatting (#373)

Because we can pull up transaction details at any time, the
`Transaction` screen should be able to figure out what it needs to
display regardless of its parent.

* update `formatSubject` to work for all currently-supported messages
* change `registrar` to `domain`
* tests

Part of #347

***

* transaction component fetches its own subject details
* starting to work on payer
* registration no longer has to format subject
* fix up existing tests; add new ones for org reg
* transaction tests in add member & user reg flows
* fixes tests
* fetch avatar in script tag within transaction
---
 .../integration/org_member_addition.spec.js   |  61 +++---
 cypress/integration/org_registration.spec.js  | 124 ++++++++-----
 .../integration/project_registration.spec.js  |  28 +--
 cypress/integration/user_registration.spec.js | 173 +++++++++++-------
 ui/App.svelte                                 |   4 +-
 ui/DesignSystem/Component/Transaction.svelte  |  47 +++--
 .../Component/Transaction/Accordion.svelte    |   3 +-
 ui/DesignSystem/Primitive/Avatar.svelte       |   3 +-
 ui/Screen/DesignSystemGuide.svelte            |   2 +-
 ui/Screen/Org/MemberRegistration.svelte       |  58 ++----
 ui/Screen/OrgRegistration.svelte              |  60 +++---
 ui/Screen/Profile/Projects.svelte             |   7 +-
 ui/Screen/Project.svelte                      |   4 +-
 ui/Screen/ProjectRegistration.svelte          |  59 +++---
 .../RegistrationDetailsStep.svelte            |  39 ++--
 ui/Screen/TransactionDetails.svelte           |   8 +-
 .../SubmitRegistrationStep.svelte             |   3 +-
 ui/src/avatar.ts                              |   2 +-
 ui/src/org.ts                                 |  36 ++--
 ui/src/path.ts                                |   8 +-
 ui/src/project.ts                             |   5 +
 ui/src/transaction.ts                         |  92 +++++++---
 ui/src/user.ts                                |   1 -
 23 files changed, 471 insertions(+), 356 deletions(-)

diff --git a/cypress/integration/org_member_addition.spec.js b/cypress/integration/org_member_addition.spec.js
index f1693decc8..6cb5760b21 100644
--- a/cypress/integration/org_member_addition.spec.js
+++ b/cypress/integration/org_member_addition.spec.js
@@ -17,7 +17,7 @@ context("add member to org", () => {
   context("navigation", () => {
     it("can be closed by pressing cancel", () => {
       cy.pick("add-member-modal").contains("Register a member");
-      cy.pick("add-member-modal", "cancel-button").click();
+      cy.pick("cancel-button").click();
       cy.pick("org-screen").should("exist");
     });
 
@@ -29,18 +29,18 @@ context("add member to org", () => {
 
     it("can be traversed with navigation buttons", () => {
       // form -> tx confirmation
-      cy.pick("add-member-modal", "name-input").type("coolname");
-      cy.pick("add-member-modal", "submit-button").click();
-      cy.pick("add-member-modal", "summary").should("exist");
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
 
       // tx confirmation -> form
-      cy.pick("add-member-modal", "cancel-button").click();
-      cy.pick("add-member-modal", "name-input").should("exist");
+      cy.pick("cancel-button").click();
+      cy.pick("input").should("exist");
 
       // form -> tx confirmation -> submit
-      cy.pick("add-member-modal", "submit-button").click();
-      cy.pick("add-member-modal", "summary").should("exist");
-      cy.pick("add-member-modal", "submit-button").click();
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
+      cy.pick("submit-button").click();
       cy.pick("org-screen").should("exist");
     });
   });
@@ -48,26 +48,43 @@ context("add member to org", () => {
   context("validations", () => {
     it("prevents the user from adding an invalid user", () => {
       // no empty input
-      cy.pick("add-member-modal", "name-input").type("aname");
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal").contains("Member name is required");
-      cy.pick("add-member-modal", "submit-button").should("be.disabled");
+      cy.pick("input").type("aname");
+      cy.pick("input").clear();
+      cy.pick("add-member-modal").contains("Member handle is required");
+      cy.pick("submit-button").should("be.disabled");
 
       // no non-existing users
-      cy.pick("add-member-modal", "name-input").type("aname");
+      cy.pick("input").type("aname");
       cy.pick("add-member-modal").contains("Cannot find this user");
-      cy.pick("add-member-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
     });
   });
 
-  context("aesthetics", () => {
-    it("shows avatar when handle exists and hides otherwise", () => {
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal", "name-input").type("sickhandle");
-      cy.pick("add-member-modal", "avatar").should("be.visible");
+  context("transaction", () => {
+    it("shows correct transaction details for confirmation", () => {
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
 
-      cy.pick("add-member-modal", "name-input").clear();
-      cy.pick("add-member-modal", "avatar").should("not.be.visible");
+      cy.pick("message").contains("Org member registration");
+      cy.pick("subject").contains("coolname");
+    });
+
+    // TODO(sos): add actual transaction details check once we can make this tx
+    it.skip("submits correct transaction details to proxy", () => {
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("submit-button").click();
+
+      cy.pick("transaction-center").click();
+
+      // pick most recent transaction
+      cy.pick("accordion", "cards", "card").last().click();
+      cy.pick("summary", "message").contains("Org member registration");
+      cy.pick("summary", "subject").contains("coolname");
+      cy.pick("summary", "subject-avatar", "emoji").should(
+        "have.class",
+        "circle"
+      );
     });
   });
 });
diff --git a/cypress/integration/org_registration.spec.js b/cypress/integration/org_registration.spec.js
index 6eb2ad1ac0..2de2ded3a5 100644
--- a/cypress/integration/org_registration.spec.js
+++ b/cypress/integration/org_registration.spec.js
@@ -1,9 +1,10 @@
 context("org registration", () => {
   beforeEach(() => {
-    cy.nukeRegistryState();
-    cy.nukeSessionState();
+    cy.nukeAllState();
+    cy.nukeCache();
     cy.createIdentity();
     cy.registerUser();
+    cy.createProjectWithFixture();
 
     cy.visit("public/index.html");
     cy.pick("sidebar", "add-org-button").click();
@@ -12,7 +13,7 @@ context("org registration", () => {
   context("navigation", () => {
     it("can be closed by pressing cancel", () => {
       cy.pick("org-reg-modal").contains("Register an org");
-      cy.pick("org-reg-modal", "cancel-button").click();
+      cy.pick("cancel-button").click();
       cy.pick("profile-screen").should("exist");
     });
 
@@ -24,86 +25,121 @@ context("org registration", () => {
 
     it("can be traversed with navigation buttons", () => {
       // form -> tx confirmation
-      cy.pick("org-reg-modal", "name-input").type("coolname");
-      cy.pick("org-reg-modal", "submit-button").click();
-      cy.pick("org-reg-modal", "summary").should("exist");
+      cy.pick("input").type("coolname");
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
 
       // tx confirmation -> form
-      cy.pick("org-reg-modal", "cancel-button").click();
-      cy.pick("org-reg-modal", "name-input").should("exist");
+      cy.pick("cancel-button").click();
+      cy.pick("input").should("exist");
 
       // form -> tx confirmation -> submit
-      cy.pick("org-reg-modal", "submit-button").click();
-      cy.pick("org-reg-modal", "summary").should("exist");
-      cy.pick("org-reg-modal", "submit-button").click();
+      cy.pick("submit-button").click();
+      cy.pick("summary").should("exist");
+      cy.pick("submit-button").click();
       cy.pick("profile-screen").should("exist");
     });
   });
 
   context("validations", () => {
-    it("prevents the user from registering an invalid org name", () => {
+    it("prevents the user from registering an invalid org id", () => {
       // no empty input
-      cy.pick("org-reg-modal", "name-input").type("a_name");
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal").contains("Org name is required");
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("input").type("a_name");
+      cy.pick("input").clear();
+      cy.pick("org-reg-modal").contains("Org id is required");
+      cy.pick("submit-button").should("be.disabled");
 
       // no spaces
-      cy.pick("org-reg-modal", "name-input").type("no spaces");
+      cy.pick("input").type("no spaces");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // no special characters
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("^^^inVaLiD***");
+      cy.pick("input").clear();
+      cy.pick("input").type("^^^inVaLiD***");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // no starting with an underscore or dash
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("_nVaLiD");
+      cy.pick("input").clear();
+      cy.pick("input").type("_nVaLiD");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("-alsoInVaLiD");
+      cy.pick("input").clear();
+      cy.pick("input").type("-alsoInVaLiD");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
 
       // must meet minimum length
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("x");
+      cy.pick("input").clear();
+      cy.pick("input").type("x");
       cy.pick("org-reg-modal").contains(
-        "Org name should match [a-z0-9][a-z0-9_-]+"
+        "Org id should match [a-z0-9][a-z0-9_-]+"
       );
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("submit-button").should("be.disabled");
     });
 
-    it("prevents the user from registering an unavailable org name", () => {
+    it("prevents the user from registering an unavailable org id", () => {
       cy.registerOrg("coolname");
 
-      cy.pick("org-reg-modal", "name-input").type("coolname");
-      cy.pick("org-reg-modal").contains("Sorry, this name is already taken");
-      cy.pick("org-reg-modal", "submit-button").should("be.disabled");
+      cy.pick("org-reg-modal", "input").type("coolname");
+      cy.pick("org-reg-modal").contains("Sorry, this id is already taken");
+      cy.pick("submit-button").should("be.disabled");
     });
   });
 
   context("aesthetics", () => {
     it("shows avatar when handle exists and hides otherwise", () => {
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "name-input").type("sick_org");
-      cy.pick("org-reg-modal", "avatar").should("be.visible");
+      cy.pick("input").clear();
+      cy.pick("input").type("sick_org");
+      cy.pick("avatar").should("be.visible");
 
-      cy.pick("org-reg-modal", "name-input").clear();
-      cy.pick("org-reg-modal", "avatar").should("not.be.visible");
+      cy.pick("input").clear();
+      cy.pick("avatar").should("not.be.visible");
+    });
+  });
+
+  context("transaction", () => {
+    // TODO(sos): add tests for tx costs/wallet when it makes sense to do so
+    it("shows correct transaction details for confirmation", () => {
+      cy.pick("input").type("mariposa");
+      cy.pick("submit-button").click();
+
+      cy.pick("message").contains("Org registration");
+      cy.pick("subject").contains("mariposa");
+      cy.pick("subject-avatar", "emoji").should("have.class", "square");
+    });
+
+    it("submits correct transaction details to proxy", () => {
+      cy.pick("input").type("mariposa");
+      cy.pick("submit-button").click();
+      cy.pick("submit-button").click();
+
+      cy.pick("transaction-center").click();
+
+      // pick most recent transaction
+      cy.pick("card").first().click();
+      cy.pick("summary", "message").contains("Org registration");
+      cy.pick("summary", "subject").contains("mariposa");
+      cy.pick("summary", "subject-avatar", "emoji").should(
+        "have.class",
+        "square"
+      );
+      cy.pick("subject", "emoji").find("img").should("have.attr", "alt", "🗳");
+      cy.pick("subject", "emoji").should(
+        "have.css",
+        "background-color",
+        "rgb(186, 38, 114)"
+      );
     });
   });
 });
diff --git a/cypress/integration/project_registration.spec.js b/cypress/integration/project_registration.spec.js
index c71bb2ac9c..87cfca2601 100644
--- a/cypress/integration/project_registration.spec.js
+++ b/cypress/integration/project_registration.spec.js
@@ -51,8 +51,8 @@ context("project registration", () => {
 
       // The project is pre-selected to what we chose on the previous screen
       cy.pick("project-dropdown").contains(project2.name).should("be.visible");
-      // Registrar is pre-selected to our own identity
-      cy.pick("registrar-dropdown").contains(user).should("be.visible");
+      // Domain is pre-selected to our own identity
+      cy.pick("domain-dropdown").contains(user).should("be.visible");
       // The project name is pre-filled in the to-be-registered handle field
       cy.pick("name-input").should("have.value", project2.name);
     });
@@ -68,8 +68,8 @@ context("project registration", () => {
 
       // The project is pre-selected to what we chose on the previous screen
       cy.pick("project-dropdown").contains(project2.name).should("be.visible");
-      // Registrar is pre-selected to our own identity
-      cy.pick("registrar-dropdown").contains(user).should("be.visible");
+      // Domain is pre-selected to our own identity
+      cy.pick("domain-dropdown").contains(user).should("be.visible");
       // The project name is pre-filled in the to-be-registered handle field
       cy.pick("name-input").should("have.value", project2.name);
     });
@@ -83,8 +83,8 @@ context("project registration", () => {
       cy.pick("project-dropdown")
         .contains("Select project to register")
         .should("be.visible");
-      // Registrar is pre-selected to the org we chose
-      cy.pick("registrar-dropdown").contains(org2).should("be.visible");
+      // Domain is pre-selected to the org we chose
+      cy.pick("domain-dropdown").contains(org2).should("be.visible");
       cy.pick("name-input").should("have.value", "");
     });
 
@@ -98,8 +98,8 @@ context("project registration", () => {
       cy.pick("project-dropdown")
         .contains("Select project to register")
         .should("be.visible");
-      // Registrar is pre-selected to the org we chose
-      cy.pick("registrar-dropdown").contains(org1).should("be.visible");
+      // Domain is pre-selected to the org we chose
+      cy.pick("domain-dropdown").contains(org1).should("be.visible");
       cy.pick("name-input").should("have.value", "");
     });
 
@@ -131,8 +131,9 @@ context("project registration", () => {
   });
 
   context("summary screen", () => {
+    // TODO(sos): test this when we can actually register projects under users
     context("when registering under a user", () => {
-      it("shows the selected subject and payer information", () => {
+      it.skip("shows the selected subject and payer information", () => {
         cy.pick(`project-list-entry-${project1.name}`, "context-menu").click();
         cy.pick(`project-list-entry-${project1.name}`).click();
 
@@ -159,8 +160,8 @@ context("project registration", () => {
         cy.pick("project-registration-screen").should("exist");
 
         cy.pick("project-dropdown").click().contains(project1.name).click();
-        // Registrar is pre-selected to the org we chose
-        cy.pick("registrar-dropdown").contains(org1).should("be.visible");
+        // Domain is pre-selected to the org we chose
+        cy.pick("domain-dropdown").contains(org1).should("be.visible");
         cy.pick("name-input").should("have.value", project1.name);
 
         cy.pick("submit-button").click();
@@ -168,8 +169,9 @@ context("project registration", () => {
         cy.get('[data-cy="subject-avatar"] img[alt="🥂"]').should("exist");
         cy.pick("subject-avatar").contains(`${org1} / ${project1.name}`);
 
-        cy.get('[data-cy="payer-avatar"] img[alt="🥂"]').should("exist");
-        cy.pick("payer-avatar").contains(org1);
+        // TODO(sos): test this when we can actually change transaction payer
+        // cy.get('[data-cy="payer-avatar"] img[alt="🥂"]').should("exist");
+        // cy.pick("payer-avatar").contains(org1);
       });
     });
   });
diff --git a/cypress/integration/user_registration.spec.js b/cypress/integration/user_registration.spec.js
index 409c5c689f..65d21d6576 100644
--- a/cypress/integration/user_registration.spec.js
+++ b/cypress/integration/user_registration.spec.js
@@ -1,96 +1,135 @@
 context("user registration", () => {
+  before(() => {
+    cy.nukeAllState();
+    cy.nukeCache();
+    cy.registerUser();
+    cy.createProjectWithFixture();
+  });
+
   beforeEach(() => {
-    cy.nukeRegistryState();
     cy.nukeSessionState();
     cy.createIdentity();
 
     cy.visit("public/index.html");
-    cy.get('[data-cy="profile-context-menu"]').click();
-    cy.get('[data-cy="dropdown-menu"] [data-cy="register-handle"]').click();
+    cy.pick("profile-context-menu").click();
+    cy.pick("dropdown-menu", "register-handle").click();
   });
 
   context("modal navigation", () => {
     it("can be closed by pressing cancel", () => {
-      cy.get('[data-cy="page"] [data-cy="register-user"]').should("exist");
-      cy.get('[data-cy="register-user"] [data-cy="cancel-button"]').click();
-      cy.get('[data-cy="profile-screen"]').should("exist");
+      cy.pick("page", "register-user").should("exist");
+      cy.pick("register-user", "cancel-button").click();
+      cy.pick("profile-screen").should("exist");
     });
 
     it("can be closed by pressing escape key", () => {
-      cy.get('[data-cy="page"] [data-cy="register-user"]').should("exist");
+      cy.pick("page", "register-user").should("exist");
       cy.get("body").type("{esc}");
-      cy.get('[data-cy="profile-screen"]').should("exist");
+      cy.pick("profile-screen").should("exist");
     });
 
     // navigation between pick handle (1) and submit tx (2) steps
     it("moves through the views by pressing navigation buttons", () => {
       // 1 -> 2
-      cy.get('[data-cy="register-user"] [data-cy="handle"]').should("exist");
-      cy.get('[data-cy="page"] [data-cy="handle"]').type("testy");
-      cy.get('[data-cy="register-user"] [data-cy="next-button"]').click();
-      cy.get('[data-cy="register-user"] [data-cy="summary"]').should("exist");
+      cy.pick("handle").should("exist");
+      cy.pick("page", "handle").type("testy");
+      cy.pick("next-button").click();
+      cy.pick("summary").should("exist");
       // 2 -> 1
-      cy.get('[data-cy="register-user"] [data-cy="back-button"]').click();
-      cy.get('[data-cy="register-user"] [data-cy="handle"]').should("exist");
+      cy.pick("back-button").click();
+      cy.pick("handle").should("exist");
       // 1 -> 2
-      cy.get('[data-cy="register-user"] [data-cy="next-button"]').click();
-      cy.get('[data-cy="register-user"] [data-cy="summary"]').should("exist");
+      cy.pick("next-button").click();
+      cy.pick("summary").should("exist");
       // 2 -> close modal
-      cy.get('[data-cy="register-user"] [data-cy="submit-button"]').click();
-      cy.get('[data-cy="profile-screen"]').should("exist");
+      cy.pick("submit-button").click();
+      cy.pick("profile-screen").should("exist");
     });
   });
 
   context("validations", () => {
-    context("handle", () => {
-      it("prevents the user from registering an invalid handle", () => {
-        // shows a validation message when handle is not present
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"]').contains("Handle is required");
-
-        // shows a validation message when handle contains invalid characters
-        // spaces are not allowed
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("no spaces");
-        cy.get('[data-cy="page"]').contains(
-          "Handle should match ^[a-z0-9][a-z0-9_-]+$"
-        );
-
-        // special characters are disallowed
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("$bad");
-        cy.get('[data-cy="page"]').contains(
-          "Handle should match ^[a-z0-9][a-z0-9_-]+$"
-        );
-
-        // can't start with an underscore
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("_nein");
-        cy.get('[data-cy="page"]').contains(
-          "Handle should match ^[a-z0-9][a-z0-9_-]+$"
-        );
-
-        // can't start with a dash
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("-nope");
-        cy.get('[data-cy="page"]').contains(
-          "Handle should match ^[a-z0-9][a-z0-9_-]+$"
-        );
-
-        // has to be at least two characters long
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("x");
-        cy.get('[data-cy="page"]').contains(
-          "Handle should match ^[a-z0-9][a-z0-9_-]+$"
-        );
-      });
-
-      it("prevents the user from registering an unavailable handle", () => {
-        cy.registerUser("taken");
-
-        cy.get('[data-cy="page"] [data-cy="handle"]').clear();
-        cy.get('[data-cy="page"] [data-cy="handle"]').type("taken");
-        cy.get('[data-cy="page"]').contains("Handle already taken");
-      });
+    it("prevents the user from registering an invalid handle", () => {
+      // shows a validation message when handle is not present
+      cy.pick("handle").clear();
+      cy.pick("page").contains("Handle is required");
+
+      // shows a validation message when handle contains invalid characters
+      // spaces are not allowed
+      cy.pick("handle").type("no spaces");
+      cy.pick("page").contains("Handle should match ^[a-z0-9][a-z0-9_-]+$");
+
+      // special characters are disallowed
+      cy.pick("handle").clear();
+      cy.pick("handle").type("$bad");
+      cy.pick("page").contains("Handle should match ^[a-z0-9][a-z0-9_-]+$");
+
+      // can't start with an underscore
+      cy.pick("handle").clear();
+      cy.pick("handle").type("_nein");
+      cy.pick("page").contains("Handle should match ^[a-z0-9][a-z0-9_-]+$");
+
+      // can't start with a dash
+      cy.pick("handle").clear();
+      cy.pick("handle").type("-nope");
+      cy.pick("page").contains("Handle should match ^[a-z0-9][a-z0-9_-]+$");
+
+      // has to be at least two characters long
+      cy.pick("handle").clear();
+      cy.pick("handle").type("x");
+      cy.pick("page").contains("Handle should match ^[a-z0-9][a-z0-9_-]+$");
+    });
+
+    it("prevents the user from registering an unavailable handle", () => {
+      cy.pick("handle").clear();
+      cy.pick("handle").type("nope");
+      cy.pick("page").contains("Handle already taken");
+    });
+  });
+
+  context("transaction", () => {
+    before(() => {
+      // Clear everything again so transaction center is empty
+      cy.nukeAllState();
+      cy.nukeCache();
+      cy.createProjectWithFixture();
+    });
+
+    it("shows the correct transaction details for confirmation", () => {
+      cy.pick("next-button").click();
+
+      cy.pick("message").contains("User registration");
+      cy.pick("subject").contains("secretariat");
+
+      cy.pick("subject-avatar", "emoji").should("have.class", "circle");
+      cy.pick("subject", "emoji").find("img").should("have.attr", "alt", "🙊");
+      cy.pick("subject", "emoji").should(
+        "have.css",
+        "background-color",
+        "rgb(185, 118, 211)"
+      );
+    });
+
+    it("submits correct transaction details to proxy", () => {
+      cy.pick("next-button").click();
+      cy.pick("submit-button").click();
+
+      cy.pick("transaction-center").click();
+
+      // // pick most recent transaction
+      cy.pick("card").last().click();
+      cy.pick("summary", "message").contains("User registration");
+      cy.pick("summary", "subject").contains("secretariat");
+
+      cy.pick("summary", "subject-avatar", "emoji").should(
+        "have.class",
+        "circle"
+      );
+      cy.pick("subject", "emoji").find("img").should("have.attr", "alt", "🙊");
+      cy.pick("subject", "emoji").should(
+        "have.css",
+        "background-color",
+        "rgb(185, 118, 211)"
+      );
     });
   });
 });
diff --git a/ui/App.svelte b/ui/App.svelte
index 22d7887c6c..4cdfd28e46 100644
--- a/ui/App.svelte
+++ b/ui/App.svelte
@@ -40,8 +40,8 @@
     "/orgs/:id": Org,
     "/orgs/:id/*": Org,
     "/projects/new": ProjectCreation,
-    "/projects/register/:registrarId": ProjectRegistration,
-    "/projects/:projectId/register/:registrarId": ProjectRegistration,
+    "/projects/register/:domainId": ProjectRegistration,
+    "/projects/:projectId/register/:domainId": ProjectRegistration,
     "/projects/:id/*": Project,
     "/design-system-guide": DesignSystemGuide,
     "/help": Help,
diff --git a/ui/DesignSystem/Component/Transaction.svelte b/ui/DesignSystem/Component/Transaction.svelte
index a5c32b0060..c9205a8316 100644
--- a/ui/DesignSystem/Component/Transaction.svelte
+++ b/ui/DesignSystem/Component/Transaction.svelte
@@ -2,7 +2,9 @@
   import {
     formatMessage,
     formatStake,
-    Variant,
+    formatSubject,
+    SubjectType,
+    PayerType,
   } from "../../src/transaction.ts";
 
   import {
@@ -17,25 +19,46 @@
 
   export let transaction = null;
   export let payer = null;
-  export let subject = null;
+  let avatar;
+
+  const subject = formatSubject(transaction.messages[0]);
+  const subjectAvatarShape = () => {
+    switch (subject.type) {
+      case SubjectType.User:
+      case SubjectType.Member:
+      case SubjectType.UserProject:
+        return "circle";
+      default:
+        return "square";
+    }
+  };
+
+  const updateAvatar = async () => (avatar = await subject.avatarSource);
+
+  $: updateAvatar();
 </script>
 
 <Caption style="color: var(--color-foreground-level-6); margin-bottom: 16px">
   Your transaction
 </Caption>
+
 <Row dataCy="summary" variant={transaction.id ? 'top' : 'single'}>
-  <div slot="left">
+  <div slot="left" data-cy="message">
     <Title>{formatMessage(transaction.messages[0])}</Title>
   </div>
 
-  <div slot="right">
-    <Avatar
-      dataCy="subject-avatar"
-      title={subject.name}
-      imageUrl={subject.imageUrl}
-      avatarFallback={subject.avatarFallback}
-      variant={subject.variant === Variant.User ? 'circle' : 'square'}
-      style="color: var(--color-foreground)" />
+  <div slot="right" data-cy="subject">
+    {#if avatar}
+      <Avatar
+        title={subject.name}
+        imageUrl={avatar.url}
+        avatarFallback={avatar.emoji && avatar}
+        variant={subjectAvatarShape()}
+        style="color: var(--color-foreground)"
+        dataCy="subject-avatar" />
+    {:else}
+      <Title>{subject.name}</Title>
+    {/if}
   </div>
 </Row>
 
@@ -100,7 +123,7 @@
       title={payer.name}
       imageUrl={payer.imageUrl}
       avatarFallback={payer.avatarFallback}
-      variant={payer.variant === Variant.User ? 'circle' : 'square'}
+      variant={payer.type === PayerType.User ? 'circle' : 'square'}
       style="color: var(--color-foreground)" />
   </div>
 
diff --git a/ui/DesignSystem/Component/Transaction/Accordion.svelte b/ui/DesignSystem/Component/Transaction/Accordion.svelte
index 53b5504434..0b9128692a 100644
--- a/ui/DesignSystem/Component/Transaction/Accordion.svelte
+++ b/ui/DesignSystem/Component/Transaction/Accordion.svelte
@@ -136,7 +136,8 @@
         class="card"
         on:click={() => {
           push(path.transactions(transaction.id));
-        }}>
+        }}
+        data-cy="card">
         <Flex style="height: 100%">
           <div slot="left" style="display: flex;">
             <Icon.TransactionState
diff --git a/ui/DesignSystem/Primitive/Avatar.svelte b/ui/DesignSystem/Primitive/Avatar.svelte
index 5f1ad26e04..44ad48afa7 100644
--- a/ui/DesignSystem/Primitive/Avatar.svelte
+++ b/ui/DesignSystem/Primitive/Avatar.svelte
@@ -151,7 +151,8 @@
   {:else if avatarFallback}
     <div
       class={`avatar ${avatarClass}`}
-      style="background: {fmt(avatarFallback.background)}">
+      style="background: {fmt(avatarFallback.background)}"
+      data-cy="emoji">
       {@html twemoji.parse(avatarFallback.emoji, {
         className: `emoji ${size}`,
         base: '',
diff --git a/ui/Screen/DesignSystemGuide.svelte b/ui/Screen/DesignSystemGuide.svelte
index f5e7fa6cb8..3026963073 100644
--- a/ui/Screen/DesignSystemGuide.svelte
+++ b/ui/Screen/DesignSystemGuide.svelte
@@ -610,7 +610,7 @@
 
       <Swatch>
         <Dropdown
-          placeholder="Select registrar..."
+          placeholder="Select domain..."
           value="2"
           options={dropdownOptions2} />
       </Swatch>
diff --git a/ui/Screen/Org/MemberRegistration.svelte b/ui/Screen/Org/MemberRegistration.svelte
index 644d38fb05..d8b1e6b440 100644
--- a/ui/Screen/Org/MemberRegistration.svelte
+++ b/ui/Screen/Org/MemberRegistration.svelte
@@ -1,58 +1,51 @@
 <script>
   import { pop } from "svelte-spa-router";
 
-  import * as avatar from "../../src/avatar.ts";
   import { session } from "../../src/session.ts";
   import {
     RegistrationFlowState,
     registerMemberTransaction,
-    memberNameValidationStore,
+    memberHandleValidationStore,
   } from "../../src/org.ts";
-  import { formatPayer, formatSubject } from "../../src/transaction.ts";
+  import { formatPayer } from "../../src/transaction.ts";
   import { ValidationStatus } from "../../src/validation.ts";
 
-  import { Avatar, Input, Text } from "../../DesignSystem/Primitive";
+  import { Input, Text } from "../../DesignSystem/Primitive";
   import {
     NavigationButtons,
     StepModalLayout,
     Transaction,
   } from "../../DesignSystem/Component";
 
-  let state = RegistrationFlowState.NameSelection;
+  let state = RegistrationFlowState.Preparation;
   let userHandle,
-    avatarFallback,
-    showAvatar,
     transaction,
     subject,
     payer,
     validating = false;
-  const validation = memberNameValidationStore();
+  const validation = memberHandleValidationStore();
 
   const next = () => {
     switch (state) {
-      case RegistrationFlowState.NameSelection:
+      case RegistrationFlowState.Preparation:
         if ($validation.status === ValidationStatus.Success) {
           transaction = registerMemberTransaction("monadic", userHandle);
-          subject = formatSubject(
-            $session.data.identity,
-            transaction.messages[0]
-          );
           payer = formatPayer($session.data.identity);
-          state = RegistrationFlowState.TransactionConfirmation;
+          state = RegistrationFlowState.Confirmation;
         }
         break;
-      case RegistrationFlowState.TransactionConfirmation:
+      case RegistrationFlowState.Confirmation:
         pop();
     }
   };
 
   const cancel = () => {
     switch (state) {
-      case RegistrationFlowState.NameSelection:
+      case RegistrationFlowState.Preparation:
         pop();
         break;
-      case RegistrationFlowState.TransactionConfirmation:
-        state = RegistrationFlowState.NameSelection;
+      case RegistrationFlowState.Confirmation:
+        state = RegistrationFlowState.Preparation;
     }
   };
 
@@ -61,20 +54,6 @@
     if (validating) validation.updateInput(userHandle);
   }
 
-  // TODO(sos): replace with user avatar fetch
-  const updateAvatar = async (handle) => {
-    if (!handle || handle.length < 1) {
-      showAvatar = false;
-      return;
-    }
-
-    avatarFallback = await avatar.get(avatar.Usage.Identity, handle);
-
-    // check userHandle in case input was cleared during the promise
-    showAvatar = userHandle.length && !!avatarFallback;
-  };
-
-  $: updateAvatar(userHandle);
   $: imageUrl = $validation.status === ValidationStatus.Success && "";
   $: disableSubmit = $validation.status !== ValidationStatus.Success;
 </script>
@@ -84,7 +63,7 @@
   selectedStep={state + 1}
   dataCy="add-member-modal">
   <div slot="title">Register a member</div>
-  {#if state === RegistrationFlowState.NameSelection}
+  {#if state === RegistrationFlowState.Preparation}
     <Text style="color: var(--color-foreground-level-5); margin-bottom: 24px;">
       Registering a member will allow them to sign transactions for your org.
       Only registered users can be added as members.
@@ -95,17 +74,8 @@
       style="width: 100%;"
       showSuccessCheck
       validation={$validation}
-      {showAvatar}
-      dataCy="name-input">
-      <div slot="avatar">
-        <Avatar
-          {avatarFallback}
-          size="small"
-          variant="circle"
-          dataCy="avatar" />
-      </div>
-    </Input.Text>
-  {:else if state === RegistrationFlowState.TransactionConfirmation}
+      dataCy="input" />
+  {:else if state === RegistrationFlowState.Confirmation}
     <div style="width: 100%;">
       <Transaction {transaction} {subject} {payer} />
     </div>
diff --git a/ui/Screen/OrgRegistration.svelte b/ui/Screen/OrgRegistration.svelte
index 466900a5b3..67b456c871 100644
--- a/ui/Screen/OrgRegistration.svelte
+++ b/ui/Screen/OrgRegistration.svelte
@@ -1,19 +1,15 @@
 <script>
   import { pop } from "svelte-spa-router";
 
-  import * as avatar from "../src/avatar.ts";
+  import { getAvatar, Usage } from "../src/avatar.ts";
   import * as notification from "../src/notification.ts";
   import {
     RegistrationFlowState,
-    orgNameValidationStore,
+    orgIdValidationStore,
     register,
   } from "../src/org.ts";
   import { session, fetch as fetchSession } from "../src/session.ts";
-  import {
-    formatPayer,
-    formatSubject,
-    MessageType,
-  } from "../src/transaction.ts";
+  import { formatPayer, MessageType } from "../src/transaction.ts";
   import { ValidationStatus } from "../src/validation.ts";
 
   import {
@@ -23,41 +19,37 @@
   } from "../DesignSystem/Component";
   import { Avatar, Input, Text } from "../DesignSystem/Primitive";
 
-  let orgName, transaction, subject, payer, avatarFallback, showAvatar;
-  let state = RegistrationFlowState.NameSelection;
+  let orgId, transaction, subject, payer, avatarFallback, showAvatar;
+  let state = RegistrationFlowState.Preparation;
 
   // Create a new validation store
   let validating = false;
-  const validation = orgNameValidationStore();
+  const validation = orgIdValidationStore();
 
   const next = () => {
     switch (state) {
-      case RegistrationFlowState.NameSelection:
+      case RegistrationFlowState.Preparation:
         if ($validation.status === ValidationStatus.Success) {
           transaction = {
             messages: [
               {
                 type: MessageType.OrgRegistration,
-                orgId: orgName,
+                id: orgId,
               },
             ],
           };
-          subject = formatSubject(
-            { avatarFallback: avatarFallback, metadata: { avatarUrl: null } },
-            transaction.messages[0]
-          );
           payer = formatPayer($session.data.identity);
-          state = RegistrationFlowState.TransactionConfirmation;
+          state = RegistrationFlowState.Confirmation;
         }
         break;
-      case RegistrationFlowState.TransactionConfirmation:
+      case RegistrationFlowState.Confirmation:
         registerOrg();
     }
   };
 
   const registerOrg = async () => {
     try {
-      await register(orgName);
+      await register(orgId);
       await fetchSession();
     } catch (error) {
       notification.error(`Could not register org: ${error.message}`);
@@ -68,11 +60,11 @@
 
   const cancel = () => {
     switch (state) {
-      case RegistrationFlowState.NameSelection:
+      case RegistrationFlowState.Preparation:
         pop();
         break;
-      case RegistrationFlowState.TransactionConfirmation:
-        state = RegistrationFlowState.NameSelection;
+      case RegistrationFlowState.Confirmation:
+        state = RegistrationFlowState.Preparation;
     }
   };
 
@@ -82,22 +74,22 @@
       return;
     }
 
-    avatarFallback = await avatar.get(avatar.Usage.Org, id);
+    avatarFallback = await getAvatar(Usage.Org, id);
 
-    // check orgName in case input was cleared during the promise
-    showAvatar = orgName.length && !!avatarFallback;
+    // check orgId in case input was cleared during the promise
+    showAvatar = orgId.length && !!avatarFallback;
   };
 
-  $: updateAvatar(orgName);
+  $: updateAvatar(orgId);
   $: submitLabel =
-    state === RegistrationFlowState.TransactionConfirmation
+    state === RegistrationFlowState.Confirmation
       ? "Submit transaction"
       : "Next";
 
   $: {
     // Start validating once the user enters something for the first time
-    if (orgName && orgName.length > 0) validating = true;
-    if (validating) validation.updateInput(orgName);
+    if (orgId && orgId.length > 0) validating = true;
+    if (validating) validation.updateInput(orgId);
   }
 
   $: disableSubmit = $validation.status !== ValidationStatus.Success;
@@ -106,17 +98,17 @@
 <StepModalLayout
   dataCy="org-reg-modal"
   selectedStep={state + 1}
-  steps={['Prepare', 'Submit']}>
+  steps={['Preparation', 'Submit']}>
   <div slot="title">Register an org</div>
-  {#if state === RegistrationFlowState.NameSelection}
+  {#if state === RegistrationFlowState.Preparation}
     <Text style="color: var(--color-foreground-level-5); margin-bottom: 24px;">
       Registering an org allows you to give others in your org the right to sign
       transactions, like adding other members or adding projects.
     </Text>
     <Input.Text
-      dataCy="name-input"
+      dataCy="input"
       placeholder="Org name (e.g. Flowerpot)"
-      bind:value={orgName}
+      bind:value={orgId}
       style="width: 100%;"
       showSuccessCheck
       {showAvatar}
@@ -129,7 +121,7 @@
           dataCy="avatar" />
       </div>
     </Input.Text>
-  {:else if state === RegistrationFlowState.TransactionConfirmation}
+  {:else if state === RegistrationFlowState.Confirmation}
     <div style="width: 100%;">
       <Transaction {transaction} {subject} {payer} />
     </div>
diff --git a/ui/Screen/Profile/Projects.svelte b/ui/Screen/Profile/Projects.svelte
index b43712aa36..b3483b3451 100644
--- a/ui/Screen/Profile/Projects.svelte
+++ b/ui/Screen/Profile/Projects.svelte
@@ -31,7 +31,12 @@
           dataCy: "register-project",
           icon: Icon.Register,
           event: () =>
-            push(path.registerExistingProject(projectId, session.identity.id)),
+            push(
+              path.registerExistingProject(
+                projectId,
+                session.identity.registered
+              )
+            ),
         },
       ];
     } else {
diff --git a/ui/Screen/Project.svelte b/ui/Screen/Project.svelte
index c1517cc57d..872c3e72ce 100644
--- a/ui/Screen/Project.svelte
+++ b/ui/Screen/Project.svelte
@@ -91,7 +91,9 @@
       title: "Register project",
       icon: Icon.Register,
       event: () =>
-        push(path.registerExistingProject(params.id, session.identity.id)),
+        push(
+          path.registerExistingProject(params.id, session.identity.registered)
+        ),
     };
   } else {
     registerProjectMenuItem = {
diff --git a/ui/Screen/ProjectRegistration.svelte b/ui/Screen/ProjectRegistration.svelte
index 1cccac5bbd..c4dc61092f 100644
--- a/ui/Screen/ProjectRegistration.svelte
+++ b/ui/Screen/ProjectRegistration.svelte
@@ -22,48 +22,36 @@
   const session = getContext("session");
 
   let projectId = params.projectId || null;
-  let registrarId = params.registrarId || null;
+  let projectName = null;
 
-  let registrarHandle = null;
-  let registrarAvatarFallback = null;
-  let registrarImageUrl = null;
-  let registrarVariant = null;
+  let domainId = params.domainId || null;
+  let domainType = null;
+  let domainAvatar = null;
 
   let skipNamePreselection = false;
-
-  let projectName = null;
-
   let showRegistrationDetails = true;
 
   // summary
 
   const onSubmitTransaction = () => {
-    project.register(registrarHandle, projectName, projectId);
+    project.register(domainId, projectName, projectId);
 
     pop();
   };
 
-  const wallet = () => {
-    return {
-      name: registrarHandle,
-      imageUrl: registrarImageUrl,
-      avatarFallback: registrarAvatarFallback,
-      variant: registrarVariant,
-    };
-  };
-
-  const subject = () => {
-    return {
-      name: `${registrarHandle} / ${projectName}`,
-      imageUrl: registrarImageUrl,
-      avatarFallback: registrarAvatarFallback,
-      variant: registrarVariant,
-    };
-  };
-
-  const tx = {
-    messages: [{ type: transaction.MessageType.ProjectRegistration }],
-  };
+  const wallet = () => transaction.formatPayer(session.identity);
+
+  // TODO(sos): coordinate message format for project registration with proxy
+  const tx = () => ({
+    messages: [
+      {
+        type: transaction.MessageType.ProjectRegistration,
+        // domain: domainType,
+        org_id: domainId,
+        project_name: projectName,
+      },
+    ],
+  });
 </script>
 
 <style>
@@ -98,17 +86,16 @@
             {skipNamePreselection}
             orgs={session.orgs}
             bind:projectId
-            bind:registrarId
+            bind:domainId
             bind:projectName
             on:next={(event) => {
-              registrarHandle = event.detail.registrarHandle;
-              registrarImageUrl = event.detail.registrarImageUrl;
-              registrarAvatarFallback = event.detail.registrarAvatarFallback;
-              registrarVariant = event.detail.registrarVariant;
+              domainId = event.detail.domainId;
+              domainType = event.detail.domainType;
               showRegistrationDetails = false;
+              domainAvatar = event.detail.domainAvatar;
             }} />
         {:else}
-          <Transaction payer={wallet()} subject={subject()} transaction={tx} />
+          <Transaction payer={wallet()} transaction={tx()} />
 
           <NavigationButtons
             style={'margin-top: 32px;'}
diff --git a/ui/Screen/ProjectRegistration/RegistrationDetailsStep.svelte b/ui/Screen/ProjectRegistration/RegistrationDetailsStep.svelte
index 5aab87affc..70e05e20e3 100644
--- a/ui/Screen/ProjectRegistration/RegistrationDetailsStep.svelte
+++ b/ui/Screen/ProjectRegistration/RegistrationDetailsStep.svelte
@@ -4,8 +4,7 @@
   import validatejs from "validate.js";
 
   import * as notification from "../../src/notification.ts";
-  import * as project from "../../src/project.ts";
-  import * as transaction from "../../src/transaction.ts";
+  import { getOrgProject, Domain } from "../../src/project.ts";
 
   import { Text, Title, Input } from "../../DesignSystem/Primitive";
   import { Dropdown, NavigationButtons } from "../../DesignSystem/Component";
@@ -13,7 +12,7 @@
   const dispatch = createEventDispatcher();
 
   export let projectId = null;
-  export let registrarId = null;
+  export let domainId = null;
   export let projectName = null;
 
   export let projects = null;
@@ -24,28 +23,25 @@
 
   const next = () => {
     dispatch("next", {
-      registrarHandle: selectedRegistrar().avatarProps.title,
-      registrarImageUrl: selectedRegistrar().avatarProps.imageUrl,
-      registrarAvatarFallback: selectedRegistrar().avatarProps.avatarFallback,
-      registrarVariant:
-        selectedRegistrar().avatarProps.variant === "circle"
-          ? transaction.Variant.User
-          : transaction.Variant.Org,
+      domainId: selectedDomain().value,
+      domainType: selectedDomain().type,
+      domainAvatar: selectedDomain().avatarProps.avatarFallback,
     });
   };
 
-  const selectedRegistrar = () => {
-    return registrarDropdownOptions.find((option) => {
-      return option.value === registrarId;
+  const selectedDomain = () => {
+    return domainDropdownOptions.find((option) => {
+      return option.value === domainId;
     });
   };
 
   const identityOption = {
     variant: "avatar",
-    value: session.identity.id,
+    value: session.identity.registered,
+    type: Domain.User,
     avatarProps: {
       variant: "circle",
-      title: session.identity.metadata.handle,
+      title: session.identity.registered,
       avatarFallback: session.identity.avatarFallback,
       imageUrl: session.identity.metadata.avatarUrl,
     },
@@ -55,6 +51,7 @@
     return {
       variant: "avatar",
       value: org.id,
+      type: Domain.Org,
       avatarProps: {
         variant: "square",
         title: org.id,
@@ -63,7 +60,7 @@
     };
   });
 
-  const registrarDropdownOptions = [identityOption, ...orgOptions];
+  const domainDropdownOptions = [identityOption, ...orgOptions];
 
   const projectDropdownOptions = projects.map((project) => {
     return {
@@ -97,8 +94,8 @@
 
   const validateProjectNameAvailability = async () => {
     try {
-      const present = await project.getOrgProject(
-        selectedRegistrar().avatarProps.title,
+      const present = await getOrgProject(
+        selectedDomain().avatarProps.title,
         projectName
       );
 
@@ -169,9 +166,9 @@
 
 <div class="name">
   <Dropdown
-    dataCy="registrar-dropdown"
-    bind:value={registrarId}
-    options={registrarDropdownOptions} />
+    dataCy="domain-dropdown"
+    bind:value={domainId}
+    options={domainDropdownOptions} />
   <Title
     style="margin: 0 8px 0 8px; color: var(--color-foreground-level-5);"
     variant="regular">
diff --git a/ui/Screen/TransactionDetails.svelte b/ui/Screen/TransactionDetails.svelte
index e24cd7319f..c01f7683b1 100644
--- a/ui/Screen/TransactionDetails.svelte
+++ b/ui/Screen/TransactionDetails.svelte
@@ -3,7 +3,7 @@
   import { pop } from "svelte-spa-router";
 
   import { fallback } from "../src/identity.ts";
-  import { fetch, formatPayer, formatSubject } from "../src/transaction.ts";
+  import { fetch, formatPayer } from "../src/transaction.ts";
 
   import {
     ModalLayout,
@@ -22,7 +22,6 @@
   if (session.identity !== null) {
     identity = session.identity;
   }
-
   const store = fetch(params.id);
 </script>
 
@@ -48,10 +47,7 @@
         variant="caution"
         progress={0}
         time={tx.timestamp} />
-      <Transaction
-        transaction={tx}
-        payer={formatPayer(identity)}
-        subject={formatSubject(identity, tx.messages[0])} />
+      <Transaction transaction={tx} payer={formatPayer(identity)} />
     </Remote>
 
     <div class="button-row">
diff --git a/ui/Screen/UserRegistration/SubmitRegistrationStep.svelte b/ui/Screen/UserRegistration/SubmitRegistrationStep.svelte
index 6b7c6415cd..12593766cb 100644
--- a/ui/Screen/UserRegistration/SubmitRegistrationStep.svelte
+++ b/ui/Screen/UserRegistration/SubmitRegistrationStep.svelte
@@ -20,10 +20,9 @@
     ],
   };
   const payer = transaction.formatPayer(identity);
-  const subject = transaction.formatSubject(identity, tx.messages[0]);
 </script>
 
-<Transaction transaction={tx} {payer} {subject} />
+<Transaction transaction={tx} {payer} />
 
 <Flex style="margin-top: 32px;" align="right">
   <Button
diff --git a/ui/src/avatar.ts b/ui/src/avatar.ts
index 697f384527..4f6aadb10f 100644
--- a/ui/src/avatar.ts
+++ b/ui/src/avatar.ts
@@ -23,5 +23,5 @@ export enum Usage {
 }
 
 // EVENTS
-export const get = (usage: Usage, id: string): Promise<EmojiAvatar> =>
+export const getAvatar = (usage: Usage, id: string): Promise<EmojiAvatar> =>
   api.get<EmojiAvatar>(`avatars/${id}?usage=${usage}`);
diff --git a/ui/src/org.ts b/ui/src/org.ts
index 2744e07ece..d34a6d001a 100644
--- a/ui/src/org.ts
+++ b/ui/src/org.ts
@@ -9,7 +9,7 @@ import * as user from "./user";
 
 // Types
 export interface Org {
-  name: string;
+  id: string;
   shareableEntityIdentifier: string;
   avatarFallback: avatar.EmojiAvatar;
 }
@@ -24,8 +24,8 @@ export interface Project {
 type Projects = Project[];
 
 export enum RegistrationFlowState {
-  NameSelection,
-  TransactionConfirmation
+  Preparation,
+  Confirmation
 }
 
 // State
@@ -37,7 +37,7 @@ export const projects = projectsStore.readable;
 
 // Api
 export const getOrg = (id: string): Promise<Org> => api.get<Org>(`orgs/${id}`);
-export const getNameAvailability = (id: string): Promise<boolean> =>
+export const getIdAvailability = (id: string): Promise<boolean> =>
   getOrg(id).then(org => !org);
 const validateUserExistence = (handle: string): Promise<boolean> =>
   user.get(handle).then(user => !!user);
@@ -108,35 +108,35 @@ export const fetchProjectList = event.create<Kind, Msg>(
 export const register = (id: string): Promise<transaction.Transaction> =>
   api.post<RegisterInput, transaction.Transaction>(`orgs`, { id });
 
-// Name validation
-const VALID_NAME_MATCH = new RegExp("^[a-z0-9][a-z0-9]+$");
-export const nameConstraints = {
+// ID validation
+const VALID_ID_MATCH = new RegExp("^[a-z0-9][a-z0-9]+$");
+export const idConstraints = {
   presence: {
-    message: `Org name is required`,
+    message: `Org id is required`,
     allowEmpty: false
   },
   format: {
-    pattern: VALID_NAME_MATCH,
-    message: `Org name should match [a-z0-9][a-z0-9_-]+`
+    pattern: VALID_ID_MATCH,
+    message: `Org id should match [a-z0-9][a-z0-9_-]+`
   }
 };
 
 // Make sure we make a new one every time
-export const orgNameValidationStore = (): validation.ValidationStore =>
-  validation.createValidationStore(nameConstraints, {
-    promise: getNameAvailability,
-    validationMessage: "Sorry, this name is already taken"
+export const orgIdValidationStore = (): validation.ValidationStore =>
+  validation.createValidationStore(idConstraints, {
+    promise: getIdAvailability,
+    validationMessage: "Sorry, this id is already taken"
   });
 
-const memberNameConstraints = {
+const memberHandleConstraints = {
   presence: {
-    message: "Member name is required",
+    message: "Member handle is required",
     allowEmpty: false
   }
 };
 
-export const memberNameValidationStore = (): validation.ValidationStore =>
-  validation.createValidationStore(memberNameConstraints, {
+export const memberHandleValidationStore = (): validation.ValidationStore =>
+  validation.createValidationStore(memberHandleConstraints, {
     promise: validateUserExistence,
     validationMessage: "Cannot find this user"
   });
diff --git a/ui/src/path.ts b/ui/src/path.ts
index a17b785dce..74a8e0cb49 100644
--- a/ui/src/path.ts
+++ b/ui/src/path.ts
@@ -26,13 +26,13 @@ export const orgMembers = (id: string): string => `/orgs/${id}/members`;
 export const memberRegistration = (id: string): string => `/orgs/${id}/members/register`;
 
 export const createProject = (): string => "/projects/new";
-export const registerProject = (registrarId: string): string =>
-  `/projects/register/${registrarId}`;
+export const registerProject = (domainId: string): string =>
+  `/projects/register/${domainId}`;
 export const registerExistingProject = (
   projectId: string,
-  registrarId: string,
+  domainId: string,
 ): string =>
-  `/projects/${projectId}/register/${registrarId}`;
+  `/projects/${projectId}/register/${domainId}`;
 export const projectIssues = (id: string): string => `/projects/${id}/issues`;
 export const projectRevisions = (id: string): string => `/projects/${id}/revisions`;
 export const projectSource = (
diff --git a/ui/src/project.ts b/ui/src/project.ts
index f0626d729c..e0d344d794 100644
--- a/ui/src/project.ts
+++ b/ui/src/project.ts
@@ -28,6 +28,11 @@ export interface Project {
 
 type Projects = Project[]
 
+// The domain under which a registered project falls
+export enum Domain {
+  User = "user",
+  Org = "org"
+}
 export interface Registered {
   name: string;
   orgId: string;
diff --git a/ui/src/transaction.ts b/ui/src/transaction.ts
index b6e37372fc..fa6f6ce976 100644
--- a/ui/src/transaction.ts
+++ b/ui/src/transaction.ts
@@ -1,9 +1,11 @@
 import { Readable } from "svelte/store";
 
 import * as api from "./api";
+import { Avatar, getAvatar, Usage } from "./avatar"
 import * as event from "./event";
-import * as remote from "./remote";
 import { Identity } from "./identity";
+import { Domain } from "./project"
+import * as remote from "./remote";
 
 // Types.
 export enum MessageType {
@@ -17,12 +19,12 @@ export enum MessageType {
 
 interface OrgRegistration {
   type: MessageType.OrgRegistration;
-  orgId: string;
+  id: string;
 }
 
 interface OrgUnregistration {
   type: MessageType.OrgUnregistration;
-  orgId: string;
+  id: string;
 }
 
 interface OrgMemberRegistration {
@@ -37,9 +39,13 @@ interface OrgMemberUnregistration {
   userId: string;
 }
 
+// TODO(sos): coordinate message format for project registration with proxy
 interface ProjectRegistration {
   type: MessageType.ProjectRegistration;
-  orgId: string;
+  domain: Domain;
+  org_id: string;
+  project_name: string;
+  // domainId: string; // domain under which project falls, e.g. User or Org
   cocoId: string;
   projectName: string;
   projectDescription: string;
@@ -160,51 +166,89 @@ export const format = (tx: Transaction): object => {
 
 export const formatStake = (msg: Message): string => `${formatMessage(msg)} deposit`;
 
-export enum Variant {
-  Org = "ORG",
-  User = "USER",
-  Project = "PROJECT"
+
+// Having both enums & interfaces here is somewhat verbose; the reason we do this 
+// is so we have compatibility with non-TS svelte components while still enjoying 
+// some type strictness
+export enum PayerType {
+  Org = "org",
+  User = "user"
 }
 
+// TODO(sos): update to support orgs
 export const formatPayer = (identity: Identity): object => {
   return {
     name: identity.metadata.displayName || identity.metadata.handle,
-    variant: Variant.User,
+    type: PayerType.User,
     avatarFallback: identity.avatarFallback,
     imageUrl: identity.metadata.avatarUrl
   };
 };
 
-// TODO(sos): add avatarFallback for org registration once endpoint is ready
-export const formatSubject = (identity: Identity, msg: Message): object => {
-  let name, variant;
+export enum SubjectType {
+  User = "user",
+  OrgProject = "org_project",
+  UserProject = "user_project",
+  Org = "org",
+  Member = "member"
+}
+
+interface Subject {
+  name: string;
+  type: SubjectType;
+  avatarSource?: Promise<Avatar>;
+}
+
+export const formatSubject = (msg: Message): Subject => {
+  let avatarSource, name, type
 
   switch (msg.type) {
     case MessageType.OrgRegistration:
-      name = msg.orgId;
-      variant = Variant.Org
+      name = msg.id;
+      type = SubjectType.Org
+      avatarSource = getAvatar(Usage.Org, msg.id)
       break;
 
     case MessageType.OrgUnregistration:
-      name = msg.orgId;
-      variant = Variant.Org
+      name = msg.id;
+      type = SubjectType.Org
+      avatarSource = getAvatar(Usage.Org, msg.id)
       break;
 
+    // TODO(sos): replace with actual avatar lookup for the identity associated with
+    // the member, should it exist
+    case MessageType.OrgMemberRegistration:
+      name = msg.userId;
+      type = SubjectType.Member
+      // avatarSource = getAvatar(Usage.Identity, msg.userId)
+      break;
+
+    case MessageType.OrgMemberUnregistration:
+      name = msg.userId;
+      type = SubjectType.Member
+      // avatarSource = getAvatar(Usage.Identity, msg.userId)
+      break;
+
+    // TODO(sos): replace with actual avatar lookup for the identity associated with
+    // the user, should it exist
     case MessageType.UserRegistration:
       name = msg.handle;
-      variant = Variant.User
+      type = SubjectType.User
+      avatarSource = getAvatar(Usage.Identity, msg.id)
       break;
 
+    // TODO(sos): replace with associated identity handle for user, should it exist
+    // TODO(sos): once we can register projects to users, accommodate circle avatars
     case MessageType.ProjectRegistration:
-      name = `${identity.metadata.handle} / ${msg.projectName}`;
-      variant = Variant.Project
+      name = `${msg.org_id} / ${msg.project_name}`
+      type = SubjectType.OrgProject
+      avatarSource = getAvatar(msg.domain === Domain.User ? Usage.Identity : Usage.Org, msg.org_id)
       break;
   }
 
   return {
     name,
-    variant,
-    avatarFallback: identity.avatarFallback,
-    imageUrl: identity.metadata.avatarUrl
-  };
-};
+    type,
+    avatarSource
+  }
+}
diff --git a/ui/src/user.ts b/ui/src/user.ts
index 40ef5159f8..f85392d7e2 100644
--- a/ui/src/user.ts
+++ b/ui/src/user.ts
@@ -3,7 +3,6 @@ import * as transaction from "./transaction";
 
 // TYPES
 
-// TODO(sos): Avatar should not be optional once users can have avatarUrls
 export interface User {
   handle: string;
   maybeEntityId?: string;