Skip to content

Commit

Permalink
feat: responsive - 7702 - ui demo branch (#1318)
Browse files Browse the repository at this point in the history 
* feat: responsive transaction card

* feat: responsive cards
  • Loading branch information
@RobChangCA
RobChangCA authored Feb 3, 2025
1 parent fdcfe37 commit 465b96b
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 102 deletions.
100 changes: 51 additions & 49 deletions examples/ui-demo/src/components/7702/MintCard7702.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,58 +26,60 @@ export const MintCard7702 = ({
uri?: string;
}) => {
return (
<div className="bg-bg-surface-default rounded-lg p-6 w-[326px] h-[478px] flex flex-col shadow-smallCard ">
{uri ? (
<div className="relative flex flex-col items-center">
<Image
className="mb-4 rounded-xl object-cover h-[222px] w-[326px]"
width={326}
height={222}
src={uri}
alt="An NFT"
priority
/>
<div className="bg-bg-surface-default rounded-lg p-4 xl:p-6 w-full xl:w-[326px] xl:h-[478px] flex flex-col shadow-smallCard">
<div className="flex xl:flex-col gap-4">
<div className="flex-shrink-0 sm:mb-3 xl:mb-0 rounded-lg overflow-hidden relative flex items-center justify-center h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
{uri ? (
<Image
width={326}
height={222}
src={uri}
alt="An NFT"
priority
className="object-cover h-full w-full"
/>
) : (
<LoadingIcon />
)}
</div>
) : (
<div className="flex justify-center items-center h-[222px] w-full mb-4">
<LoadingIcon />
<div>
<div className="mb-2">
<h3 className="text-fg-primary text-base xl:text-xl font-semibold">
Gasless transactions
</h3>
</div>
{!nftTransfered ? (
<>
<p className="text-fg-primary text-sm mb-3">
Transact with one click using gas sponsorship and background
signing.
</p>
<div className="justify-between items-center hidden xl:flex">
<p className="text-fg-secondary text-base">Gas Fee</p>
<p>
<span className="line-through mr-1 text-base text-fg-primary align-top">
$0.02
</span>
<span
className="text-base align-top"
style={{
background:
"linear-gradient(132deg, #FF9C27 0%, #FD48CE 100%)",
WebkitBackgroundClip: "text",
backgroundClip: "text",
WebkitTextFillColor: "transparent",
}}
>
Free
</span>
</p>
</div>
</>
) : (
<MintStages status={status} />
)}
</div>
)}
<div className="mb-3">
<h3 className="text-fg-primary text-xl font-semibold">
Gasless transactions
</h3>
</div>
{!nftTransfered ? (
<>
<p className="text-fg-primary text-sm mb-3">
Sponsor gas and sign in the background for a one-click transaction
experience.
</p>
<div className="flex justify-between items-center">
<p className="text-fg-secondary text-base">Gas Fee</p>
<p>
<span className="line-through mr-1 text-base text-fg-primary align-top">
$0.02
</span>
<span
className="text-base align-top"
style={{
background:
"linear-gradient(132deg, #FF9C27 0%, #FD48CE 100%)",
WebkitBackgroundClip: "text",
backgroundClip: "text",
WebkitTextFillColor: "transparent",
}}
>
Free
</span>
</p>
</div>
</>
) : (
<MintStages status={status} />
)}
<Button
className="w-full mt-auto"
onClick={handleCollectNFT}
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/7702/Transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const Transaction = ({

return (
<div className={`flex justify-between ${className} mb-4`}>
<div className="flex items-center">
<div className="flex items-center mr-1">
<div className="w-4 h-4 mr-2">
{state === "complete" ? (
<CheckCircleFilledIcon className=" h-4 w-4 fill-demo-surface-success" />
Expand Down
56 changes: 27 additions & 29 deletions examples/ui-demo/src/components/7702/TransactionsCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,38 +32,36 @@ export const TransactionsCard = ({
};

return (
<div className="bg-bg-surface-default rounded-lg p-6 w-[326px] h-[478px] flex flex-col shadow-smallCard mb-5 lg:mb-0">
<div
className="rounded-xl h-[222px] w-full mb-4 flex justify-center items-center relative"
style={{
background: `rgba(54, 63, 249, 0.05)`,
}}
>
<p className="absolute top-5 right-5 px-2 py-1 font-semibold rounded-md text-xs text-[#7c3AED] bg-[#F3F3FF]">
New!
</p>
<Key />
</div>
<h3 className="text-fg-primary text-xl font-semibold mb-3">
Recurring transactions
</h3>

{cardStatus === "initial" ? (
<p className="text-fg-primary text-sm">
Set up a dollar-cost average order by creating a session key with
permission to buy ETH every 10 seconds.
</p>
) : cardStatus === "setup" ? (
<div className="flex items-center">
<LoadingIcon className="h-4 w-4 mr-2" />
<p className="text-fg-primary text-sm">
Creating session key and minting USDC...
<div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:w-[326px] xl:h-[478px] flex flex-col shadow-smallCard mb-5 xl:mb-0">
<div className="flex gap-3 xl:gap-0 xl:flex-col">
<div className="flex-shrink-0 bg-[#EAEBFE] rounded-xl mb-4 flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
<p className="absolute top-[-6px] left-[-6px] sm:top-1 sm:left-1 xl:left-auto xl:right-4 xl:top-4 px-2 py-1 font-semibold rounded-md text-xs text-[#7c3AED] bg-[#F3F3FF]">
New!
</p>
<Key className="h-9 w-9 sm:h-[74px] sm:w-[74px] xl:h-[94px] xl:w-[94px]" />
</div>
) : (
<Transactions transactions={transactions} />
)}
<div className="mb-3">
<h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3">
Recurring transactions
</h3>

{cardStatus === "initial" ? (
<p className="text-fg-primary text-sm">
Set up a dollar-cost average order by creating a session key with
permission to buy ETH every 10 seconds.
</p>
) : cardStatus === "setup" ? (
<div className="flex items-center">
<LoadingIcon className="h-4 w-4 mr-2" />
<p className="text-fg-primary text-sm">
Creating session key and minting USDC...
</p>
</div>
) : (
<Transactions transactions={transactions} />
)}
</div>
</div>
<Button
className="mt-auto"
onClick={handleTransactions}
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/7702/Wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const Wrapper7702 = () => {
uri,
} = useMint();
return (
<div className="flex max-[1200px]:flex-col gap-6 lg:mt-6 items-center">
<div className="flex flex-col xl:flex-row gap-6 lg:mt-6 items-center p-6">
<MintCard7702
isLoading={
isLoadingMint || cardStatus === "setup" || cardStatus === "active"
Expand Down
2 changes: 0 additions & 2 deletions examples/ui-demo/src/components/icons/key.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
export const Key = ({ className }: { className?: string }) => (
<svg
width="94"
height="94"
viewBox="0 0 94 94"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand Down
35 changes: 15 additions & 20 deletions examples/ui-demo/src/hooks/7702/useMint.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,26 +45,21 @@ export const useMint = () => {
signing: "success",
}));

// TODO: move this log to a toast
console.log("Mint successful");
console.log(`${ODYSSEY_EXPLORER_URL}/tx/${txnHash}`);

// Current design does not have a success toast, leaving commented to implement later.
// setToast({
// type: "success",
// text: (
// <>
// <span className={"inline-block lg:hidden"}>
// {`You've collected your NFT!`}
// </span>
// <span className={"hidden lg:inline-block"}>
// {`You've successfully collected your NFT! Refresh to mint
// again.`}
// </span>
// </>
// ),
// open: true,
// });
setToast({
type: "success",
text: (
<>
<span className={"inline-block lg:hidden"}>
{`You've collected your NFT!`}
</span>
<span className={"hidden lg:inline-block"}>
{`You've successfully collected your NFT! Refresh to mint
again.`}
</span>
</>
),
open: true,
});
};

const handleError = (error: Error) => {
Expand Down

0 comments on commit 465b96b

Please sign in to comment.