Cashu token styles

packages/app/src/Element/CashuNuts.css

@@ -0,0 +1,8 @@
+.cashu {
+    background: var(--cashu-gradient);
+}
+
+.cashu h1 {
+    font-size: 44px;
+    line-height: 1em;
+}

packages/app/src/Element/CashuNuts.tsx

@@ -1,8 +1,10 @@
+import "./CashuNuts.css";
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, FormattedNumber } from "react-intl";
+import { useUserProfile } from "@snort/system-react";
 
 import useLogin from "Hooks/useLogin";
-import { useUserProfile } from "@snort/system-react";
+import Icon from "Icons/Icon";
 
 interface Token {
   token: Array<{
@@ -48,33 +50,53 @@ export default function CashuNuts({ token }: { token: string }) {
 
   if (!cashu) return <>{token}</>;
 
+  const amount = cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0);
   return (
-    <div className="note-invoice">
+    <div className="cashu flex f-space p24 br">
-      <div className="flex f-between">
+      <div className="flex-column g8 f-ellipsis">
-        <div>
+        <div className="flex f-center g16">
-          <h4>
+          <svg width="30" height="39" viewBox="0 0 30 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <FormattedMessage defaultMessage="Cashu token" />
+            <g id="Group 47711">
-          </h4>
+              <path id="Rectangle 585" d="M29.3809 2.47055L29.3809 11.7277L26.7913 11.021C23.8493 10.2181 20.727 10.3835 17.8863 11.4929C15.5024 12.4238 12.9113 12.6933 10.3869 12.2728L7.11501 11.7277L7.11501 2.47054L10.3869 3.01557C12.9113 3.43607 15.5024 3.1666 17.8863 2.23566C20.727 1.12632 23.8493 0.960876 26.7913 1.7638L29.3809 2.47055Z" fill="url(#paint0_linear_1976_19241)" />
-          <p>
+              <path id="Rectangle 587" d="M29.3809 27.9803L29.3809 37.2375L26.7913 36.5308C23.8493 35.7278 20.727 35.8933 17.8863 37.0026C15.5024 37.9336 12.9113 38.203 10.3869 37.7825L7.11501 37.2375L7.11501 27.9803L10.3869 28.5253C12.9113 28.9458 15.5024 28.6764 17.8863 27.7454C20.727 26.6361 23.8493 26.4706 26.7913 27.2736L29.3809 27.9803Z" fill="url(#paint1_linear_1976_19241)" />
-            <FormattedMessage
+              <path id="Rectangle 586" d="M8.494e-08 15.2069L4.89585e-07 24.4641L2.5896 23.7573C5.53159 22.9544 8.6539 23.1198 11.4946 24.2292C13.8784 25.1601 16.4695 25.4296 18.9939 25.0091L22.2658 24.4641L22.2658 15.2069L18.9939 15.7519C16.4695 16.1724 13.8784 15.9029 11.4946 14.972C8.6539 13.8627 5.53159 13.6972 2.5896 14.5001L8.494e-08 15.2069Z" fill="url(#paint2_linear_1976_19241)" />
-              defaultMessage="Amount: {amount} sats"
+            </g>
-              values={{
+            <defs>
-                amount: cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0),
+              <linearGradient id="paint0_linear_1976_19241" x1="29.3809" y1="6.7213" x2="7.11501" y2="6.7213" gradientUnits="userSpaceOnUse">
-              }}
+                <stop stop-color="white" />
-            />
+                <stop offset="1" stop-color="white" stop-opacity="0.5" />
-          </p>
+              </linearGradient>
-          <small className="xs">
+              <linearGradient id="paint1_linear_1976_19241" x1="29.3809" y1="32.2311" x2="7.11501" y2="32.2311" gradientUnits="userSpaceOnUse">
-            <FormattedMessage defaultMessage="Mint: {url}" values={{ url: cashu.token[0].mint }} />
+                <stop stop-color="white" />
-          </small>
+                <stop offset="1" stop-color="white" stop-opacity="0.5" />
-        </div>
+              </linearGradient>
-        <div>
+              <linearGradient id="paint2_linear_1976_19241" x1="2.70746e-07" y1="19.4576" x2="22.2658" y2="19.4576" gradientUnits="userSpaceOnUse">
-          <button onClick={e => copyToken(e, token)} className="mr5">
+                <stop stop-color="white" />
-            <FormattedMessage defaultMessage="Copy" description="Button: Copy Cashu token" />
+                <stop offset="1" stop-color="white" stop-opacity="0.5" />
-          </button>
+              </linearGradient>
-          <button onClick={e => redeemToken(e, token)}>
+            </defs>
-            <FormattedMessage defaultMessage="Redeem" description="Button: Redeem Cashu token" />
+          </svg>
-          </button>
+          <FormattedMessage
+            defaultMessage="<h1>{n}</h1> Cashu sats"
+            values={{
+              h1: (c) => <h1>{c}</h1>,
+              n: <FormattedNumber value={amount} />
+            }} />
         </div>
+        <small className="xs w-max">
+          <FormattedMessage defaultMessage="<b>Mint:</b> {url}" values={{
+            b: (c) => <b>{c}</b>,
+            url: new URL(cashu.token[0].mint).hostname
+          }} />
+        </small>
+      </div>
+      <div className="flex g8">
+        <button onClick={e => copyToken(e, token)}>
+          <Icon name="copy" />
+        </button>
+        <button onClick={e => redeemToken(e, token)}>
+          <FormattedMessage defaultMessage="Redeem" description="Button: Redeem Cashu token" />
+        </button>
       </div>
     </div>
   );

packages/app/src/index.css

@@ -46,6 +46,7 @@
   --header-padding-tb: 10px;
   --btn-color: #fff;
   --primary-gradient: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
+  --cashu-gradient: linear-gradient(90deg, #40B039, #ADFF2A)
 }
 
 ::-webkit-scrollbar {