From f601e88b8fc12ce8917fb346bbba8952cf3e5f68 Mon Sep 17 00:00:00 2001
From: kieran <kieran@harkin.me>
Date: Fri, 12 Apr 2024 11:56:10 +0100
Subject: [PATCH] refactor: cleanup ecash nuts embed closes #718

---
 packages/app/src/Components/Copy/Copy.tsx     |   5 +-
 .../app/src/Components/Embed/CashuNuts.css    |   5 -
 .../app/src/Components/Embed/CashuNuts.tsx    | 100 ++++--------------
 packages/app/src/Components/Icons/ECash.tsx   |  55 ++++++++++
 4 files changed, 79 insertions(+), 86 deletions(-)
 create mode 100644 packages/app/src/Components/Icons/ECash.tsx

diff --git a/packages/app/src/Components/Copy/Copy.tsx b/packages/app/src/Components/Copy/Copy.tsx
index 70ec3125..1ef8e9b2 100644
--- a/packages/app/src/Components/Copy/Copy.tsx
+++ b/packages/app/src/Components/Copy/Copy.tsx
@@ -9,15 +9,16 @@ export interface CopyProps {
   text: string;
   maxSize?: number;
   className?: string;
+  showText?: boolean;
 }
-export default function Copy({ text, maxSize = 32, className }: CopyProps) {
+export default function Copy({ text, maxSize = 32, className, showText }: CopyProps) {
   const { copy, copied } = useCopy();
   const sliceLength = maxSize / 2;
   const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}` : text;
 
   return (
     <div className={classNames("copy flex pointer g8 items-center", className)} onClick={() => copy(text)}>
-      <span className="copy-body">{trimmed}</span>
+      {(showText ?? true) && <span className="copy-body">{trimmed}</span>}
       <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
         {copied ? <Icon name="check" size={14} /> : <Icon name="copy-solid" size={14} />}
       </span>
diff --git a/packages/app/src/Components/Embed/CashuNuts.css b/packages/app/src/Components/Embed/CashuNuts.css
index f82778b6..b437d9af 100644
--- a/packages/app/src/Components/Embed/CashuNuts.css
+++ b/packages/app/src/Components/Embed/CashuNuts.css
@@ -1,8 +1,3 @@
 .cashu {
   background: var(--cashu-gradient);
 }
-
-.cashu h1 {
-  font-size: 44px;
-  line-height: 1em;
-}
diff --git a/packages/app/src/Components/Embed/CashuNuts.tsx b/packages/app/src/Components/Embed/CashuNuts.tsx
index 6bf405b5..d650d22a 100644
--- a/packages/app/src/Components/Embed/CashuNuts.tsx
+++ b/packages/app/src/Components/Embed/CashuNuts.tsx
@@ -4,7 +4,10 @@ import { useUserProfile } from "@snort/system-react";
 import { useEffect, useState } from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 
+import AsyncButton from "@/Components/Button/AsyncButton";
+import ECashIcon from "@/Components/Icons/ECash";
 import Icon from "@/Components/Icons/Icon";
+import { useCopy } from "@/Hooks/useCopy";
 import useLogin from "@/Hooks/useLogin";
 
 interface Token {
@@ -20,13 +23,9 @@ interface Token {
 export default function CashuNuts({ token }: { token: string }) {
   const { publicKey } = useLogin(s => ({ publicKey: s.publicKey }));
   const profile = useUserProfile(publicKey);
+  const { copy } = useCopy();
 
-  async function copyToken(e: React.MouseEvent<HTMLButtonElement>, token: string) {
-    e.stopPropagation();
-    await navigator.clipboard.writeText(token);
-  }
-  async function redeemToken(e: React.MouseEvent<HTMLButtonElement>, token: string) {
-    e.stopPropagation();
+  async function redeemToken(token: string) {
     const lnurl = profile?.lud16 ?? "";
     const url = `https://redeem.cashu.me?token=${encodeURIComponent(token)}&lightning=${encodeURIComponent(
       lnurl,
@@ -53,87 +52,30 @@ export default function CashuNuts({ token }: { token: string }) {
 
   const amount = cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0);
   return (
-    <div className="cashu flex justify-between p24 br">
-      <div className="flex flex-col g8 f-ellipsis">
-        <div className="flex items-center g16">
-          <svg width="30" height="39" viewBox="0 0 30 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g id="Group 47711">
-              <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)"
-              />
-              <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)"
-              />
-              <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)"
-              />
-            </g>
-            <defs>
-              <linearGradient
-                id="paint0_linear_1976_19241"
-                x1="29.3809"
-                y1="6.7213"
-                x2="7.11501"
-                y2="6.7213"
-                gradientUnits="userSpaceOnUse">
-                <stop stopColor="white" />
-                <stop offset="1" stopColor="white" stopOpacity="0.5" />
-              </linearGradient>
-              <linearGradient
-                id="paint1_linear_1976_19241"
-                x1="29.3809"
-                y1="32.2311"
-                x2="7.11501"
-                y2="32.2311"
-                gradientUnits="userSpaceOnUse">
-                <stop stopColor="white" />
-                <stop offset="1" stopColor="white" stopOpacity="0.5" />
-              </linearGradient>
-              <linearGradient
-                id="paint2_linear_1976_19241"
-                x1="2.70746e-07"
-                y1="19.4576"
-                x2="22.2658"
-                y2="19.4576"
-                gradientUnits="userSpaceOnUse">
-                <stop stopColor="white" />
-                <stop offset="1" stopColor="white" stopOpacity="0.5" />
-              </linearGradient>
-            </defs>
-          </svg>
+    <div className="cashu flex justify-between p24 br items-center">
+      <div className="flex flex-col gap-2 f-ellipsis">
+        <div className="flex items-center gap-4">
+          <ECashIcon width={30} />
           <FormattedMessage
