canary-orders/index.html at main · quicknode/canary-orders · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canary · a single-account price alarm for Solana</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta
      name="description"
      content="Place one tiny resting canary order and watch exactly one account with Quicknode Solana gRPC."
    />
  </head>
  <body>
    <!-- The red fire-wash overlay; opacity driven by the .is-firing body class -->
    <div class="fire-wash" aria-hidden="true"></div>

    <div class="shell">
      <!-- ─── Header · wordmark + tagline, plus quiet controls ────────────── -->
      <header class="topbar">
        <div class="brand">
          <span class="brand__mark" aria-hidden="true">🐤</span>
          <div class="brand__text">
            <span class="brand__name">canary</span>
            <span class="brand__tag">one resting order · one account watched · instant fill signal</span>
          </div>
        </div>

        <div class="topbar__right">
          <!-- subtle stream indicator; the status-line chip below is the proof-of-life -->
          <span id="conn-chip" class="stream-chip" title="Streaming via Quicknode Solana gRPC">
            <span id="conn-dot" class="stream-chip__dot" data-state="off"></span>
            <span id="conn-text" class="stream-chip__text">connecting…</span>
          </span>
          <!-- mode control. In replay it doubles as the re-run trigger button. -->
          <button id="mode-control" class="mode-control" data-mode="replay" type="button">
            <span class="mode-control__icon" aria-hidden="true">↻</span>
            <span id="mode-label" class="mode-control__label">replay</span>
          </button>
          <!-- manual cancel. Armed/live only, shown while an order is resting. -->
          <button id="cancel-order" class="mode-control mode-control--danger" type="button" hidden title="Cancel the resting canary order">
            <span class="mode-control__icon" aria-hidden="true">✕</span>
            <span class="mode-control__label">cancel order</span>
          </button>
          <!-- chirp mute toggle (default sound-on) -->
          <button id="mute-toggle" class="icon-btn" type="button" aria-pressed="false" title="Mute the chirp">
            <span aria-hidden="true">🔊</span>
          </button>
        </div>
      </header>

      <!-- ─── The fold · the canary, its status, one quiet chip row ───────── -->
      <section id="canary-stage" class="hero" data-status="starting">
        <div class="hero__cage">
          <span id="pulse-ring" class="pulse-ring" aria-hidden="true"></span>
          <span class="note note--1" aria-hidden="true">♪</span>
          <span class="note note--2" aria-hidden="true">♫</span>

          <!-- the canary — a small, round mascot -->
          <svg class="canary-svg" viewBox="0 0 120 120" role="img" aria-label="A canary, watching">
            <ellipse class="cy-shadow" cx="60" cy="109" rx="29" ry="4.5" />
            <g class="bird">
              <path class="cy-wing" d="M31 72 q-17 1 -22 12 q15 5 24 -3 Z" />
              <ellipse class="cy-body" cx="62" cy="65" rx="34" ry="36" />
              <ellipse class="cy-belly" cx="60" cy="75" rx="22" ry="22" />
              <path class="cy-crest" d="M56 31 q1 -13 11 -11 q0 9 -7 13 Z" />
              <path class="cy-crest" d="M64 31 q6 -11 15 -5 q-3 9 -12 10 Z" />
              <path class="cy-wing wing" d="M46 60 q-15 6 -11 23 q13 0 19 -13 Z" />
              <g class="cy-feet">
                <path d="M53 99 l0 8 M53 107 l-5 4 M53 107 l5 4" />
                <path d="M71 99 l0 8 M71 107 l-5 4 M71 107 l5 4" />
              </g>
              <g class="eye">
                <circle class="cy-eye-white" cx="75" cy="55" r="10" />
                <circle class="cy-eye" cx="77" cy="56" r="6" />
                <circle class="cy-eye-spark" cx="74" cy="52" r="2.4" />
              </g>
              <path class="cy-eye-happy" d="M68 56 q7 7 14 0" />
              <g class="beak">
                <path class="cy-beak" d="M91 57 l16 4 l-16 6 Z" />
              </g>
              <path class="cy-sweat" d="M95 40 q4 6 0 9 q-4 -3 0 -9 Z" />
              <g class="alarm" aria-hidden="true">
                <path d="M50 18 l-4 -13" />
                <path d="M70 13 l0 -13" />
                <path d="M90 19 l6 -11" />
              </g>
            </g>
          </svg>
        </div>

        <h1 id="state-label" class="hero__label">Booting…</h1>
        <!-- one quiet line — filled with a row of fact chips by main.ts -->
        <p id="context-line" class="hero__context">spinning up the pipeline</p>

        <div id="warn-banner" class="warn-banner" hidden role="alert">
          <span class="warn-banner__icon" aria-hidden="true">⚠</span>
          <span id="warn-text" class="warn-banner__text"></span>
        </div>
      </section>

      <!-- ─── Below the fold · the order + the Quicknode stream ───────────── -->
      <section class="details">
        <div class="card">
          <span class="card__k">The order</span>
          <div id="order-chips" class="chip-row">
            <span class="card__empty">waiting for the order…</span>
          </div>
        </div>
        <div class="card">
          <span class="card__k">The stream</span>
          <div id="stream-chips" class="chip-row">
            <span class="card__empty">connecting…</span>
          </div>
          <span class="card__slot">Quicknode Solana gRPC · slot <span id="slot-num" class="mono">—</span></span>
        </div>
      </section>

      <!-- ─── The firehose vs. the canary ─────────────────────────────────── -->
      <section class="contrast">
        <div class="contrast__head">
          <h2 class="contrast__title">The firehose vs. the canary</h2>
        </div>
        <div class="contrast__cols">
          <div class="panel panel--firehose">
            <div class="panel__label">
              <span class="panel__name">Watch everyone</span>
              <span class="panel__sub">hundreds of accounts · mostly noise</span>
            </div>
            <div class="firehose">
              <div id="firehose-rows" class="firehose__rows"></div>
              <div class="firehose__fade firehose__fade--top"></div>
              <div class="firehose__fade firehose__fade--bottom"></div>
            </div>
          </div>

          <div class="panel panel--canary">
            <div class="panel__label">
              <span class="panel__name">The canary</span>
              <span class="panel__sub">one account · the answer</span>
            </div>
            <div class="lone">
              <div id="lone-row" class="lone__row">
                <span class="lone__pulse" aria-hidden="true"></span>
                <span id="lone-addr" class="lone__addr">waiting for the order…</span>
                <span class="lone__tag">resting order</span>
              </div>
              <p class="lone__hint">price trades through your level → this one account changes</p>
            </div>
          </div>
        </div>
        <p class="contrast__caption">
          Both tell you the moment price trades through your level. One makes you drink from a
          firehose — the other just chirps.
        </p>
      </section>

      <!-- ─── The fire moment + log ───────────────────────────────────────── -->
      <section class="feed">
        <div id="fire-banner" class="fire-banner" hidden>
          <span class="fire-banner__spark" aria-hidden="true">🐤</span>
          <div class="fire-banner__body">
            <span id="fire-banner-text" class="fire-banner__head">Canary triggered</span>
            <div id="fire-chips" class="chip-row chip-row--banner"></div>
          </div>
        </div>

        <div class="log">
          <div class="log__head">
            <span class="log__title">Event log</span>
            <span class="log__hint">order placed → stream connected → updates → filled</span>
          </div>
          <ol id="log-list" class="log__list"></ol>
        </div>
      </section>

      <footer class="foot">
        <span class="foot__brand">
          Built on <a href="https://www.quicknode.com/" target="_blank" rel="noopener">Quicknode</a>
          · Jupiter Trigger API + Quicknode Solana gRPC
        </span>
        <span id="foot-disclaimer" class="foot__mock" hidden></span>
      </footer>
    </div>

    <script type="module" src="/src/web/main.ts"></script>
  </body>
</html>