-
Notifications
You must be signed in to change notification settings - Fork 3
/
PowerQrCode.tsx
126 lines (118 loc) · 4.16 KB
/
PowerQrCode.tsx
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
import QRCode from "react-qr-code";
import { useState } from "react";
import { PowerWrapper } from "../PowerWrapper";
import { Icons } from "../Icons";
import { useQRCodePowerMutation } from "@/hooks/useFetchPowers";
import { cn } from "@/lib/utils";
import toast from "react-hot-toast";
import { classed } from "@tw-classed/react";
import { PowerContentProps } from "@/pages/powers/[id]";
import { ProvingState } from "jubmoji-api";
import ProofProgressBar from "../ui/ProofProgressBar";
const QRCodeWrapper = classed.div(
"bg-white rounded-[8px] w-full max-w-[156px]"
);
const PowerQrCode = ({ power, jubmojis }: PowerContentProps) => {
const [url, setUrl] = useState<string>();
const [provingState, setProvingState] = useState<ProvingState>();
const powerMutation = useQRCodePowerMutation();
const onUpdateProvingState = (newProvingState: ProvingState) => {
setProvingState(newProvingState);
};
const onHandlePower = async () => {
await toast.promise(
powerMutation.mutateAsync({
power,
jubmojis,
onUpdateProvingState,
}),
{
loading: "Proving power...",
error: (err: any) => {
setProvingState(undefined);
return (
err?.message ??
"There was an error claiming power. Please try again."
);
},
success: (qrCodeUuid: any) => {
setUrl(`${window.location.origin}/qr/${qrCodeUuid}`);
setProvingState(undefined);
return "Power claimed!";
},
}
);
};
const proofProgressPercentage = provingState
? (provingState.numProofsCompleted / (provingState.numProofsTotal || 1)) *
100
: 0;
const proofProgressDisplayText = `Proving ownership of Jubmoji ${provingState?.numProofsCompleted} of ${provingState?.numProofsTotal}`;
return (
<PowerWrapper>
{!url ? (
<div className="flex items-center gap-4 justify-between">
<div className="relative">
<span className="absolute top-[6px] left-[12px] text-[13px] font-normal font-dm-sans text-shark-300">
Tap to prove
</span>
<Icons.bubble className="text-shark-800" width={100} />
</div>
{provingState ? (
<ProofProgressBar
displayText={proofProgressDisplayText}
progressPercentage={proofProgressPercentage}
/>
) : (
<button type="button" onClick={onHandlePower}>
<div
className={cn("w-[150px] h-[150px] bg-cover", {
"animate animate-pulse": powerMutation.isLoading,
})}
style={{
backgroundImage: `url(/images/proof-icon.png)`,
}}
/>
</button>
)}
</div>
) : (
<div className="flex items-center justify-between">
<div className="flex flex-col gap-1">
<span className=" font-dm-sans text-base font-medium text-shark-50">
{power.name}
</span>
<span className="flex flex-col gap-1 text-[13px] font-dm-sans text-shark-300 font-semibold">
<span className="block">
{new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
}).format(new Date())}
</span>
<span className="block text-tiny font-dm-sans text-shark-300 font-normal">
{new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
}).format(new Date())}
</span>
</span>
{/* <span className="text-[13px] font-dm-sans text-shark-300 font-semibold">
Owner
</span>
<span className="text-tiny font-dm-sans text-shark-300">
Location
</span> */}
</div>
<QRCodeWrapper>
<QRCode
size={156}
className="ml-auto p-4 h-auto w-full max-w-full"
value={url}
viewBox={`0 0 156 156`}
/>
</QRCodeWrapper>
</div>
)}
</PowerWrapper>
);
};
PowerQrCode.displayName = "PowerQrCode";
export { PowerQrCode };