-            defaultMessage="<h1>{n}</h1> Cashu sats"
-            id="6/SF6e"
+            defaultMessage="{n} eSats"
+            id="yAztTU"
             values={{
-              h1: c => <h1>{c}</h1>,
-              n: <FormattedNumber value={amount} />,
+              n: (
+                <span className="text-3xl">
+                  <FormattedNumber value={amount} />
+                </span>
+              ),
             }}
           />
         </div>
-        <small className="xs w-max">
-          <FormattedMessage
-            defaultMessage="<b>Mint:</b> {url}"
-            id="zwb6LR"
-            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)}>
+      <div className="flex gap-2 items-center">
+        <AsyncButton onClick={() => copy(token)}>
           <Icon name="copy" />
-        </button>
-        <button onClick={e => redeemToken(e, token)}>
+        </AsyncButton>
+        <AsyncButton onClick={() => redeemToken(token)}>
           <FormattedMessage defaultMessage="Redeem" id="XrSk2j" description="Button: Redeem Cashu token" />
-        </button>
+        </AsyncButton>
       </div>
     </div>
   );
diff --git a/packages/app/src/Components/Icons/ECash.tsx b/packages/app/src/Components/Icons/ECash.tsx
new file mode 100644
index 00000000..f7e7c665
--- /dev/null
+++ b/packages/app/src/Components/Icons/ECash.tsx
@@ -0,0 +1,55 @@
+export default function ECashIcon(props: { width?: number; height?: number }) {
+  return (
+    <svg viewBox="0 0 30 39" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="Group 47711">
+        <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)"
+        />
+        <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)"
+        />
+        <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)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1976_19241"
+          x1="29.3809"
+          y1="6.7213"
+          x2="7.11501"
+          y2="6.7213"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0.5" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1976_19241"
+          x1="29.3809"
+          y1="32.2311"
+          x2="7.11501"
+          y2="32.2311"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0.5" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1976_19241"
+          x1="2.70746e-07"
+          y1="19.4576"
+          x2="22.2658"
+          y2="19.4576"
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="white" stopOpacity="0.5" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}