Add an invite screen for new issuers in the issuer playground (#14419)

### TL;DR Added an empty state invitation card for users who haven't created any tokens yet. ### What changed? - Created a new invitation card component that displays when users have no tokens - Added new icons: Entity, Snowflake, and Spark - Implemented styled components for the invitation card layout - Added feature list highlighting native Spark & Bitcoin issuance and real-time capabilities ![Screenshot 2024-12-16 at 10.52.26 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/qbk4MC9UEe4Hag2DEFmX/f903bb3c-5579-4cf7-9365-d61fa94fe1ff.png) GitOrigin-RevId: 0dd6fed42ab6ed394b7a9875a16600c4670085b7
lightsparkdev · Dec 18, 2024 · 53671cf · 53671cf
1 parent 7c1d5b1
commit 53671cf
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/packages/ui/src/icons/Entity.tsx b/packages/ui/src/icons/Entity.tsx
@@ -0,0 +1,50 @@
+export function Entity() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5.625C8.47919 5.625 5.625 8.47919 5.625 12C5.625 15.5208 8.47919 18.375 12 18.375C15.5208 18.375 18.375 15.5208 18.375 12C18.375 8.47919 15.5208 5.625 12 5.625ZM4.5 12C4.5 7.85787 7.85787 4.5 12 4.5C16.1421 4.5 19.5 7.85787 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85787 19.5 4.5 16.1421 4.5 12Z"
+        fill="white"
+      />
+      <path
+        d="M12.75 8.625C12.75 9.03921 12.4142 9.375 12 9.375C11.5858 9.375 11.25 9.03921 11.25 8.625C11.25 8.21079 11.5858 7.875 12 7.875C12.4142 7.875 12.75 8.21079 12.75 8.625Z"
+        fill="white"
+      />
+      <path
+        d="M16.125 12C16.125 12.4142 15.7892 12.75 15.375 12.75C14.9608 12.75 14.625 12.4142 14.625 12C14.625 11.5858 14.9608 11.25 15.375 11.25C15.7892 11.25 16.125 11.5858 16.125 12Z"
+        fill="white"
+      />
+      <path
+        d="M9.375 12C9.375 12.4142 9.03921 12.75 8.625 12.75C8.21079 12.75 7.875 12.4142 7.875 12C7.875 11.5858 8.21079 11.25 8.625 11.25C9.03921 11.25 9.375 11.5858 9.375 12Z"
+        fill="white"
+      />
+      <path
+        d="M12.75 15.375C12.75 15.7892 12.4142 16.125 12 16.125C11.5858 16.125 11.25 15.7892 11.25 15.375C11.25 14.9608 11.5858 14.625 12 14.625C12.4142 14.625 12.75 14.9608 12.75 15.375Z"
+        fill="white"
+      />
+      <path
+        d="M10.1436 9.08295C10.4365 9.37585 10.4365 9.85072 10.1436 10.1436C9.85072 10.4365 9.37585 10.4365 9.08295 10.1436C8.79006 9.85072 8.79006 9.37585 9.08295 9.08295C9.37585 8.79006 9.85072 8.79006 10.1436 9.08295Z"
+        fill="white"
+      />
+      <path
+        d="M14.9171 9.08295C15.21 9.37585 15.21 9.85072 14.9171 10.1436C14.6242 10.4365 14.1493 10.4365 13.8564 10.1436C13.5635 9.85072 13.5635 9.37585 13.8564 9.08295C14.1493 8.79006 14.6242 8.79006 14.9171 9.08295Z"
+        fill="white"
+      />
+      <path
+        d="M10.1436 13.8564C10.4365 14.1493 10.4365 14.6242 10.1436 14.9171C9.85072 15.21 9.37585 15.21 9.08295 14.9171C8.79006 14.6242 8.79006 14.1493 9.08295 13.8564C9.37585 13.5635 9.85072 13.5635 10.1436 13.8564Z"
+        fill="white"
+      />
+      <path
+        d="M14.9171 13.8564C15.21 14.1493 15.21 14.6242 14.9171 14.9171C14.6242 15.21 14.1493 15.21 13.8564 14.9171C13.5635 14.6242 13.5635 14.1493 13.8564 13.8564C14.1493 13.5635 14.6242 13.5635 14.9171 13.8564Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Snowflake.tsx b/packages/ui/src/icons/Snowflake.tsx
@@ -0,0 +1,18 @@
+export function Snowflake() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.8206 4.5C12.1313 4.5 12.3831 4.75184 12.3831 5.0625V11.0261L17.5482 8.04411C17.8172 7.88878 18.1612 7.98096 18.3165 8.25C18.4719 8.51904 18.3797 8.86306 18.1107 9.01839L12.946 12.0002L18.11 14.9816C18.379 15.1369 18.4712 15.481 18.3159 15.75C18.1605 16.019 17.8165 16.1112 17.5475 15.9559L12.3831 12.9743V18.9375C12.3831 19.2482 12.1313 19.5 11.8206 19.5C11.51 19.5 11.2581 19.2482 11.2581 18.9375V12.9747L6.09457 15.9559C5.82553 16.1112 5.48151 16.019 5.32618 15.75C5.17085 15.481 5.26303 15.1369 5.53207 14.9816L10.696 12.0002L5.53134 9.01839C5.2623 8.86306 5.17012 8.51904 5.32545 8.25C5.48078 7.98096 5.8248 7.88878 6.09384 8.04411L11.2581 11.0257V5.0625C11.2581 4.75184 11.51 4.5 11.8206 4.5Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/Spark.tsx b/packages/ui/src/icons/Spark.tsx
@@ -0,0 +1,16 @@
+export function Spark() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.0592 0.647783L11.8672 7.78035L18.6037 5.43801L19.8475 9.30855L13.0077 11.3291L17.343 17.05L13.994 19.3526L9.985 13.5103L5.91508 19.3605L2.62754 16.9688L6.97647 11.3097L0.150391 9.24525L1.41765 5.38235L8.13975 7.76833L7.99375 0.640381L12.0592 0.647783Z"
+        fill="#68DCFF"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
@@ -50,6 +50,7 @@ export { DollarManropeSmall } from "./DollarManropeSmall.js";
 export { DotGrid1x3Horizontal } from "./DotGrid1x3Horizontal.js";
 export { Download } from "./Download.js";
 export { EmailPlus } from "./EmailPlus.js";
+export { Entity } from "./Entity.js";
 export { Envelope } from "./Envelope.js";
 export { EnvelopePlus } from "./EnvelopePlus.js";
 export { ExclamationPoint } from "./ExclamationPoint.js";
@@ -122,7 +123,9 @@ export { Share } from "./Share.js";
 export { ShieldCheck } from "./ShieldCheck.js";
 export { ShieldCheckLite } from "./ShieldCheckLite.js";
 export { Sidebar } from "./Sidebar.js";
+export { Snowflake } from "./Snowflake.js";
 export { Sort } from "./Sort.js";
+export { Spark } from "./Spark.js";
 export { SparklesSoft } from "./SparklesSoft.js";
 export { StackedLines } from "./StackedLines.js";
 export { SwiftTwoTone } from "./SwiftTwoTone.js";