Cashu token styles
This commit is contained in:
parent
554bfa45f0
commit
dadf5159bd
GPG Key ID:
DE71CEB3925BE941
|
|
@ -0,0 +1,8 @@
|
|||
.cashu {
|
||||
background: var(--cashu-gradient);
|
||||
}
|
||||
|
||||
.cashu h1 {
|
||||
font-size: 44px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
|
@ -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="flex f-between">
|
||||
<div>
|
||||
<h4>
|
||||
<FormattedMessage defaultMessage="Cashu token" />
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
defaultMessage="Amount: {amount} sats"
|
||||
values={{
|
||||
amount: cashu.token[0].proofs.reduce((acc, v) => acc + v.amount, 0),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<small className="xs">
|
||||
<FormattedMessage defaultMessage="Mint: {url}" values={{ url: cashu.token[0].mint }} />
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={e => copyToken(e, token)} className="mr5">
|
||||
<FormattedMessage defaultMessage="Copy" description="Button: Copy Cashu token" />
|
||||
</button>
|
||||
<button onClick={e => redeemToken(e, token)}>
|
||||
<FormattedMessage defaultMessage="Redeem" description="Button: Redeem Cashu token" />
|
||||
</button>
|
||||
<div className="cashu flex f-space p24 br">
|
||||
<div className="flex-column g8 f-ellipsis">
|
||||
<div className="flex f-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 stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1976_19241" x1="29.3809" y1="32.2311" x2="7.11501" y2="32.2311" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="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 stop-color="white" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue