@@ -179,9 +191,11 @@ function MountedModuleWorkspace({
void;
+ setClient: (owner: ccc.Owner) => unknown;
show: ShowModuleReadout;
signer?: ccc.Signer;
+ wallet?: ccc.Wallet;
submitTransaction: SubmitTransaction;
};
@@ -116,6 +120,15 @@ function defineModules(definitions: readonly DemoModuleDefinition[]) {
}
export const demoModules: readonly DemoModule[] = defineModules([
+ {
+ name: "Khie",
+ description:
+ "Khie is a peer-to-peer protocol that connects wallets and applications. To connect, select Khie in the application's connector, then either use the connector to scan the wallet's pairing code or use the wallet to scan the connector's pairing code. For wallets without native Khie support, this module lets them connect to remote applications through Khie.\n\nKhie (契, /kʰje/) is Hakka for bond, agreement, or connection.",
+ group: "Wallet",
+ icon: KhieIcon,
+ access: "signer",
+ component: KhieModule,
+ },
{
name: "Hash",
description:
diff --git a/packages/app/src/app/modules/khie/khie-client-module.module.css b/packages/app/src/app/modules/khie/khie-client-module.module.css
new file mode 100644
index 000000000..ca656c44b
--- /dev/null
+++ b/packages/app/src/app/modules/khie/khie-client-module.module.css
@@ -0,0 +1,1106 @@
+.input-action-control {
+ display: grid;
+ min-width: 0;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+}
+
+.endpoint-control {
+ overflow: hidden;
+ border: 1px solid var(--line-dark);
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 0;
+ background: rgb(7 10 12 / 72%);
+ transition: border-color 160ms ease;
+}
+
+.endpoint-control:focus-within {
+ border-color: var(--signal);
+}
+
+.endpoint-control input {
+ height: 44px;
+ border: 0;
+ background: transparent;
+}
+
+.endpoint-control .inline-action {
+ height: 44px;
+}
+
+.endpoint-control .inline-action button {
+ height: 44px;
+ border: 0;
+ border-left: 1px solid var(--line-dark);
+}
+
+.endpoint-control .inline-action .connect-button {
+ width: 44px;
+ min-width: 44px;
+ padding: 0;
+ border: 0;
+ color: var(--muted);
+ background: transparent;
+}
+
+.endpoint-control .inline-action .connect-button:not(:disabled),
+.endpoint-control .inline-action .connect-button:not(:disabled):hover,
+.endpoint-control .inline-action .connect-button:not(:disabled):focus-visible {
+ color: var(--signal);
+ background: transparent;
+}
+
+.endpoint-control .inline-action .connect-button:disabled {
+ color: var(--line-dark);
+ opacity: 1;
+}
+
+.relay-settings-content {
+ width: 100%;
+ min-width: 0;
+ grid-row: 2;
+ grid-column: 1 / -1;
+ justify-self: stretch;
+ animation: relay-settings-enter 240ms var(--easing-mechanical) both;
+}
+
+.relay-settings-content :global(.module-actions) {
+ animation: none !important;
+}
+
+.relay-controls {
+ display: flex;
+ z-index: 1;
+ width: 100%;
+ align-self: end;
+ align-items: center;
+ justify-content: space-between;
+ justify-self: stretch;
+ grid-row: 1;
+ grid-column: 3;
+ gap: 12px;
+}
+
+.relay-settings-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ cursor: pointer;
+ font:
+ 700 10px/1 "Courier New",
+ monospace;
+ letter-spacing: 0.1em;
+ list-style: none;
+ text-transform: uppercase;
+}
+
+.relay-settings-toggle {
+ margin-left: auto;
+ color: var(--muted);
+}
+
+.settings-chevron {
+ color: var(--line-dark);
+ transition: transform 160ms ease;
+}
+
+.relay-settings-toggle[aria-expanded="true"] .settings-chevron {
+ transform: rotate(180deg);
+}
+
+@keyframes relay-settings-enter {
+ from {
+ opacity: 0;
+ transform: translateY(-6px);
+ }
+}
+
+.paired-panel {
+ width: 100%;
+ gap: 12px;
+}
+
+.request-title {
+ display: flex;
+ min-width: 0;
+ margin: 0;
+ align-items: center;
+ gap: 8px;
+ color: var(--signal);
+ font:
+ 700 15px/1.4 "Courier New",
+ monospace;
+ overflow-wrap: anywhere;
+}
+
+.request-queue {
+ flex: 0 0 auto;
+ margin-left: auto;
+ color: var(--muted);
+ font-size: 9px;
+ letter-spacing: 0.08em;
+ line-height: 1.2;
+ text-transform: uppercase;
+}
+
+.session-action:global(.module-actions) {
+ display: flex;
+ width: fit-content;
+ flex: 0 0 auto;
+ grid-template-columns: none;
+ justify-self: end;
+}
+
+.session-action button {
+ min-height: 34px;
+ padding-inline: 12px;
+}
+
+.request-area {
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ padding-top: 14px;
+ border-top: 1px solid var(--line);
+ gap: 12px;
+}
+
+.request-idle {
+ margin: 0;
+ padding: 14px 0;
+ color: var(--muted);
+ font:
+ 11px/1.5 "Courier New",
+ monospace;
+ text-align: center;
+}
+
+.request-card {
+ display: grid;
+ min-width: 0;
+ gap: 12px;
+}
+
+.request-description {
+ max-height: 112px;
+ overflow: auto;
+ margin: 0;
+ color: var(--ink);
+ font:
+ 12px/1.55 "Courier New",
+ monospace;
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+}
+
+.transaction-details {
+ display: grid;
+ max-height: min(52vh, 430px);
+ min-width: 0;
+ padding-right: 4px;
+ overflow: auto;
+ gap: 14px;
+ scrollbar-color: var(--line-dark) transparent;
+ scrollbar-width: thin;
+}
+
+.transaction-summary {
+ display: grid;
+ min-width: 0;
+ align-items: center;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 12px;
+}
+
+.transaction-hash {
+ overflow: hidden;
+ min-width: 0;
+ color: inherit;
+ font:
+ 10px/1.4 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ transition: color 160ms ease;
+}
+
+.transaction-hash-copy,
+.transaction-hash-copy:hover,
+.transaction-hash-copy:focus-visible {
+ display: grid;
+ overflow: hidden;
+ min-width: 0;
+ min-height: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+ color: var(--muted);
+ background: transparent;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 6px;
+ text-align: left;
+ text-transform: none;
+ transition: color 160ms ease;
+}
+
+.transaction-hash-copy:hover,
+.transaction-hash-copy:focus-visible,
+.transaction-hash-copy[data-copied="true"] {
+ color: var(--signal);
+}
+
+.transaction-hash-copy :global(.copyable-text-icon) {
+ display: grid;
+ color: inherit;
+ place-items: center;
+ transition: color 160ms ease;
+}
+
+.transaction-fee {
+ color: var(--ink);
+ font:
+ 9px/1.4 "Courier New",
+ monospace;
+ text-align: right;
+ white-space: nowrap;
+}
+
+.transaction-cell-group,
+.transaction-cell-list {
+ display: grid;
+ min-width: 0;
+}
+
+.transaction-cell-group {
+ gap: 7px;
+}
+
+.transaction-cell-list {
+ gap: 6px;
+}
+
+.transaction-cell-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--muted);
+ font:
+ 700 10px/1.3 "Courier New",
+ monospace;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.transaction-cell-heading span {
+ color: var(--line-dark);
+}
+
+.transaction-cell {
+ --capacity-share: 0%;
+
+ position: relative;
+ overflow: hidden;
+ min-width: 0;
+ border: 1px solid var(--line);
+ background: transparent;
+}
+
+.transaction-cell summary::before {
+ position: absolute;
+ z-index: 0;
+ width: var(--capacity-share);
+ inset: 0 auto 0 0;
+ background: rgb(91 206 250 / 11%);
+ content: "";
+ pointer-events: none;
+}
+
+.transaction-cell summary {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ min-width: 0;
+ padding: 10px 11px;
+ align-items: center;
+ cursor: pointer;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 10px;
+ list-style: none;
+}
+
+.transaction-cell summary > * {
+ position: relative;
+ z-index: 1;
+}
+
+.transaction-cell summary::-webkit-details-marker {
+ display: none;
+}
+
+.transaction-cell summary > svg {
+ color: var(--muted);
+ transition: transform 160ms ease;
+}
+
+.transaction-cell[open] summary > svg {
+ transform: rotate(180deg);
+}
+
+.transaction-cell-summary {
+ display: grid;
+ min-width: 0;
+ align-items: center;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 12px;
+}
+
+.transaction-cell-identity {
+ display: grid;
+ overflow: hidden;
+ min-width: 0;
+ gap: 6px;
+}
+
+.transaction-cell-summary small {
+ overflow: hidden;
+ min-width: 0;
+ color: var(--ink);
+ font:
+ 700 9px/1.2 "Courier New",
+ monospace;
+ letter-spacing: 0.06em;
+ text-overflow: ellipsis;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+
+.transaction-cell-capacity {
+ min-width: max-content;
+ align-self: center;
+ color: var(--ink);
+ font:
+ 700 12px/1.25 "Courier New",
+ monospace;
+ justify-self: end;
+ text-align: right;
+ white-space: nowrap;
+}
+
+.transaction-cell-identity code {
+ overflow: hidden;
+ min-width: 0;
+ color: var(--ink);
+ font:
+ 10px/1.35 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.transaction-cell-expanded {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ min-width: 0;
+ padding: 10px 11px 12px;
+ border-top: 1px solid var(--line);
+ gap: 9px;
+ background: rgb(7 10 12 / 72%);
+}
+
+.transaction-script {
+ display: grid;
+ min-width: 0;
+ padding-left: 9px;
+ border-left: 1px solid var(--line-dark);
+ gap: 7px;
+}
+
+.transaction-script-heading > span,
+.transaction-cell-field > span {
+ color: var(--muted);
+ font:
+ 700 9px/1.25 "Courier New",
+ monospace;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+.transaction-script-heading {
+ display: grid;
+ min-width: 0;
+ align-items: center;
+ grid-template-columns: auto minmax(0, 1fr);
+ gap: 10px;
+}
+
+.transaction-script-address {
+ display: grid;
+ overflow: hidden;
+ min-width: 0;
+ padding: 0;
+ border: 0;
+ align-items: center;
+ color: var(--muted);
+ background: transparent;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 5px;
+ text-align: right;
+ text-transform: none;
+ transition: color 160ms ease;
+}
+
+.transaction-script-address code {
+ overflow: hidden;
+ min-width: 0;
+ font:
+ 9px/1.3 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.transaction-script-address :global(.copyable-text-icon) {
+ display: grid;
+ color: inherit;
+ place-items: center;
+}
+
+.transaction-script-address:hover,
+.transaction-script-address:focus-visible,
+.transaction-script-address[data-copied="true"] {
+ color: var(--signal);
+}
+
+.transaction-cell-field {
+ display: grid;
+ min-width: 0;
+ gap: 4px;
+}
+
+.transaction-cell-field code {
+ overflow: auto hidden;
+ min-width: 0;
+ color: var(--ink);
+ font:
+ 10px/1.4 "Courier New",
+ monospace;
+ white-space: nowrap;
+}
+
+.transaction-cell-field[data-multiline="true"] code {
+ overflow: visible;
+ overflow-wrap: anywhere;
+ white-space: pre-wrap;
+}
+
+.transaction-cell-copy {
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ padding: 0;
+ border: 0;
+ align-items: center;
+ color: var(--ink);
+ background: transparent;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 6px;
+ text-align: left;
+ text-transform: none;
+ transition: color 160ms ease;
+}
+
+.transaction-cell-copy code {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.transaction-cell-copy :global(.copyable-text-icon) {
+ display: grid;
+ color: var(--muted);
+ place-items: center;
+ transition: color 160ms ease;
+}
+
+.transaction-cell-copy:hover,
+.transaction-cell-copy:focus-visible,
+.transaction-cell-copy[data-copied="true"],
+.transaction-cell-copy:hover :global(.copyable-text-icon),
+.transaction-cell-copy:focus-visible :global(.copyable-text-icon),
+.transaction-cell-copy[data-copied="true"] :global(.copyable-text-icon) {
+ color: var(--signal);
+}
+
+.transaction-cell-status,
+.transaction-cell-unavailable {
+ margin: 0;
+ padding: 10px 11px;
+ border: 1px solid var(--line);
+ color: var(--muted);
+ font:
+ 10px/1.4 "Courier New",
+ monospace;
+}
+
+.transaction-cell-unavailable {
+ display: grid;
+ min-width: 0;
+ gap: 4px;
+}
+
+.transaction-cell-unavailable strong {
+ color: var(--ink);
+}
+
+.approval-actions {
+ flex-wrap: nowrap;
+}
+
+.approval-actions button,
+.approval-actions button:global(.is-primary) {
+ min-width: 96px;
+}
+
+.peer-loading {
+ margin: 0;
+ color: var(--muted);
+ font:
+ 11px/1.5 "Courier New",
+ monospace;
+}
+
+.peer-details {
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ gap: 10px;
+}
+
+.peer-overview {
+ display: flex;
+ width: 100%;
+ min-width: 0;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+.peer-copy {
+ display: grid;
+ flex: 1 1 auto;
+ min-width: 0;
+ gap: 6px;
+}
+
+.peer-primary {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 12px;
+}
+
+.peer-agent {
+ overflow: hidden;
+ min-width: 0;
+ color: var(--muted);
+ font:
+ 10px/1.35 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.peer-path {
+ display: inline-flex;
+ flex: 0 0 auto;
+ align-items: center;
+ gap: 6px;
+ color: var(--muted);
+ font:
+ 700 12px/1 "Courier New",
+ monospace;
+}
+
+.peer-path::before {
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ background: var(--muted);
+ content: "";
+}
+
+.peer-path[data-direct="true"]::before {
+ background: var(--signal);
+}
+
+.peer-name {
+ overflow: hidden;
+ flex: 1 1 auto;
+ min-width: 0;
+ color: var(--ink);
+ font:
+ 700 14px/1.35 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.peer-id {
+ max-width: 150px;
+}
+
+.peer-time > span {
+ flex: 0 0 auto;
+ color: var(--muted);
+ font:
+ 700 9px/1.2 "Courier New",
+ monospace;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+.peer-times {
+ display: flex;
+ min-width: 0;
+ margin-top: 4px;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: 6px 14px;
+}
+
+.peer-time {
+ display: flex;
+ min-width: 0;
+ align-items: baseline;
+ gap: 6px;
+}
+
+.peer-time code,
+.peer-time time,
+.peer-time strong {
+ overflow: hidden;
+ color: var(--ink);
+ font:
+ 10px/1.4 "Courier New",
+ monospace;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.pairing-overlay {
+ position: absolute;
+ z-index: 4;
+ display: grid;
+ inset: 0;
+ place-items: center;
+}
+
+.pairing-dialog:global(.module-actions) {
+ display: flex;
+ width: 100%;
+ min-height: 104px;
+ padding: 26px 28px;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 20px;
+ background: var(--paper);
+}
+
+.connecting-message {
+ margin: 0;
+ color: var(--signal);
+ font:
+ 700 14px/1.4 "Courier New",
+ monospace;
+ text-align: center;
+}
+
+.pairing-dialog .connecting-cancel {
+ min-height: 30px;
+ padding: 0 12px;
+ font-size: 10px;
+}
+
+.inline-action {
+ display: flex;
+ height: 46px;
+ flex-wrap: nowrap;
+}
+
+.inline-action button {
+ height: 46px;
+ min-width: 142px;
+ min-height: 0;
+ white-space: nowrap;
+}
+
+.pairing-group {
+ grid-row: 1;
+ grid-column: 1;
+ align-items: center;
+ grid-template-columns: minmax(0, 1fr) auto;
+ column-gap: 12px;
+ row-gap: 14px;
+}
+
+.pairing-columns {
+ display: grid;
+ min-width: 0;
+ align-items: center;
+ grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
+ gap: 16px;
+}
+
+.pairing-columns .inline-action button {
+ min-width: 100px;
+}
+
+.remote-column {
+ align-self: stretch;
+ grid-row: 1;
+ grid-column: 3;
+ grid-template-rows: auto minmax(0, 1fr);
+}
+
+.remote-actions {
+ display: grid;
+ align-content: center;
+ gap: 7px;
+}
+
+.scan-action {
+ display: grid;
+ width: 100%;
+ grid-template-columns: minmax(0, 1fr);
+}
+
+.scan-action .scan-button {
+ display: grid;
+ width: 100%;
+ height: 64px;
+ max-width: none;
+ min-height: 64px;
+ min-width: 0;
+ padding: 8px 12px;
+ border-color: var(--signal);
+ color: var(--recess);
+ grid-template-columns: 38px minmax(0, 1fr) 18px;
+ grid-column: 1 / -1;
+ gap: 11px;
+ background: var(--signal);
+ text-align: left;
+}
+
+.scan-action .scan-button:not(:disabled):hover,
+.scan-action .scan-button:not(:disabled):focus-visible {
+ border-color: var(--signal);
+ color: var(--recess);
+ background: var(--signal-hover);
+ transform: translateX(4px);
+}
+
+.scan-icon {
+ display: grid;
+ width: 38px;
+ height: 38px;
+ border: 1px solid currentColor;
+ place-items: center;
+}
+
+.scan-copy {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+}
+
+.scan-copy strong {
+ font-size: 12px;
+ line-height: 1.2;
+}
+
+.scan-arrow {
+ justify-self: end;
+ transition: transform 180ms ease;
+}
+
+.scan-button:hover .scan-arrow,
+.scan-button:focus-visible .scan-arrow {
+ transform: translateX(3px);
+}
+
+.endpoint-pair {
+ display: grid;
+ min-width: 0;
+ justify-items: center;
+ gap: 12px;
+}
+
+.divider {
+ position: relative;
+ display: grid;
+ align-self: stretch;
+ width: 34px;
+ min-height: 100%;
+ grid-row: 1;
+ grid-column: 2;
+ color: var(--muted);
+ font:
+ 700 9px/1 "Courier New",
+ monospace;
+ letter-spacing: 0.08em;
+ place-items: center;
+ text-transform: uppercase;
+}
+
+.divider::before {
+ position: absolute;
+ z-index: 0;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ width: 1px;
+ background: var(--line-dark);
+ content: "";
+}
+
+.divider span {
+ z-index: 1;
+ padding: 8px 4px;
+ background: var(--panel);
+}
+
+.scanner {
+ display: grid;
+ min-width: 0;
+ gap: 16px;
+}
+
+.scanner-actions:global(.module-actions) {
+ display: flex;
+ width: fit-content;
+ grid-template-columns: none;
+ justify-content: center;
+ justify-self: center;
+}
+
+.scanner-actions:global(.module-actions) button {
+ padding-inline: 18px;
+}
+
+.scanner-video {
+ display: block;
+ width: min(100%, 360px);
+ aspect-ratio: 1;
+ justify-self: center;
+ object-fit: cover;
+ object-position: center;
+ background: rgb(0 0 0 / 72%);
+}
+
+.endpoint-list {
+ display: grid;
+ grid-column: 1 / -1;
+ gap: 12px;
+}
+
+.endpoint-qr {
+ --qr-code-size: min(220px, calc(100vw - 96px));
+
+ justify-self: center;
+ max-width: 100%;
+ height: auto;
+ aspect-ratio: 1;
+}
+
+.endpoint-copy {
+ display: flex;
+ width: 100%;
+ min-width: 0;
+ padding: 12px;
+ border: 0;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 12px;
+ color: var(--ink);
+ background: transparent;
+ cursor: pointer;
+ font:
+ 12px/1.55 "Courier New",
+ monospace;
+ text-align: left;
+ transition: color 160ms ease;
+}
+
+.endpoint-pending {
+ display: flex;
+ width: 100%;
+ min-height: 46px;
+ padding: 12px;
+ align-items: center;
+ justify-content: center;
+ color: var(--muted);
+ font:
+ 12px/1.55 "Courier New",
+ monospace;
+}
+
+.endpoint-retry {
+ display: flex;
+ width: 100%;
+ min-height: 46px;
+ align-items: center;
+ justify-content: center;
+}
+
+.relay-retry {
+ display: flex;
+ padding: 0;
+ border: 0;
+ align-items: center;
+ gap: 6px;
+ color: var(--signal);
+ background: transparent;
+ cursor: pointer;
+ font:
+ 700 10px/1 "Courier New",
+ monospace;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.relay-retry:disabled {
+ color: var(--muted);
+ cursor: default;
+}
+
+.compatibility-help {
+ display: grid;
+ padding: 12px 14px;
+ border: 1px solid var(--line-dark);
+ gap: 5px;
+}
+
+.compatibility-help strong {
+ color: var(--ink);
+ font-size: 13px;
+}
+
+.compatibility-help span {
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.5;
+}
+
+.endpoint-copy > span:not(:global(.copyable-text-icon)) {
+ flex: 1 1 auto;
+ overflow: hidden;
+ min-width: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.endpoint-copy :global(.copyable-text-icon) {
+ display: grid;
+ flex: 0 0 auto;
+ color: var(--muted);
+ place-items: center;
+ transition: color 160ms ease;
+}
+
+.endpoint-copy:hover,
+.endpoint-copy:focus-visible,
+.endpoint-copy[data-copied="true"] {
+ color: var(--signal);
+ outline: none;
+}
+
+.endpoint-copy:hover :global(.copyable-text-icon),
+.endpoint-copy:focus-visible :global(.copyable-text-icon),
+.endpoint-copy[data-copied="true"] :global(.copyable-text-icon) {
+ color: var(--signal);
+}
+
+@media (max-width: 680px) {
+ .endpoint-qr {
+ --qr-code-size: min(22rem, calc(100% - 1.5rem));
+ }
+
+ .pairing-columns {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 18px;
+ }
+
+ .divider {
+ height: 17px;
+ width: 100%;
+ min-height: 1px;
+ grid-row: 2;
+ grid-column: 1;
+ }
+
+ .divider::before {
+ top: 50%;
+ right: 0;
+ bottom: auto;
+ left: 0;
+ width: auto;
+ height: 1px;
+ transform: none;
+ }
+
+ .divider span {
+ padding: 4px 8px;
+ }
+
+ .relay-settings-content {
+ grid-row: 5;
+ grid-column: 1;
+ }
+
+ .relay-controls {
+ grid-row: 4;
+ grid-column: 1;
+ }
+
+ .pairing-group {
+ grid-row: 1;
+ grid-column: 1;
+ }
+
+ .remote-column {
+ grid-row: 3;
+ grid-column: 1;
+ }
+
+ .input-action-control {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .inline-action,
+ .inline-action button {
+ width: 100%;
+ }
+
+ .pairing-columns .input-action-control {
+ grid-template-columns: minmax(0, 1fr) auto;
+ }
+
+ .pairing-columns .inline-action {
+ display: flex;
+ width: auto;
+ }
+
+ .pairing-columns .inline-action button {
+ width: auto;
+ min-width: 100px;
+ }
+
+ .approval-actions button {
+ width: auto;
+ flex: 1 1 0;
+ }
+}
diff --git a/packages/app/src/app/modules/khie/khie-client-module.tsx b/packages/app/src/app/modules/khie/khie-client-module.tsx
new file mode 100644
index 000000000..7aa2d6025
--- /dev/null
+++ b/packages/app/src/app/modules/khie/khie-client-module.tsx
@@ -0,0 +1,1316 @@
+"use client";
+
+import { ccc } from "@ckb-ccc/connector-react";
+import { Libp2p } from "@ckb-ccc/libp2p";
+import { ArrowRight, Check, ChevronDown, ScanLine, X } from "lucide-react";
+import {
+ type CSSProperties,
+ useCallback,
+ useEffect,
+ useEffectEvent,
+ useRef,
+ useState,
+} from "react";
+import { CopyableText } from "../../copyable-text";
+import type { ModuleRuntimeProps } from "../../modules";
+import { QrCode } from "../../qr-code";
+import { QrScanner } from "../../qr-scanner";
+import styles from "./khie-client-module.module.css";
+import {
+ DEFAULT_KHIE_RELAY_ADDRESS,
+ type KhieRemotePeer,
+ KhieSignerSession,
+} from "./khie-signer-session";
+import { displayPeerName } from "./peer-name";
+
+type SignerWaiter = {
+ abort: () => void;
+ networkId: string;
+ reject: (cause: Error) => void;
+ resolve: (signer: ccc.Signer) => void;
+ signal: AbortSignal;
+};
+type ApprovalPrompt = ccc.SignerJsonRpcConfirmation & {
+ abort: () => void;
+ resolve: (approved: boolean) => void;
+ signal: AbortSignal;
+};
+type RelayState = "connected" | "connecting" | "failed" | "idle";
+
+const PROVIDER_ENDPOINT_URL = "https://app.ckbccc.com/#khie";
+const JSON_RPC_REQUEST_TIMEOUT_MS = 120_000;
+const APPROVAL_ENABLE_DELAY_MS = 1_000;
+
+export function KhieClientModule({
+ client,
+ log,
+ setClient,
+ signer,
+ signerIcon,
+ signerName,
+ show,
+}: Pick & {
+ signer?: ccc.Signer;
+ signerIcon?: string;
+ signerName?: string;
+}) {
+ const [session, setSession] = useState();
+ const [nodeReady, setNodeReady] = useState(false);
+ const [pairingEndpoint, setPairingEndpoint] = useState("");
+ const [paired, setPaired] = useState(false);
+ const [pairing, setPairing] = useState(false);
+ const [relayState, setRelayState] = useState("idle");
+ const [relayAddress, setRelayAddress] = useState(DEFAULT_KHIE_RELAY_ADDRESS);
+ const [khieEndpoint, setKhieEndpoint] = useState("");
+ const [scanning, setScanning] = useState(false);
+ const [advancedSettingsOpen, setAdvancedSettingsOpen] = useState(false);
+ const [approval, setApproval] = useState();
+ const [approvalEnabled, setApprovalEnabled] = useState(false);
+ const [queuedApprovalCount, setQueuedApprovalCount] = useState(0);
+ const [remotePeer, setRemotePeer] = useState();
+ const [incompatiblePeerError, setIncompatiblePeerError] = useState();
+
+ const signerRef = useRef(signer);
+ const signerWaiters = useRef(new Set());
+ const approvalRef = useRef(undefined);
+ const approvalEnabledRef = useRef(false);
+ const approvalQueue = useRef([]);
+
+ const connectingRelay = relayState === "connecting";
+ const relayConnected = relayState === "connected";
+ const relayConnectionFailed = relayState === "failed";
+
+ const showCurrent = useEffectEvent(show);
+ const logCurrent = useEffectEvent(log);
+ const reportCurrentError = useEffectEvent((cause: unknown) => {
+ setIncompatiblePeerError(
+ isIncompatiblePeerError(cause) ? cause.message : undefined,
+ );
+ reportError(cause, show, log);
+ });
+ const getSignerMetadata = useEffectEvent(() => ({
+ name: signerName,
+ icon: signerIcon,
+ }));
+ const connectSigner = useEffectEvent(
+ async (networkId: string, signal: AbortSignal) => {
+ signal.throwIfAborted();
+ const current = signerRef.current;
+ if (
+ current &&
+ networkIdFromAddressPrefix(current.client.addressPrefix) === networkId
+ ) {
+ return current;
+ }
+
+ const clientOwner = clientOwnerForNetworkId(networkId, client);
+ if (clientOwner) {
+ setClient(clientOwner);
+ }
+
+ return new Promise((resolve, reject) => {
+ const waiter: SignerWaiter = {
+ abort: () => {
+ if (!signerWaiters.current.delete(waiter)) {
+ return;
+ }
+ signal.removeEventListener("abort", waiter.abort);
+ reject(abortReason(signal));
+ },
+ networkId,
+ reject,
+ resolve,
+ signal,
+ };
+ signerWaiters.current.add(waiter);
+ signal.addEventListener("abort", waiter.abort, { once: true });
+ if (signal.aborted) {
+ waiter.abort();
+ return;
+ }
+ resolveSignerWaiters(signerRef.current, signerWaiters.current);
+ });
+ },
+ );
+ const settleApproval = useCallback(
+ (prompt: ApprovalPrompt, approved: boolean) => {
+ if (approvalRef.current === prompt) {
+ approvalEnabledRef.current = false;
+ setApprovalEnabled(false);
+ const next = approvalQueue.current.shift();
+ approvalRef.current = next;
+ setApproval(next);
+ } else {
+ const index = approvalQueue.current.indexOf(prompt);
+ if (index === -1) {
+ return false;
+ }
+ approvalQueue.current.splice(index, 1);
+ }
+ setQueuedApprovalCount(approvalQueue.current.length);
+
+ prompt.signal.removeEventListener("abort", prompt.abort);
+ prompt.resolve(approved);
+ return true;
+ },
+ [],
+ );
+ const confirmKhieRequest = useEffectEvent(
+ (request: ccc.SignerJsonRpcConfirmation, signal: AbortSignal) =>
+ new Promise((resolve) => {
+ const prompt: ApprovalPrompt = {
+ ...request,
+ abort: () => void settleApproval(prompt, false),
+ resolve,
+ signal,
+ };
+ signal.addEventListener("abort", prompt.abort, { once: true });
+
+ if (approvalRef.current) {
+ approvalQueue.current.push(prompt);
+ setQueuedApprovalCount(approvalQueue.current.length);
+ } else {
+ approvalEnabledRef.current = false;
+ setApprovalEnabled(false);
+ approvalRef.current = prompt;
+ setApproval(prompt);
+ }
+
+ if (signal.aborted) {
+ prompt.abort();
+ }
+ }),
+ );
+ const rejectPendingApprovals = useEffectEvent(() => {
+ const prompts = [approvalRef.current, ...approvalQueue.current].filter(
+ (prompt): prompt is ApprovalPrompt => prompt !== undefined,
+ );
+ approvalRef.current = undefined;
+ approvalEnabledRef.current = false;
+ approvalQueue.current = [];
+ setApproval(undefined);
+ setApprovalEnabled(false);
+ setQueuedApprovalCount(0);
+ prompts.forEach((prompt) => {
+ prompt.signal.removeEventListener("abort", prompt.abort);
+ prompt.resolve(false);
+ });
+ });
+ const connectDefaultRelay = useEffectEvent(
+ async (currentSession: KhieSignerSession) => {
+ setRelayState("connecting");
+ if (!(await currentSession.connectRelay(DEFAULT_KHIE_RELAY_ADDRESS))) {
+ setRelayState("failed");
+ return;
+ }
+
+ setRelayState("connected");
+ logCurrent(`Relay connected: ${DEFAULT_KHIE_RELAY_ADDRESS}`, "success");
+ },
+ );
+
+ const resolveApproval = (approved: boolean) => {
+ if (!approvalEnabledRef.current) {
+ return;
+ }
+ approvalEnabledRef.current = false;
+ setApprovalEnabled(false);
+
+ const current = approvalRef.current;
+ if (!current) {
+ return;
+ }
+
+ if (!settleApproval(current, approved)) {
+ return;
+ }
+
+ if (approved) {
+ const title = formatApprovalTitle(current);
+ show({
+ label: "REQUEST APPROVED",
+ tone: "success",
+ content: {title} request approved,
+ });
+ log(`${title} request approved`, "success");
+ }
+ };
+
+ useEffect(() => {
+ signerRef.current = signer;
+ resolveSignerWaiters(signer, signerWaiters.current);
+ }, [signer]);
+
+ useEffect(() => {
+ if (!approval) {
+ return;
+ }
+
+ const timeout = window.setTimeout(() => {
+ if (approvalRef.current !== approval) {
+ return;
+ }
+ approvalEnabledRef.current = true;
+ setApprovalEnabled(true);
+ }, APPROVAL_ENABLE_DELAY_MS);
+ return () => window.clearTimeout(timeout);
+ }, [approval]);
+
+ useEffect(
+ () => () => {
+ rejectSignerWaiters(
+ signerWaiters.current,
+ new Error("Signer module stopped"),
+ );
+ rejectPendingApprovals();
+ },
+ [],
+ );
+
+ const pairEndpoint = useCallback(
+ async (endpoint: string) => {
+ const address = endpoint.trim();
+ if (!session || !address) {
+ return;
+ }
+
+ setIncompatiblePeerError(undefined);
+ setPairing(true);
+ try {
+ if (await session.pair(address)) {
+ setKhieEndpoint("");
+ }
+ } finally {
+ setPairing(false);
+ }
+ },
+ [session],
+ );
+
+ useEffect(() => {
+ showCurrent({
+ label: "STARTING LIBP2P",
+ tone: "idle",
+ content: Loading browser transports…,
+ });
+ logCurrent("Starting signer libp2p node");
+
+ const owner = KhieSignerSession.open({
+ endpointUrl: PROVIDER_ENDPOINT_URL,
+ handler: async (payload) => {
+ const controller = new AbortController();
+ const { signal } = controller;
+ const reportTimeout = () => {
+ if (!isTimeoutError(signal.reason)) {
+ return;
+ }
+
+ const title = formatRequestTitle(payload.method);
+ showCurrent({
+ label: "REQUEST TIMED OUT",
+ tone: "error",
+ content: {title} request timed out,
+ });
+ logCurrent(`${title} request timed out`, "error");
+ };
+ signal.addEventListener("abort", reportTimeout, { once: true });
+ const timeout = setTimeout(
+ () => controller.abort(requestTimeoutError()),
+ JSON_RPC_REQUEST_TIMEOUT_MS,
+ );
+
+ try {
+ const handleRequest = ccc.buildSignerJsonRpcHandler({
+ connect: (networkId) => connectSigner(networkId, signal),
+ confirmRequest: (request) => confirmKhieRequest(request, signal),
+ getSigner: () => signerRef.current,
+ getSignerMetadata,
+ });
+ const result = await handleRequest(payload);
+ signal.throwIfAborted();
+ const completed = formatRequestCompletion(payload.method);
+ if (completed) {
+ showCurrent({
+ label: "REQUEST COMPLETED",
+ tone: "success",
+ content: {completed},
+ });
+ logCurrent(completed, "success");
+ }
+ return result;
+ } catch (cause) {
+ signal.throwIfAborted();
+ throw cause;
+ } finally {
+ clearTimeout(timeout);
+ signal.removeEventListener("abort", reportTimeout);
+ }
+ },
+ onEndpointChange: setPairingEndpoint,
+ onError: reportCurrentError,
+ onPaired: () => {
+ setIncompatiblePeerError(undefined);
+ setPaired(true);
+ setPairing(false);
+ setScanning(false);
+ showCurrent({
+ label: "CONNECTED",
+ tone: "success",
+ content: Khie peer connected,
+ });
+ logCurrent("Khie peer paired", "success");
+ },
+ onRemotePeerChange: setRemotePeer,
+ onReady: (session) => {
+ setNodeReady(true);
+ showCurrent({
+ label: "LIBP2P NODE READY",
+ tone: "success",
+ content: Browser libp2p node is ready,
+ });
+ logCurrent("Signer node is ready", "success");
+ void connectDefaultRelay(session);
+ },
+ onUnpaired: () => {
+ setPaired(false);
+ setRemotePeer(undefined);
+ rejectSignerWaiters(
+ signerWaiters.current,
+ new Error("Khie peer disconnected"),
+ );
+ rejectPendingApprovals();
+ showCurrent({
+ label: "UNPAIRED",
+ tone: "idle",
+ content: Khie peer is no longer paired,
+ });
+ logCurrent("Khie peer unpaired");
+ },
+ });
+ const nextSession = owner.value;
+ setSession(nextSession);
+
+ return () => {
+ void owner.dispose();
+ };
+ }, []);
+
+ const connectRelay = async () => {
+ const address = relayAddress.trim();
+ if (!session || !address) {
+ return;
+ }
+
+ setRelayState("connecting");
+ if (!(await session.connectRelay(address))) {
+ setRelayState("failed");
+ return;
+ }
+
+ setRelayState("connected");
+ log(`Relay connected: ${address}`, "success");
+ show({
+ label: "RELAY CONNECTED",
+ tone: "success",
+ content: {address},
+ });
+ };
+
+ const unpair = () => session?.unpair();
+ const showingPairingOverlay = pairing;
+ const approvalDescription = approval
+ ? formatApprovalDescription(approval)
+ : undefined;
+
+ if (paired) {
+ return (
+
+
+ );
+}
+
+type TransactionCellView = {
+ cellOutput?: ccc.CellOutput;
+ extraCapacity?: ccc.Num;
+ key: string;
+ label: string;
+ outputData?: string;
+ reference?: string;
+};
+
+function TransactionApprovalDetails({
+ client,
+ transaction,
+}: {
+ client: ccc.Client;
+ transaction: ccc.Transaction;
+}) {
+ const [inputResolution, setInputResolution] = useState<{
+ cells: TransactionCellView[];
+ client: ccc.Client;
+ transaction: ccc.Transaction;
+ }>();
+ const [feeResolution, setFeeResolution] = useState<{
+ client: ccc.Client;
+ transaction: ccc.Transaction;
+ value: ccc.Num | null;
+ }>();
+ const inputs =
+ inputResolution?.client === client &&
+ inputResolution.transaction === transaction
+ ? inputResolution.cells
+ : undefined;
+ const fee =
+ feeResolution?.client === client &&
+ feeResolution.transaction === transaction
+ ? feeResolution.value
+ : undefined;
+
+ useEffect(() => {
+ let active = true;
+
+ void Promise.all(
+ transaction.inputs.map(async (input, index) => {
+ const reference = `${input.previousOutput.txHash}:${input.previousOutput.index}`;
+ try {
+ const cell =
+ input.cellOutput && input.outputData !== undefined
+ ? ccc.Cell.from({
+ cellOutput: input.cellOutput,
+ outPoint: input.previousOutput,
+ outputData: input.outputData,
+ })
+ : await client.getCell(input.previousOutput);
+ let extraCapacity: ccc.Num | undefined;
+ if (cell) {
+ try {
+ extraCapacity = await cell.getDaoProfit(client);
+ } catch {
+ // Keep the cell visible; getFee independently reports availability.
+ }
+ }
+ return {
+ cellOutput: cell?.cellOutput,
+ extraCapacity,
+ key: reference,
+ label: `${index} Input`,
+ outputData: cell?.outputData,
+ reference,
+ };
+ } catch {
+ return {
+ key: reference,
+ label: `${index} Input`,
+ reference,
+ };
+ }
+ }),
+ ).then((resolved) => {
+ if (active) {
+ setInputResolution({ cells: resolved, client, transaction });
+ }
+ });
+
+ void transaction
+ .getFee(client)
+ .then((value) => {
+ if (active) {
+ setFeeResolution({ client, transaction, value });
+ }
+ })
+ .catch(() => {
+ if (active) {
+ setFeeResolution({ client, transaction, value: null });
+ }
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [client, transaction]);
+
+ const outputs = transaction.outputs.map((cellOutput, index) => ({
+ cellOutput,
+ key: `output-${index}`,
+ label: `${index} Output`,
+ outputData: transaction.outputsData[index] ?? "0x",
+ }));
+ const transactionHash = transaction.hash();
+
+ return (
+
+
+ );
+}
+
+function TransactionCellItem({
+ cell,
+ client,
+ totalCapacity,
+}: {
+ cell: TransactionCellView;
+ client: ccc.Client;
+ totalCapacity: bigint;
+}) {
+ const { cellOutput } = cell;
+ const capacity = transactionCellCapacity(cell);
+ const capacityShare =
+ cellOutput && totalCapacity > ccc.Zero
+ ? Number((capacity * ccc.numFrom(1000)) / totalCapacity) / 10
+ : 0;
+ const style = {
+ "--capacity-share": `${capacityShare}%`,
+ } as CSSProperties;
+
+ if (!cellOutput) {
+ return (
+ ,
+) {
+ if (!signer) {
+ return;
+ }
+
+ waiters.forEach((waiter) => {
+ if (
+ waiter.networkId !==
+ networkIdFromAddressPrefix(signer.client.addressPrefix)
+ ) {
+ return;
+ }
+
+ waiters.delete(waiter);
+ waiter.signal.removeEventListener("abort", waiter.abort);
+ waiter.resolve(signer);
+ });
+}
+
+function rejectSignerWaiters(waiters: Set, cause: Error) {
+ waiters.forEach((waiter) => {
+ waiter.signal.removeEventListener("abort", waiter.abort);
+ waiter.reject(cause);
+ });
+ waiters.clear();
+}
+
+function abortReason(signal: AbortSignal) {
+ if (signal.reason instanceof Error) {
+ return signal.reason;
+ }
+
+ const error = new Error("JSON-RPC request canceled");
+ error.name = "AbortError";
+ return error;
+}
+
+function requestTimeoutError() {
+ const error = new Error("JSON-RPC request timed out");
+ error.name = "TimeoutError";
+ return error;
+}
+
+function isTimeoutError(cause: unknown): cause is Error {
+ return cause instanceof Error && cause.name === "TimeoutError";
+}
+
+function reportError(
+ cause: unknown,
+ show: ModuleRuntimeProps["show"],
+ log: ModuleRuntimeProps["log"],
+) {
+ const message =
+ cause instanceof Error ? cause.message : "libp2p operation failed";
+
+ if (isIncompatiblePeerError(cause)) {
+ show({
+ label: "INCOMPATIBLE PAIRING CODE",
+ tone: "error",
+ content: Scan a pairing code from a connector,
+ });
+ log(message, "error");
+ return;
+ }
+
+ show({
+ label: "LIBP2P FAULT",
+ tone: "error",
+ content: {message},
+ });
+ log(message, "error");
+}
+
+function isIncompatiblePeerError(cause: unknown): cause is Error {
+ return (
+ cause instanceof Libp2p.PairingEndpointRoleError ||
+ (cause instanceof Error && cause.name === "UnsupportedProtocolError")
+ );
+}
diff --git a/packages/app/src/app/modules/khie/khie-icon.tsx b/packages/app/src/app/modules/khie/khie-icon.tsx
new file mode 100644
index 000000000..e3e27ab6d
--- /dev/null
+++ b/packages/app/src/app/modules/khie/khie-icon.tsx
@@ -0,0 +1,22 @@
+import type { LucideProps } from "lucide-react";
+import { forwardRef } from "react";
+
+export const KhieIcon = forwardRef(
+ ({ color = "currentColor", size = 24, ...props }, ref) => (
+
+ ),
+);
+
+KhieIcon.displayName = "KhieIcon";
diff --git a/packages/app/src/app/modules/khie/khie-module.tsx b/packages/app/src/app/modules/khie/khie-module.tsx
new file mode 100644
index 000000000..10786f039
--- /dev/null
+++ b/packages/app/src/app/modules/khie/khie-module.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { ModuleRuntimeProps } from "../../modules";
+
+const KhieClientModule = dynamic(
+ () =>
+ import("./khie-client-module").then((module) => module.KhieClientModule),
+ {
+ ssr: false,
+ loading: () => Loading browser libp2p module…,
+ },
+);
+
+export function KhieModule({
+ client,
+ log,
+ setClient,
+ show,
+ signer,
+ wallet,
+}: ModuleRuntimeProps) {
+ if (!signer) {
+ return null;
+ }
+
+ return (
+ ;
+ pairing: Libp2p.PairingService;
+};
+type KhieSignerNode = Awaited>;
+type KhieSignerJsonRpcHandler = (payload: ccc.JsonRpcPayload) => unknown;
+
+class KhieConnectionAuthorizer {
+ private readonly connections = new Map<
+ string,
+ { status: "connected" } | { status: "connecting" }
+ >();
+
+ async handle(
+ peerId: PeerId,
+ payload: ccc.JsonRpcPayload,
+ handler: KhieSignerJsonRpcHandler,
+ ) {
+ const peer = peerId.toString();
+ // SignerJsonRpc reads metadata before it sends the connect request.
+ if (payload.method === "get_info") {
+ return handler(payload);
+ }
+
+ if (payload.method !== "connect") {
+ if (this.connections.get(peer)?.status !== "connected") {
+ throw new ccc.JsonRpcError({
+ code: -32001,
+ message: "Connect must be approved before this request",
+ });
+ }
+ return handler(payload);
+ }
+
+ const connecting = { status: "connecting" } as const;
+ this.connections.set(peer, connecting);
+ try {
+ const result = await handler(payload);
+ // A later connect attempt or unpair invalidates this completion.
+ if (this.connections.get(peer) === connecting) {
+ this.connections.set(peer, { status: "connected" });
+ }
+ return result;
+ } finally {
+ if (this.connections.get(peer) === connecting) {
+ this.connections.delete(peer);
+ }
+ }
+ }
+
+ unpair(peerId: PeerId) {
+ this.connections.delete(peerId.toString());
+ }
+}
+
+type KhieSignerSessionResources = {
+ abortController: AbortController;
+ lastRequest?: { at: number; peerId: PeerId };
+ node?: KhieSignerNode;
+ nodeSubscriptions: Array<() => void>;
+ pairingController?: AbortController;
+ pairedPeer?: PeerId;
+ pairedPeerName?: string;
+ relayConnection?: Connection;
+};
+
+export type KhieSignerSessionConfig = {
+ endpointUrl: string;
+ handler: KhieSignerJsonRpcHandler;
+ onEndpointChange?: (endpoint: string) => void;
+ onError?: (error: Error) => void;
+ onPaired?: () => void;
+ onRemotePeerChange?: (peer: KhieRemotePeer) => void;
+ onReady?: (session: KhieSignerSession) => void;
+ onUnpaired?: () => void;
+ pairedPeerTimeoutMs?: number;
+};
+
+export type KhieRemotePeer = {
+ agentVersion?: string;
+ connectedAt?: number;
+ direct?: boolean;
+ id: string;
+ lastRequestAt?: number;
+ name?: string;
+};
+
+export const DEFAULT_KHIE_RELAY_ADDRESS = "/dns4/relay.ckbccc.com/tcp/443/wss";
+
+const KHIE_PAIRING_PROTOCOL = "/nervos-ckb/khie/pairing/0.0.1";
+const KHIE_JSON_RPC_PROTOCOL = "/nervos-ckb/khie/json-rpc/0.0.1";
+const DEFAULT_PAIRED_PEER_TIMEOUT_MS = 30 * 60 * 1000;
+
+export class KhieSignerSession {
+ private readonly resources: KhieSignerSessionResources = {
+ abortController: new AbortController(),
+ nodeSubscriptions: [],
+ };
+ private events?: KhieSignerSessionConfig;
+ private endpointUpdateId = 0;
+
+ private constructor(private readonly config: KhieSignerSessionConfig) {
+ this.events = config;
+ }
+
+ static open(config: KhieSignerSessionConfig) {
+ const session = new KhieSignerSession(config);
+ void session.start();
+ return new ccc.OwnerUnique(session, (session) => session.close());
+ }
+
+ async connectRelay(relayAddress: string) {
+ const address = relayAddress.trim();
+ const node = this.resources.node;
+ if (!node || !address) {
+ return false;
+ }
+
+ const previous = this.resources.relayConnection;
+ this.resources.relayConnection = undefined;
+
+ let connection: Connection | undefined;
+ try {
+ await previous?.close();
+ connection = await node.dial(multiaddr(address), {
+ signal: this.resources.abortController.signal,
+ });
+ this.resources.abortController.signal.throwIfAborted();
+
+ this.resources.relayConnection = connection;
+ return true;
+ } catch (cause) {
+ await connection?.close();
+ this.events?.onError?.(asError(cause));
+ return false;
+ }
+ }
+
+ async pair(endpoint: string) {
+ const address = endpoint.trim();
+ const resources = this.resources;
+ const node = resources.node;
+ if (
+ !node ||
+ !address ||
+ resources.pairedPeer ||
+ resources.pairingController
+ ) {
+ return false;
+ }
+
+ const pairingController = new AbortController();
+ resources.pairingController = pairingController;
+ const signal = ccc.abortSignalAny([
+ resources.abortController.signal,
+ pairingController.signal,
+ ]);
+
+ try {
+ let target: Libp2p.PairingTarget;
+ try {
+ target = await Libp2p.decodePairingEndpoint(address, "connector");
+ } catch (cause) {
+ this.events?.onError?.(asError(cause));
+ return false;
+ }
+
+ try {
+ await node.services.pairing.pair(target, { signal });
+ return true;
+ } catch {
+ // PairingService reports its own errors through onError.
+ return false;
+ }
+ } finally {
+ if (resources.pairingController === pairingController) {
+ resources.pairingController = undefined;
+ }
+ }
+ }
+
+ cancelPairing() {
+ const controller = this.resources.pairingController;
+ if (!controller) {
+ return;
+ }
+
+ const error = new Error("Pairing canceled");
+ error.name = "AbortError";
+ controller.abort(error);
+ }
+
+ async unpair() {
+ const node = this.resources.node;
+ const peerId = this.resources.pairedPeer;
+ if (!node || !peerId) {
+ return;
+ }
+
+ await node.services.pairing.unpair(peerId);
+ }
+
+ private async start() {
+ const { abortController } = this.resources;
+ try {
+ const node = await createKhieSignerNode(
+ () => !abortController.signal.aborted && !this.resources.pairedPeer,
+ (peerId) => this.resources.pairedPeer?.equals(peerId) === true,
+ this.config.handler,
+ (peerId) => this.recordRequest(peerId),
+ this.config.pairedPeerTimeoutMs ?? DEFAULT_PAIRED_PEER_TIMEOUT_MS,
+ abortController.signal,
+ );
+ this.resources.node = node;
+ this.observeNode(node);
+ this.events?.onReady?.(this);
+ } catch (cause) {
+ this.events?.onError?.(asError(cause));
+ }
+ }
+
+ private observeNode(node: KhieSignerNode) {
+ const syncEndpoint = () => {
+ void this.syncEndpoint(node).catch((cause: unknown) => {
+ this.events?.onError?.(asError(cause));
+ });
+ };
+ const syncIdentifiedPeer = (event: CustomEvent) => {
+ const peerId = this.resources.pairedPeer;
+ if (!peerId?.equals(event.detail.peerId)) {
+ return;
+ }
+
+ void this.syncRemotePeer(node, peerId, event.detail);
+ };
+
+ node.addEventListener("self:peer:update", syncEndpoint);
+ node.addEventListener("peer:identify", syncIdentifiedPeer);
+ this.resources.nodeSubscriptions.push(
+ () => node.removeEventListener("self:peer:update", syncEndpoint),
+ () => node.removeEventListener("peer:identify", syncIdentifiedPeer),
+ node.services.pairing.onSecretChanged(syncEndpoint),
+ node.services.pairing.onError((error) => {
+ const signal = this.resources.pairingController?.signal;
+ if (signal?.aborted && error === signal.reason) {
+ return;
+ }
+
+ this.events?.onError?.(error);
+ }),
+ node.services.jsonRpc.onError((error) => {
+ this.events?.onError?.(error);
+ }),
+ node.services.pairing.onPaired((peerId, name) => {
+ if (this.resources.pairedPeer) {
+ return;
+ }
+
+ this.resources.pairedPeer = peerId;
+ this.resources.pairedPeerName = name;
+ this.events?.onPaired?.();
+ void this.syncRemotePeer(node, peerId);
+ }),
+ node.services.pairing.onUnpaired((peerId) => {
+ if (!this.resources.pairedPeer?.equals(peerId)) {
+ return;
+ }
+
+ this.resources.pairedPeer = undefined;
+ this.resources.pairedPeerName = undefined;
+ this.events?.onUnpaired?.();
+ }),
+ );
+ syncEndpoint();
+ }
+
+ private recordRequest(peerId: PeerId) {
+ const pairedPeer = this.resources.pairedPeer;
+ if (pairedPeer && !pairedPeer.equals(peerId)) {
+ return;
+ }
+
+ this.resources.lastRequest = { at: Date.now(), peerId };
+ const node = this.resources.node;
+ if (node && pairedPeer) {
+ void this.syncRemotePeer(node, peerId);
+ }
+ }
+
+ private async syncRemotePeer(
+ node: KhieSignerNode,
+ peerId: PeerId,
+ identified?: IdentifyResult,
+ ) {
+ let peer: Peer | undefined;
+ try {
+ peer = await node.peerStore.get(peerId);
+ } catch {
+ // A connection is still useful before identify has populated the peer store.
+ }
+
+ if (!this.resources.pairedPeer?.equals(peerId)) {
+ return;
+ }
+
+ const connection =
+ identified?.connection ??
+ node.getConnections(peerId).find(({ status }) => status === "open") ??
+ node.getConnections(peerId)[0];
+ const lastRequest = this.resources.lastRequest;
+
+ const metadataText = (key: string) => {
+ const value = peer?.metadata.get(key);
+ return value ? ccc.bytesTo(value, "utf8") : undefined;
+ };
+
+ this.events?.onRemotePeerChange?.({
+ agentVersion: identified?.agentVersion ?? metadataText("AgentVersion"),
+ connectedAt: connection?.timeline.open,
+ direct: connection?.direct,
+ id: peerId.toString(),
+ lastRequestAt:
+ lastRequest?.peerId.equals(peerId) === true
+ ? lastRequest.at
+ : undefined,
+ name: this.resources.pairedPeerName,
+ });
+ }
+
+ private async syncEndpoint(node: KhieSignerNode) {
+ const updateId = ++this.endpointUpdateId;
+ const addresses = node.getMultiaddrs();
+ const endpoint =
+ addresses.length === 0
+ ? ""
+ : await Libp2p.encodePairingEndpoint(
+ this.config.endpointUrl,
+ addresses,
+ node.services.pairing.secret,
+ "provider",
+ );
+ if (updateId !== this.endpointUpdateId) {
+ return;
+ }
+ this.events?.onEndpointChange?.(endpoint);
+ }
+
+ private close() {
+ this.events = undefined;
+ return this.releaseResources();
+ }
+
+ private async releaseResources() {
+ const { abortController, node, nodeSubscriptions, relayConnection } =
+ this.resources;
+ abortController.abort();
+ nodeSubscriptions.splice(0).forEach((unsubscribe) => unsubscribe());
+
+ try {
+ if (node && this.resources.pairedPeer) {
+ await node.services.pairing.unpair(this.resources.pairedPeer);
+ }
+ } finally {
+ try {
+ await relayConnection?.close();
+ } finally {
+ await node?.stop();
+ }
+ }
+ }
+}
+
+async function createKhieSignerNode(
+ canPair: Libp2p.PairingGuard,
+ isSelectedPeer: (peerId: PeerId) => boolean,
+ handler: KhieSignerJsonRpcHandler,
+ onRequest: (peerId: PeerId) => void,
+ pairedPeerTimeoutMs: number,
+ signal: AbortSignal,
+) {
+ signal.throwIfAborted();
+ const connectionAuthorizer = new KhieConnectionAuthorizer();
+
+ const [
+ { noise },
+ { yamux },
+ { circuitRelayTransport },
+ { identify },
+ { webRTC },
+ { webSockets },
+ { createLibp2p },
+ ] = await Promise.all([
+ import("@chainsafe/libp2p-noise"),
+ import("@chainsafe/libp2p-yamux"),
+ import("@libp2p/circuit-relay-v2"),
+ import("@libp2p/identify"),
+ import("@libp2p/webrtc"),
+ import("@libp2p/websockets"),
+ import("libp2p"),
+ ]);
+ signal.throwIfAborted();
+
+ let node:
+ Awaited>> | undefined;
+ try {
+ node = await createLibp2p({
+ addresses: { listen: ["/p2p-circuit", "/webrtc"] },
+ transports: [webSockets(), webRTC(), circuitRelayTransport()],
+ connectionEncrypters: [noise()],
+ streamMuxers: [yamux()],
+ services: {
+ identify: identify(),
+ pairing: Libp2p.pairingService(
+ { protocol: KHIE_PAIRING_PROTOCOL, pairedPeerTimeoutMs },
+ canPair,
+ ),
+ jsonRpc: Libp2p.jsonRpcService(
+ { protocol: KHIE_JSON_RPC_PROTOCOL },
+ function (request) {
+ const { pairing } = this.components;
+ if (
+ !pairing.isPaired(request.peerId) ||
+ !isSelectedPeer(request.peerId)
+ ) {
+ throw new ccc.JsonRpcError({
+ code: -32000,
+ message: "Peer is not paired for Khie access",
+ });
+ }
+
+ pairing.refresh(request.peerId);
+ onRequest(request.peerId);
+ return connectionAuthorizer.handle(
+ request.peerId,
+ request.payload,
+ handler,
+ );
+ },
+ ),
+ },
+ });
+ node.services.pairing.onUnpaired((peerId) => {
+ connectionAuthorizer.unpair(peerId);
+ });
+ signal.throwIfAborted();
+ return node;
+ } catch (cause) {
+ await node?.stop();
+ throw cause;
+ }
+}
+
+function asError(cause: unknown) {
+ return cause instanceof Error
+ ? cause
+ : new Error("Khie signer session failed");
+}
diff --git a/packages/app/src/app/modules/khie/peer-name.ts b/packages/app/src/app/modules/khie/peer-name.ts
new file mode 100644
index 000000000..e9c318f83
--- /dev/null
+++ b/packages/app/src/app/modules/khie/peer-name.ts
@@ -0,0 +1,16 @@
+const DISPLAY_CONTROL = /[\u0000-\u001f\u007f-\u009f\u2028\u2029]/g;
+const BIDI_CONTROL = /[\u061c\u200e\u200f\u202a-\u202e\u2066-\u2069]/g;
+
+export function displayPeerName(value: unknown) {
+ if (typeof value !== "string") {
+ return "Unknown";
+ }
+
+ return (
+ value
+ .replace(DISPLAY_CONTROL, " ")
+ .replace(BIDI_CONTROL, "")
+ .replace(/\s+/g, " ")
+ .trim() || "Unknown"
+ );
+}
diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
index 1ba51cc7d..511f5af50 100644
--- a/packages/app/src/app/page.tsx
+++ b/packages/app/src/app/page.tsx
@@ -82,12 +82,15 @@ export default function Home() {
const connected = signer !== undefined;
const usingPrivateKey = privateKeySigner !== undefined;
const needsAccess = selectedModule?.access === "signer";
+ const displayedModule = selectedModule ?? stagedModule;
const workspaceReady =
selectedModule !== undefined && (!needsAccess || connected);
useEffect(() => {
const selectModuleFromAnchor = () => {
- const id = window.location.hash.slice(1);
+ const fragment = window.location.hash.slice(1);
+ const separator = fragment.indexOf("?");
+ const id = separator === -1 ? fragment : fragment.slice(0, separator);
setSelectedModule(demoModules.find((module) => module.id === id));
};
@@ -332,7 +335,9 @@ export default function Home() {
client={client}
log={log}
module={stagedModule}
+ setClient={setClient}
signer={signer}
+ wallet={usingPrivateKey ? undefined : wallet}
/>
{
+ if (!value) {
+ return;
+ }
+
+ const matrix = encodeQR(value, "raw", { border: 2, ecc: "medium" });
+ return {
+ path: matrix
+ .flatMap((row, y) =>
+ row.map((dark, x) => (dark ? `M${x} ${y}h1v1h-1z` : "")),
+ )
+ .join(""),
+ size: matrix.length,
+ };
+ }, [value]);
const style: QrCodeStyle | undefined =
size === undefined
? undefined
@@ -32,17 +50,15 @@ export function QrCode({
style={style}
aria-live="polite"
>
- {value ? (
- {title}
+ (null);
+ const onErrorCurrent = useEffectEvent(onError);
+ const onScanCurrent = useEffectEvent(onScan);
+
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) {
+ return;
+ }
+
+ let stopped = false;
+ let camera: QrCamera | undefined;
+ let stopScanLoop = () => {};
+ const stop = () => {
+ if (stopped) {
+ return;
+ }
+
+ stopped = true;
+ stopScanLoop();
+ camera?.stop();
+ video.srcObject = null;
+ };
+
+ const start = async () => {
+ try {
+ assertCameraAvailable();
+ const { QRCanvas, frontalCamera } = await import("qr/dom.js");
+ if (stopped) {
+ return;
+ }
+
+ camera = await frontalCamera(video);
+ if (stopped) {
+ camera.stop();
+ video.srcObject = null;
+ return;
+ }
+
+ await video.play();
+ if (stopped) {
+ return;
+ }
+
+ stopScanLoop = startScanning(
+ video,
+ camera,
+ new QRCanvas(),
+ (value) => {
+ stop();
+ onScanCurrent(value);
+ },
+ (error) => {
+ stop();
+ onErrorCurrent(error);
+ },
+ );
+ } catch (error) {
+ if (!stopped) {
+ stop();
+ onErrorCurrent(error);
+ }
+ }
+ };
+
+ void start();
+ return stop;
+ }, []);
+
+ return (
+
+ );
+}
+
+function assertCameraAvailable() {
+ if (!window.isSecureContext) {
+ throw new Error("Camera access requires HTTPS or localhost");
+ }
+ if (!navigator.mediaDevices?.getUserMedia) {
+ throw new Error("Camera access is not supported by this browser");
+ }
+}
+
+function startScanning(
+ video: HTMLVideoElement,
+ camera: QrCamera,
+ canvas: QRCanvas,
+ onScan: (value: string) => void,
+ onError: (error: unknown) => void,
+) {
+ let timeout: ReturnType;
+ const scan = () => {
+ if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+ timeout = setTimeout(scan, SCAN_INTERVAL_MS);
+ return;
+ }
+
+ try {
+ const value = camera.readFrame(canvas, true);
+ if (value) {
+ onScan(value);
+ return;
+ }
+ } catch (error) {
+ onError(error);
+ return;
+ }
+
+ timeout = setTimeout(scan, SCAN_INTERVAL_MS);
+ };
+
+ timeout = setTimeout(scan, SCAN_INTERVAL_MS);
+ return () => clearTimeout(timeout);
+}
diff --git a/packages/app/src/app/styles/connection.css b/packages/app/src/app/styles/connection.css
index c6eb99119..a662c4452 100644
--- a/packages/app/src/app/styles/connection.css
+++ b/packages/app/src/app/styles/connection.css
@@ -17,13 +17,12 @@
margin: 0 auto;
overflow: hidden;
opacity: 0;
- transition:
- height 650ms var(--easing-mechanical),
- opacity 260ms ease 120ms;
+ transition: opacity 260ms ease 120ms;
}
.machine.needs-access .panel-viewport {
- height: 286px;
+ height: auto;
+ min-height: 286px;
opacity: 1;
}
@@ -31,6 +30,7 @@
position: absolute;
inset: 0;
display: grid;
+ min-height: 286px;
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(310px, 0.88fr);
gap: 36px;
@@ -55,6 +55,8 @@
}
.connection-panel {
+ position: relative;
+ inset: auto;
background: rgb(17 24 28 / 50%);
transform: translateX(0);
}
@@ -64,12 +66,16 @@
}
.machine.is-connected .connection-panel {
+ position: absolute;
+ inset: 0;
opacity: 0;
transform: translateX(-112%);
pointer-events: none;
}
.machine.is-connected .account-panel {
+ position: relative;
+ inset: auto;
transform: translateX(0);
}
@@ -122,6 +128,10 @@
line-height: 1.55;
}
+.connection-copy .module-summary {
+ white-space: pre-line;
+}
+
.panel-kicker {
gap: 7px;
color: var(--muted);
@@ -357,17 +367,12 @@
}
@media (max-width: 680px) {
- .panel-viewport {
- height: 0;
- transition: height 650ms var(--easing-mechanical);
- }
-
.machine.needs-access .panel-viewport {
- height: 430px;
+ min-height: 430px;
}
.machine.needs-access.is-connected .panel-viewport {
- height: 326px;
+ min-height: 326px;
}
.machine-panel {
@@ -377,6 +382,14 @@
padding: 42px 24px 28px;
}
+ .connection-panel {
+ min-height: 430px;
+ }
+
+ .account-panel {
+ min-height: 326px;
+ }
+
.connection-copy h2 {
font-size: 33px;
}
diff --git a/packages/app/src/app/styles/tool-matrix.css b/packages/app/src/app/styles/tool-matrix.css
index 9e75e5c67..a756c57cc 100644
--- a/packages/app/src/app/styles/tool-matrix.css
+++ b/packages/app/src/app/styles/tool-matrix.css
@@ -319,7 +319,7 @@
}
.dock-eject small {
- color: var(--muted);
+ color: inherit;
font-family: "Courier New", monospace;
font-size: 6px;
font-weight: 700;
diff --git a/packages/app/src/app/styles/workspace.css b/packages/app/src/app/styles/workspace.css
index 0ad8569ad..9ecec682a 100644
--- a/packages/app/src/app/styles/workspace.css
+++ b/packages/app/src/app/styles/workspace.css
@@ -207,8 +207,8 @@
.workspace-header-glyph {
position: absolute;
- top: -63px;
- right: -39px;
+ top: -43px;
+ right: -19px;
color: rgb(230 238 242 / 5%);
font-family: "Noto Serif TC", "Songti TC", PMingLiU, serif;
font-size: 192px;
@@ -245,6 +245,7 @@
color: var(--muted);
font-size: 13px;
line-height: 1.5;
+ white-space: pre-line;
}
.workspace-resources {
diff --git a/packages/app/src/core-js.d.ts b/packages/app/src/core-js.d.ts
new file mode 100644
index 000000000..215f23af0
--- /dev/null
+++ b/packages/app/src/core-js.d.ts
@@ -0,0 +1 @@
+declare module "core-js/es/promise/with-resolvers.js";
diff --git a/packages/app/src/instrumentation-client.ts b/packages/app/src/instrumentation-client.ts
new file mode 100644
index 000000000..29abd0de7
--- /dev/null
+++ b/packages/app/src/instrumentation-client.ts
@@ -0,0 +1 @@
+import "core-js/es/promise/with-resolvers.js";
diff --git a/packages/connector-react/src/components/index.ts b/packages/connector-react/src/components/index.ts
index 85ea13881..d14c3a22e 100644
--- a/packages/connector-react/src/components/index.ts
+++ b/packages/connector-react/src/components/index.ts
@@ -9,11 +9,11 @@ export const Connector = createComponent({
elementClass: ccc.WebComponentConnector,
react: React,
events: {
- onWillUpdate: ccc.ConnectorWillUpdateEvent
- .eventName as EventName,
onClose: ccc.ConnectorCloseEvent
.eventName as EventName,
onSelectClient: ccc.SelectClientEvent
.eventName as EventName,
+ onConnection: ccc.ConnectorConnectionEvent
+ .eventName as EventName,
},
});
diff --git a/packages/connector-react/src/hooks/useCcc.tsx b/packages/connector-react/src/hooks/useCcc.tsx
index 05143b11d..682217f2d 100644
--- a/packages/connector-react/src/hooks/useCcc.tsx
+++ b/packages/connector-react/src/hooks/useCcc.tsx
@@ -18,26 +18,13 @@ function openDefaultClient(): ccc.Owner {
return ccc.ClientPublicTestnet.open();
}
-type ClientInput = ccc.Client | ccc.Owner;
-
-function isOwner(resource: ClientInput): resource is ccc.Owner {
- return ccc.Owner.is(resource);
-}
-
-interface SetClient {
- (owner: ccc.Owner): void;
- /** @deprecated Pass an Owner so the Provider can manage its lifecycle. */
- (client: ccc.Client): void;
- (resource: ccc.Client | ccc.Owner): void;
-}
-
const CCC_CONTEXT = createContext<
| {
isOpen: boolean;
open: () => unknown;
close: () => unknown;
disconnect: () => unknown;
- setClient: SetClient;
+ setClient: (owner: ccc.Owner) => void;
client: ccc.Client;
wallet?: ccc.Wallet;
signerInfo?: ccc.SignerInfo;
@@ -82,7 +69,6 @@ export function Provider({
signersController,
defaultClient,
clientOptions,
- preferredNetworks,
}: {
children: ReactNode;
connectorProps?: HTMLAttributes<{}>;
@@ -96,11 +82,13 @@ export function Provider({
signersController?: ccc.SignersController;
defaultClient?: ccc.Client;
clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
- preferredNetworks?: ccc.NetworkPreference[];
}) {
const [ref, setRef] = useState(null);
+ const connectionOwner = useRef<
+ ccc.Owner | undefined
+ >(undefined);
+ const [connection, setConnection] = useState();
const [isOpen, setIsOpen] = useState(false);
- const [_, setFlag] = useState(0);
const defaultSignersController = useMemo(
() => new SignersControllerWithFilter(signerFilter),
[signerFilter],
@@ -116,10 +104,8 @@ export function Provider({
);
const client = selectedClient ?? initialClient;
- const setClient = useCallback((resource: ClientInput) => {
- const owner = isOwner(resource)
- ? resource.map((value) => value)
- : new ccc.OwnerUnique(resource, () => {});
+ const setClient = useCallback((resource: ccc.Owner) => {
+ const owner = resource.map((value) => value);
const previous = adoptedClientOwner.current;
adoptedClientOwner.current = owner;
@@ -131,8 +117,34 @@ export function Provider({
setSelectedClient(event.client);
}, []);
+ const onConnection = useCallback((event: ccc.ConnectorConnectionEvent) => {
+ event.stopPropagation();
+ if (event.connectionOwner && !event.connectionOwner.isValid) {
+ return;
+ }
+ const owner = event.connectionOwner?.map((connection) => connection);
+ const previous = connectionOwner.current;
+ connectionOwner.current = owner;
+ const connection = owner?.value;
+ setConnection(connection);
+
+ connection?.signerInfo.signer.onReplaced(() => {
+ if (connectionOwner.current === owner) {
+ connectionOwner.current = undefined;
+ setConnection(undefined);
+ }
+ void owner?.dispose().catch(() => {});
+ });
+ if (previous) {
+ void previous.dispose().catch(() => {});
+ }
+ }, []);
+
useEffect(
() => () => {
+ const owner = connectionOwner.current;
+ connectionOwner.current = undefined;
+ void owner?.dispose().catch(() => {});
void adoptedClientOwner.current?.dispose().catch(() => {});
adoptedClientOwner.current = undefined;
},
@@ -163,8 +175,8 @@ export function Provider({
setClient,
client,
- wallet: ref?.wallet,
- signerInfo: ref?.signer,
+ wallet: connection?.wallet,
+ signerInfo: connection?.signerInfo,
}}
>
setFlag((f) => f + 1)}
onClose={close}
- preferredNetworks={preferredNetworks}
+ onConnection={onConnection}
clientOptions={clientOptions}
{...{
...connectorProps,
diff --git a/packages/connector/package.json b/packages/connector/package.json
index 649311f74..adaa3dc4a 100644
--- a/packages/connector/package.json
+++ b/packages/connector/package.json
@@ -11,6 +11,9 @@
"url": "git://github.com/ckb-devrel/ccc.git"
},
"type": "module",
+ "browser": {
+ "./dist/scenes/khie/webrtc.js": "./dist/scenes/khie/webrtc.browser.js"
+ },
"main": "dist/index.js",
"exports": {
".": "./dist/index.js",
@@ -38,8 +41,20 @@
"access": "public"
},
"dependencies": {
+ "@chainsafe/libp2p-noise": "^17.0.0",
+ "@chainsafe/libp2p-yamux": "^8.0.1",
"@ckb-ccc/ccc": "workspace:*",
- "lit": "^3.3.3"
+ "@ckb-ccc/libp2p": "workspace:*",
+ "@libp2p/circuit-relay-v2": "^4.2.12",
+ "@libp2p/identify": "^4.1.13",
+ "@libp2p/interface": "^3.3.0",
+ "@libp2p/webrtc": "^6.0.30",
+ "@libp2p/websockets": "^10.1.20",
+ "@multiformats/multiaddr": "^13.0.3",
+ "core-js": "^3.50.0",
+ "libp2p": "^3.3.9",
+ "lit": "^3.3.3",
+ "qr": "^0.6.0"
},
"packageManager": "pnpm@11.8.0"
}
diff --git a/packages/connector/src/advancedBarrel.ts b/packages/connector/src/advancedBarrel.ts
index 4a4dc6521..160acbbc6 100644
--- a/packages/connector/src/advancedBarrel.ts
+++ b/packages/connector/src/advancedBarrel.ts
@@ -1,3 +1,4 @@
export * from "@ckb-ccc/ccc/advancedBarrel";
export * from "./components/index.js";
+export * from "./connector/client.js";
export * from "./scenes/index.js";
diff --git a/packages/connector/src/assets/ccc.svg.ts b/packages/connector/src/assets/ccc.svg.ts
new file mode 100644
index 000000000..a7aeca12b
--- /dev/null
+++ b/packages/connector/src/assets/ccc.svg.ts
@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils.js";
+
+export const CCC_SVG = encodeSvgToImgSrc(
+ '',
+);
diff --git a/packages/connector/src/assets/check.svg.ts b/packages/connector/src/assets/check.svg.ts
new file mode 100644
index 000000000..48853c5ac
--- /dev/null
+++ b/packages/connector/src/assets/check.svg.ts
@@ -0,0 +1,13 @@
+import { html } from "lit";
+
+export const CHECK_SVG = html``;
diff --git a/packages/connector/src/assets/khie.svg.ts b/packages/connector/src/assets/khie.svg.ts
new file mode 100644
index 000000000..44d10b88f
--- /dev/null
+++ b/packages/connector/src/assets/khie.svg.ts
@@ -0,0 +1,8 @@
+import { encodeSvgToImgSrc } from "./utils.js";
+
+export const KHIE_SVG = encodeSvgToImgSrc(
+ ``,
+);
diff --git a/packages/connector/src/assets/left.svg.ts b/packages/connector/src/assets/left.svg.ts
index 9907ef173..3a4fecf78 100644
--- a/packages/connector/src/assets/left.svg.ts
+++ b/packages/connector/src/assets/left.svg.ts
@@ -4,14 +4,15 @@ export const LEFT_SVG = html`
`;
diff --git a/packages/connector/src/assets/scan.svg.ts b/packages/connector/src/assets/scan.svg.ts
new file mode 100644
index 000000000..6811f18ae
--- /dev/null
+++ b/packages/connector/src/assets/scan.svg.ts
@@ -0,0 +1,17 @@
+import { html } from "lit";
+
+export const SCAN_SVG = html``;
diff --git a/packages/connector/src/components/button-pill.ts b/packages/connector/src/components/button-pill.ts
index dbf175bbe..3ab3a4663 100644
--- a/packages/connector/src/components/button-pill.ts
+++ b/packages/connector/src/components/button-pill.ts
@@ -53,10 +53,6 @@ export class ButtonPill extends LitElement {
}
`;
- updated() {
- this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
- }
-
render() {
return html``;
}
diff --git a/packages/connector/src/components/button.ts b/packages/connector/src/components/button.ts
index c789f675b..4026c7b63 100644
--- a/packages/connector/src/components/button.ts
+++ b/packages/connector/src/components/button.ts
@@ -82,10 +82,6 @@ export class Button extends LitElement {
}
`;
- updated() {
- this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
- }
-
render() {
const tag = unsafeStatic(this.as);
return html`
diff --git a/packages/connector/src/components/connecting.ts b/packages/connector/src/components/connecting.ts
new file mode 100644
index 000000000..8133cf972
--- /dev/null
+++ b/packages/connector/src/components/connecting.ts
@@ -0,0 +1,79 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { RETRY_SVG } from "../assets/retry.svg.js";
+
+@customElement("ccc-connecting")
+export class Connecting extends LitElement {
+ @property()
+ public name!: string;
+
+ @property()
+ public icon!: string;
+
+ @property()
+ public error?: string;
+
+ @property()
+ public hint!: string;
+
+ @property({ attribute: false })
+ public onRetry?: () => unknown;
+
+ render() {
+ const title = this.error
+ ? `Failed to open ${this.name}`
+ : `Opening ${this.name}...`;
+
+ return html`
+ 
+ ${title}
+ ${this.error ?? this.hint}
+ ${
+ this.onRetry
+ ? html` this.onRetry?.()}
+ >
+ ${RETRY_SVG} Try again
+ `
+ : undefined
+ }
+ `;
+ }
+
+ static styles = css`
+ :host {
+ display: flex;
+ min-height: 15rem;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 0.7rem;
+ }
+
+ .icon {
+ width: 5rem;
+ height: 5rem;
+ margin-bottom: 0.7rem;
+ border-radius: 1rem;
+ }
+
+ .title {
+ font-weight: bold;
+ }
+
+ .tip {
+ color: var(--tip-color);
+ text-align: center;
+ }
+
+ .retry {
+ margin-top: 1rem;
+ }
+ `;
+}
diff --git a/packages/connector/src/components/copy-button.ts b/packages/connector/src/components/copy-button.ts
index 32d6cf63c..ce8dc2f7f 100644
--- a/packages/connector/src/components/copy-button.ts
+++ b/packages/connector/src/components/copy-button.ts
@@ -1,5 +1,6 @@
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
+import { CHECK_SVG } from "../assets/check.svg.js";
@customElement("ccc-copy-button")
export class CopyButton extends LitElement {
@@ -9,6 +10,16 @@ export class CopyButton extends LitElement {
@state()
private isCopied = false;
+ connectedCallback() {
+ super.connectedCallback();
+ if (!this.hasAttribute("role")) {
+ this.setAttribute("role", "button");
+ }
+ if (!this.hasAttribute("tabindex")) {
+ this.tabIndex = 0;
+ }
+ }
+
static styles = css`
:host {
display: flex;
@@ -21,26 +32,39 @@ export class CopyButton extends LitElement {
fill: currentColor;
}
.check {
+ display: flex;
width: 0.7em;
height: 0.7em;
margin-left: 0.15em;
- fill: currentColor;
+ --check-stroke-width: 4;
+ }
+ .check svg {
+ width: 100%;
+ height: 100%;
}
`;
- updated() {
- this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
- }
-
- onclick = () => {
+ onclick = async () => {
if (!this.value) {
return;
}
- this.isCopied = true;
- setTimeout(() => (this.isCopied = false), 3000);
+ try {
+ await window.navigator.clipboard.writeText(this.value);
+ this.isCopied = true;
+ setTimeout(() => (this.isCopied = false), 3000);
+ } catch (error) {
+ this.dispatchEvent(new ErrorEvent("error", { error }));
+ }
+ };
+
+ onkeydown = (event: KeyboardEvent) => {
+ if (event.key !== "Enter" && event.key !== " ") {
+ return;
+ }
- return window.navigator.clipboard.writeText(this.value);
+ event.preventDefault();
+ this.click();
};
render() {
@@ -48,13 +72,9 @@ export class CopyButton extends LitElement {
`;
}
- onClose(onClosed?: () => void) {
+ close(onClosed?: () => void) {
if (this.mainRef.value) {
this.mainRef.value.style.height = "0";
}
setTimeout(() => {
this.dispatchEvent(new ConnectorCloseEvent());
- this.bodyRef.value?.onClose?.();
+ this.backToHome();
onClosed?.();
}, 150);
}
+ private backToHome(): void {
+ const scene = this.contentRef.value?.firstElementChild as
+ ConnectorScene | null | undefined;
+ scene?.close();
+ this.pairingKhie = false;
+ }
+
updated() {
+ this.observeContent();
+ this.syncHeight();
+ }
+
+ private observeContent() {
+ const content = this.contentRef.value;
+ if (!content || this.resizeObserver) {
+ return;
+ }
+
+ this.resizeObserver = new ResizeObserver(() => this.syncHeight());
+ this.resizeObserver.observe(content);
+ }
+
+ private syncHeight() {
if (!this.mainRef.value) {
return;
}
this.mainRef.value.style.height = `${
- this.bodyRef.value?.clientHeight ?? 0
+ this.contentRef.value?.clientHeight ?? 0
}px`;
}
@@ -269,5 +399,9 @@ export class WebComponentConnector extends LitElement {
overflow: hidden;
transition: height 0.15s ease-out;
}
+
+ .content {
+ display: flow-root;
+ }
`;
}
diff --git a/packages/connector/src/core-js.d.ts b/packages/connector/src/core-js.d.ts
new file mode 100644
index 000000000..215f23af0
--- /dev/null
+++ b/packages/connector/src/core-js.d.ts
@@ -0,0 +1 @@
+declare module "core-js/es/promise/with-resolvers.js";
diff --git a/packages/connector/src/events/external.ts b/packages/connector/src/events/external.ts
index d144a38d8..d9586a3bd 100644
--- a/packages/connector/src/events/external.ts
+++ b/packages/connector/src/events/external.ts
@@ -1,13 +1,5 @@
import { ccc } from "@ckb-ccc/ccc";
-export class ConnectorWillUpdateEvent extends Event {
- static readonly eventName = "willUpdate";
-
- constructor() {
- super(ConnectorWillUpdateEvent.eventName);
- }
-}
-
export class ConnectorCloseEvent extends Event {
static readonly eventName = "close";
@@ -24,8 +16,26 @@ export class SelectClientEvent extends Event {
}
}
+export type ConnectorConnection = {
+ wallet: ccc.Wallet;
+ signerInfo: ccc.SignerInfo;
+};
+
+export class ConnectorConnectionEvent extends Event {
+ static readonly eventName = "connection";
+
+ constructor(
+ public readonly connectionOwner?: ccc.Owner
+
+ {approval ? (
+ <>
+
+
+ );
+ }
+
+ if (scanning && !showingPairingOverlay) {
+ return (
+ + {formatApprovalTitle(approval)} + {queuedApprovalCount > 0 ? ( + + +{queuedApprovalCount} queued + + ) : null} +
+
+ {approval.method === "sign_transaction" ? (
+
+
+ ) : (
+ + {approvalDescription} +
+ ) : null} +
+
+
+
+ Ready for requests…
+ )} +
+
+ );
+ }
+
+ return (
+
+ {
+ setScanning(false);
+ reportError(cause, show, log);
+ }}
+ onScan={(value) => {
+ const endpoint = value.trim();
+ setKhieEndpoint(endpoint);
+ setScanning(false);
+ log("Peer session endpoint scanned", "success");
+ void pairEndpoint(endpoint);
+ }}
+ />
+
+
+
+
+
+
+ );
+}
+
+function RemotePeerDetails({
+ onUnpair,
+ peer,
+}: {
+ onUnpair: () => void;
+ peer?: KhieRemotePeer;
+}) {
+ const [now, setNow] = useState(peer?.lastRequestAt ?? 0);
+
+ useEffect(() => {
+ if (peer?.lastRequestAt === undefined) {
+ return;
+ }
+
+ const interval = setInterval(() => setNow(Date.now()), 1000);
+ return () => clearInterval(interval);
+ }, [peer?.lastRequestAt]);
+
+ const path =
+ peer?.direct === undefined
+ ? "Unknown path"
+ : peer.direct
+ ? "Direct"
+ : "Relayed";
+ const connectedAt = peer?.connectedAt
+ ? new Date(peer.connectedAt)
+ : undefined;
+ const name = displayPeerName(peer?.name);
+
+ return (
+
+
+ {showingPairingOverlay ? (
+
+
+ {incompatiblePeerError ? (
+
+ Let a connector scan this
+
+
+
+ {pairingEndpoint && !relayConnectionFailed ? (
+
+
+ reportError(cause, show, log)}
+ >
+ {pairingEndpoint}
+
+
+ ) : (
+
+
+ )}
+
+
+
+ ) : (
+
+ {connectingRelay
+ ? "Connecting to relay…"
+ : "Preparing pairing code…"}
+
+ )}
+
+ Scan a connector
+
+
+
+
+
+
+
+
+ setKhieEndpoint(event.currentTarget.value)
+ }
+ />
+
+
+
+
+
+
+
+ {advancedSettingsOpen ? (
+
+ Relay multiaddr
+
+ ) : null}
+
+
+ setRelayAddress(event.currentTarget.value)
+ }
+ />
+
+
+
+
+
+ This is not a compatible Khie pairing code
+
+ Open the app you want to use and click something like
+ "Connect wallet", then choose Khie in the connector. You
+ can either scan its pairing code with this module, or use the
+ connector to scan the pairing code shown here.
+
+
+ ) : null}
+
+
+ ) : null}
+
+
+ Pairing with Khie...
+ +
+ {peer ? (
+
+
+ {peer ? (
+
+
+ ) : (
+
+
+ {path}
+
+
+ {name}
+
+
+
+ {peer.agentVersion ?? "Unknown agent"}
+
+ Loading remote peer details…
+ )} +
+
+
+
+
+ ) : null}
+
+ Peer ID
+
+
+ {peer.id}
+
+
+ Connected
+ {connectedAt ? (
+
+ ) : (
+ Not available
+ )}
+
+
+ Last request
+
+ {peer.lastRequestAt === undefined
+ ? "No requests yet"
+ : formatElapsedDuration(peer.lastRequestAt, now)}
+
+
+
+
+ );
+}
+
+function TransactionCellGroup({
+ cells,
+ client,
+ empty,
+ title,
+}: {
+ cells?: TransactionCellView[];
+ client: ccc.Client;
+ empty: string;
+ title: string;
+}) {
+ const totalCapacity =
+ cells?.reduce(
+ (total, cell) => total + transactionCellCapacity(cell),
+ ccc.Zero,
+ ) ?? ccc.Zero;
+
+ return (
+
+
+
+
+ {fee === undefined
+ ? "Fee …"
+ : fee === null
+ ? "Fee unavailable"
+ : `Fee ${ccc.fixedPointToString(fee)} CKB · ${transactionFeeRate(transaction, fee)} shannons/KB`}
+
+
+
+ {transactionHash}
+
+
+ {title}
+ {cells?.length ?? "…"}
+
+
+ {cells === undefined ? (
+
+ Loading cells…
+ ) : cells.length === 0 ? ( +{empty}
+ ) : ( + cells.map((cell) => ( +
+ {cell.label}
+ Cell details unavailable
+
+ );
+ }
+
+ const lockAddress = ccc.Address.fromScript(
+ cellOutput.lock,
+ client,
+ ).toString();
+
+ return (
+
+
+
+
+ {cell.label}
+
+
+ );
+}
+
+function TransactionScriptDetails({
+ address,
+ label,
+ script,
+}: {
+ address?: string;
+ label: string;
+ script?: ccc.Script;
+}) {
+ if (!script) {
+ return
+
+
+ {cell.label}
+ {lockAddress}
+
+
+ {cell.extraCapacity && cell.extraCapacity > ccc.Zero
+ ? `${ccc.fixedPointToString(cellOutput.capacity)} + ${ccc.fixedPointToString(cell.extraCapacity)} CKB`
+ : `${ccc.fixedPointToString(cellOutput.capacity)} CKB`}
+
+
+
+
+
+ {cell.reference ? (
+
+
+
+ );
+}
+
+function TransactionCellField({
+ copyable = false,
+ label,
+ multiline = false,
+ value,
+}: {
+ copyable?: boolean;
+ label: string;
+ multiline?: boolean;
+ value: string;
+}) {
+ return (
+
+ {label}
+ {address ? (
+
+
+ ) : null}
+
+ {address}
+
+ {label}
+ {copyable ? (
+
+
+ ) : (
+
+ );
+}
+
+function transactionCellCapacity(cell: TransactionCellView) {
+ return (
+ (cell.cellOutput?.capacity ?? ccc.Zero) + (cell.extraCapacity ?? ccc.Zero)
+ );
+}
+
+function transactionFeeRate(transaction: ccc.Transaction, fee: ccc.Num) {
+ return (
+ (fee * ccc.numFrom(1000)) / ccc.numFrom(transaction.toBytes().length + 4)
+ );
+}
+
+function formatElapsedDuration(timestamp: number, now: number) {
+ const seconds = Math.max(0, Math.floor((now - timestamp) / 1000));
+ if (seconds < 60) {
+ return seconds === 0
+ ? "Just now"
+ : `${seconds} second${seconds === 1 ? "" : "s"} ago`;
+ }
+
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) {
+ return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+ }
+
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) {
+ return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+ }
+
+ const days = Math.floor(hours / 24);
+ return `${days} day${days === 1 ? "" : "s"} ago`;
+}
+
+function clientOwnerForNetworkId(networkId: string, current: ccc.Client) {
+ if (networkIdFromAddressPrefix(current.addressPrefix) === networkId) {
+ return;
+ }
+
+ if (networkId === "ckb-mainnet") {
+ return ccc.ClientPublicMainnet.open();
+ }
+ if (networkId === "ckb-testnet") {
+ return ccc.ClientPublicTestnet.open();
+ }
+
+ throw new ccc.JsonRpcError({
+ code: -32001,
+ message: `Unsupported network ID: ${networkId}`,
+ });
+}
+
+function formatApprovalDescription(approval: ccc.SignerJsonRpcConfirmation) {
+ switch (approval.method) {
+ case "connect":
+ return `Switch to network ${approval.networkId}`;
+ case "sign_message":
+ return approval.message.value;
+ case "sign_transaction":
+ return `Transaction ${approval.transaction.hash()}`;
+ }
+}
+
+function formatApprovalTitle(approval: ccc.SignerJsonRpcConfirmation) {
+ return formatRequestTitle(approval.method);
+}
+
+function formatRequestTitle(method: string) {
+ switch (method) {
+ case "connect":
+ return "Connect";
+ case "sign_message":
+ return "Sign Message";
+ case "sign_transaction":
+ return "Sign Transaction";
+ default:
+ return method;
+ }
+}
+
+function formatRequestCompletion(method: string) {
+ switch (method) {
+ case "connect":
+ return "Signer connected";
+ case "sign_message":
+ return "Message signed";
+ case "sign_transaction":
+ return "Transaction signed";
+ }
+}
+
+// TODO: In the next major version, read the network ID directly from Client
+// instead of inferring it from addressPrefix.
+function networkIdFromAddressPrefix(addressPrefix: string) {
+ if (addressPrefix === "ckb") {
+ return "ckb-mainnet";
+ }
+ if (addressPrefix === "ckt") {
+ return "ckb-testnet";
+ }
+
+ throw new ccc.JsonRpcError({
+ code: -32001,
+ message: `Unsupported address prefix: ${addressPrefix}`,
+ });
+}
+
+function resolveSignerWaiters(
+ signer: ccc.Signer | undefined,
+ waiters: Set{value}
+ {value}
+ )}
+
@@ -363,12 +368,14 @@ export default function Home() {
) : (
@@ -524,6 +529,10 @@ export default function Home() {
className="connected-wallet-icon"
src={wallet.icon}
alt={wallet.name}
+ referrerPolicy="no-referrer"
+ onError={(event) => {
+ event.currentTarget.hidden = true;
+ }}
/>
) : (
- {privateKeyMode ? "Enter your private key" : "Who are you?"} + {privateKeyMode + ? "Enter your private key" + : (displayedModule?.name ?? "Who are you?")}
-+
{privateKeyMode ? (
<>
@@ -378,12 +385,10 @@ export default function Home() {
be read by browser extensions. This key stays only on this
page and is cleared when you leave or reload.
+ ) : displayedModule ? (
+ displayedModule.description
) : (
- <>
- Link required for this module.
-
- Choose one of the link options to continue.
-
+ "Choose one of the link options to continue."
)}
+
+
+
+
+
+
+
+
+
+
+ ${
+ this.isAdvancedSettingsOpen
+ ? html`
+
+ `
+ : undefined
+ }
+
+ ${
+ error && !this.localError && errorKind === "incompatible-peer"
+ ? html`
+ {
+ this.localError = errorMessage(event.error);
+ }}
+ >
+ ${
+ relayState === "failed"
+ ? html` this.connectRelay()}>
+ ${RETRY_SVG} Try again
+ `
+ : ownEndpoint
+ ? html` {
+ this.localError = errorMessage(event.error);
+ }}
+ >
+ ${ownEndpoint}
+ `
+ : html`Connecting relay…`
+ }
+
+
+ this.startScanner()}>
+ ${SCAN_SVG} Scan a wallet
+
+
+
+
+
+ {
+ this.khieEndpoint = (
+ event.currentTarget as HTMLElement & { value: string }
+ ).value;
+ }}
+ @keydown=${(event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ void this.pair();
+ }
+ }}
+ >
+
+
+
+ {
+ this.relayAddress = (
+ event.currentTarget as HTMLElement & { value: string }
+ ).value;
+ }}
+ >
+
+
+
+ This is not a compatible Khie pairing code
+
+ Scan a pairing code from a wallet.
+ ${
+ this.khieEndpoint
+ ? html`Go here to learn more.`
+ : undefined
+ }
+
+
`
+ : undefined
+ }
+ ${
+ error && (this.localError || errorKind !== "incompatible-peer")
+ ? html`${error}`
+ : undefined
+ }
+ `;
+ }
+
+ static styles = css`
+ :host {
+ display: flex;
+ width: min(44rem, calc(100vw - 4rem));
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .pairing-layout {
+ display: grid;
+ min-width: 0;
+ grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr);
+ gap: 1rem;
+ }
+
+ .field {
+ display: flex;
+ min-width: 0;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ label {
+ font-size: 0.85rem;
+ font-weight: 600;
+ }
+
+ .pairing-side {
+ min-height: 17.5rem;
+ }
+
+ .own-side {
+ grid-row: 1;
+ grid-column: 1;
+ }
+
+ .remote-side {
+ display: grid;
+ grid-row: 1;
+ grid-column: 3;
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ }
+
+ button {
+ box-sizing: border-box;
+ padding: 0.65rem 0.85rem;
+ border: 1px solid var(--divider);
+ border-radius: 0.4rem;
+ color: var(--btn-color, inherit);
+ background: var(--btn-primary);
+ font: inherit;
+ cursor: pointer;
+ }
+
+ button:hover:not(:disabled) {
+ color: var(--btn-color-hover, var(--btn-color, inherit));
+ background: var(--btn-primary-hover);
+ }
+
+ button:disabled {
+ cursor: not-allowed;
+ opacity: 0.55;
+ }
+
+ .endpoint-input {
+ min-width: 0;
+ height: 2.7rem;
+ }
+
+ .endpoint-pair {
+ display: grid;
+ min-width: 0;
+ justify-items: center;
+ gap: 0.75rem;
+ }
+
+ .qr-code {
+ width: min(13rem, 100%);
+ }
+
+ .endpoint-copy,
+ .endpoint-pending {
+ box-sizing: border-box;
+ width: 100%;
+ min-height: 2.7rem;
+ }
+
+ .endpoint-copy {
+ display: grid;
+ min-width: 0;
+ padding: 0.65rem 0.85rem;
+ align-items: center;
+ color: var(--btn-color, inherit);
+ cursor: pointer;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 0.7rem;
+ text-align: left;
+ transition: color 0.15s ease-in-out;
+ }
+
+ .endpoint-copy:hover {
+ color: var(--btn-color-hover, var(--btn-color, inherit));
+ }
+
+ .endpoint-copy span {
+ overflow: hidden;
+ font-family: monospace;
+ font-size: 0.72rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .endpoint-pending {
+ display: flex;
+ padding: 0.65rem 0.85rem;
+ align-items: center;
+ justify-content: center;
+ color: var(--tip-color);
+ font-size: 0.8rem;
+ }
+
+ .divider {
+ position: relative;
+ display: grid;
+ grid-row: 1;
+ grid-column: 2;
+ color: var(--tip-color);
+ font-size: 0.7rem;
+ place-items: center;
+ text-transform: uppercase;
+ }
+
+ .divider::before {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ width: 1px;
+ background: var(--divider);
+ content: "";
+ }
+
+ .divider span {
+ z-index: 1;
+ padding: 0.5rem 0.25rem;
+ background: var(--background);
+ }
+
+ .remote-actions {
+ display: grid;
+ align-content: center;
+ gap: 0.5rem;
+ }
+
+ .endpoint-control,
+ .relay-control {
+ display: grid;
+ min-width: 0;
+ grid-template-columns: minmax(0, 1fr) auto;
+ }
+
+ .endpoint-control {
+ overflow: hidden;
+ border: 1px solid var(--divider);
+ border-radius: 0.4rem;
+ }
+
+ .endpoint-control:focus-within {
+ border-color: var(--tip-color-hover, var(--tip-color));
+ }
+
+ .endpoint-input::part(input) {
+ height: 100%;
+ padding: 0.65rem;
+ border: 0;
+ border-radius: 0;
+ }
+
+ .endpoint-submit {
+ display: grid;
+ width: 2.7rem;
+ height: 2.7rem;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ color: var(--btn-color-hover, var(--btn-color, inherit));
+ background: transparent;
+ place-items: center;
+ }
+
+ .endpoint-submit:hover:not(:disabled) {
+ background: transparent;
+ }
+
+ .endpoint-submit:disabled {
+ color: var(--divider);
+ opacity: 1;
+ }
+
+ .endpoint-submit svg {
+ width: 1.3rem;
+ height: 1.3rem;
+ }
+
+ .text-button {
+ padding: 0;
+ border: 0;
+ color: var(--tip-color);
+ background: transparent;
+ font-size: 0.72rem;
+ }
+
+ .text-button:hover:not(:disabled) {
+ color: var(--tip-color-hover, var(--tip-color));
+ background: transparent;
+ }
+
+ .advanced-toggle {
+ display: flex;
+ align-items: center;
+ justify-self: end;
+ gap: 0.3rem;
+ }
+
+ .settings-chevron {
+ display: grid;
+ transform: rotate(-90deg);
+ transition: transform 0.15s ease-in-out;
+ --left-stroke-width: 2.5;
+ }
+
+ .settings-chevron svg {
+ width: 0.65rem;
+ height: 0.65rem;
+ }
+
+ .advanced-toggle[aria-expanded="true"] .settings-chevron {
+ transform: rotate(90deg);
+ }
+
+ .advanced-settings {
+ grid-row: 2;
+ grid-column: 1 / -1;
+ animation: advanced-settings-enter 0.2s ease-out both;
+ }
+
+ .relay-control {
+ gap: 0.5rem;
+ }
+
+ .relay-input {
+ min-width: 0;
+ height: 100%;
+ }
+
+ .relay-input::part(input) {
+ height: 100%;
+ padding: 0.65rem;
+ border-color: var(--divider);
+ border-radius: 0.4rem;
+ }
+
+ .relay-control button {
+ white-space: nowrap;
+ }
+
+ @keyframes advanced-settings-enter {
+ from {
+ opacity: 0;
+ transform: translateY(-0.35rem);
+ }
+ }
+
+ .error {
+ display: block;
+ color: var(--tip-color);
+ font-size: 0.8rem;
+ text-align: center;
+ }
+
+ .compatibility-help {
+ display: grid;
+ padding: 0.8rem 0.9rem;
+ border: 1px solid var(--divider);
+ border-radius: 0.4rem;
+ gap: 0.3rem;
+ }
+
+ .compatibility-help strong {
+ font-size: 0.85rem;
+ }
+
+ .compatibility-help span {
+ color: var(--tip-color);
+ font-size: 0.78rem;
+ line-height: 1.45;
+ }
+
+ .compatibility-help a {
+ color: inherit;
+ text-decoration: underline;
+ text-underline-offset: 0.15em;
+ }
+
+ @media (max-width: 40rem) {
+ :host {
+ width: min(28rem, calc(100vw - 4rem));
+ }
+
+ .qr-code {
+ /* I hate Apple */
+ width: min(22rem, calc(100% - 1.5rem));
+ height: min(22rem, calc(100vw - 5.5rem));
+ }
+
+ .pairing-layout {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .divider {
+ height: 1.25rem;
+ grid-row: 2;
+ grid-column: 1;
+ }
+
+ .divider::before {
+ top: 50%;
+ right: 0;
+ bottom: auto;
+ left: 0;
+ width: auto;
+ height: 1px;
+ }
+
+ .divider span {
+ padding: 0.25rem 0.5rem;
+ }
+
+ .remote-side {
+ min-height: 11rem;
+ grid-row: 3;
+ grid-column: 1;
+ }
+
+ .advanced-settings {
+ grid-row: 4;
+ }
+ }
+ `;
+}
diff --git a/packages/connector/src/scenes/khie/promiseWithResolvers.test.ts b/packages/connector/src/scenes/khie/promiseWithResolvers.test.ts
new file mode 100644
index 000000000..bd5778b5a
--- /dev/null
+++ b/packages/connector/src/scenes/khie/promiseWithResolvers.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { ensurePromiseWithResolvers } from "./promiseWithResolvers.js";
+
+describe("ensurePromiseWithResolvers", () => {
+ it("installs Promise.withResolvers when it is unavailable", async () => {
+ const original = Object.getOwnPropertyDescriptor(Promise, "withResolvers");
+
+ try {
+ Object.defineProperty(Promise, "withResolvers", {
+ configurable: true,
+ value: undefined,
+ writable: true,
+ });
+
+ await ensurePromiseWithResolvers();
+
+ expect(Reflect.get(Promise, "withResolvers")).toBeTypeOf("function");
+ } finally {
+ if (original) {
+ Object.defineProperty(Promise, "withResolvers", original);
+ } else {
+ Reflect.deleteProperty(Promise, "withResolvers");
+ }
+ }
+ });
+});
diff --git a/packages/connector/src/scenes/khie/promiseWithResolvers.ts b/packages/connector/src/scenes/khie/promiseWithResolvers.ts
new file mode 100644
index 000000000..f56f11443
--- /dev/null
+++ b/packages/connector/src/scenes/khie/promiseWithResolvers.ts
@@ -0,0 +1,7 @@
+export async function ensurePromiseWithResolvers(): Promise