Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/UnitapApp/unitap-front
Browse files Browse the repository at this point in the history
  • Loading branch information
@alimaktabi
alimaktabi committed Jun 9, 2024
2 parents 72eae32 + c63aac6 commit 4ca599c
Show file tree
Hide file tree
Showing 15 changed files with 449 additions and 250 deletions.
2 changes: 1 addition & 1 deletion app/contribution-hub/gas-tap/components/ProvideGasFeeContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const ProvideGasFeeContent: FC<{ initialChainId?: number }> = ({
return "Connect Wallet";
}
if (loading) {
return "Loading...";
return "Pending...";
}
return !isRightChain ? "Switch Network" : "Submit Contribution";
}, [isConnected, isRightChain, loading]);
Expand Down
236 changes: 117 additions & 119 deletions app/gastap/components/Modals/FundGasModal/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ const Content: FC<{ initialChainId?: number }> = ({ initialChainId }) => {
return "Connect Wallet";
}
if (loading) {
return "Loading...";
return "Pending...";
}
return !isRightChain ? "Switch Network" : "Submit Contribution";
}, [isConnected, isRightChain, loading]);
Expand Down Expand Up @@ -235,132 +235,130 @@ const Content: FC<{ initialChainId?: number }> = ({ initialChainId }) => {
setSelectedChain={setSelectedChain}
></SelectChainModal>
</Modal>
<div className="z-0 rounded-xl px-4 py-6">
<Image
width={661}
height={665}
alt="gas fee planet"
src="/assets/images/fund/provide-gas-fee-planet.svg"
className="absolute -left-64 -top-16 -z-10 scale-150"
{!!fundTransactionError || !!txHash ? (
<FundTransactionModal
fundAmount={fundAmount}
closeModalHandler={closeModalHandler}
provideGasFeeError={fundTransactionError}
txHash={txHash}
selectedChain={selectedChain}
/>
<span className="z-100 w-full">
<Icon
className="mb-2"
iconSrc="./assets/images/fund/provide-gas-fee-battery.svg"
width="146px"
height="auto"
alt="gas fee battery"
) : (
<div className="z-0 rounded-xl px-4 py-6">
<Image
width={661}
height={665}
alt="gas fee planet"
src="/assets/images/fund/provide-gas-fee-planet.svg"
className="absolute -left-64 -top-16 -z-10 scale-150"
/>
<p className="z-1 mb-3 text-xl font-bold text-white">
Contribute Gas
</p>
<p className="z-1 mb-3 text-xs text-gray100">
100% of contributions will fund distributions and transaction costs
of the gas tap.
</p>
{!userToken && (
<p className="z-1 mb-3 text-xs text-warn">
You must login in order for your contribution to be counted in
leaderboard
<span className="z-100 w-full">
<Icon
className="mb-2"
iconSrc="./assets/images/fund/provide-gas-fee-battery.svg"
width="146px"
height="auto"
alt="gas fee battery"
/>
<p className="z-1 mb-3 text-xl font-bold text-white">
Contribute Gas
</p>
)}

<div className="select-box mb-2 mt-5 flex w-full overflow-hidden rounded-xl bg-gray40">
<div
className="select-box__token duration-50 flex h-16 w-24 cursor-pointer items-center justify-evenly bg-gray30 transition-all hover:bg-gray60"
onClick={() => setModalState(true)}
>
{selectedChain ? (
<p className="z-1 mb-3 text-xs text-gray100">
100% of contributions will fund distributions and transaction
costs of the gas tap.
</p>
{!userToken && (
<p className="z-1 mb-3 text-xs text-warn">
You must login in order for your contribution to be counted in
leaderboard
</p>
)}

<div className="select-box mb-2 mt-5 flex w-full overflow-hidden rounded-xl bg-gray40">
<div
className="select-box__token duration-50 flex h-16 w-24 cursor-pointer items-center justify-evenly bg-gray30 transition-all hover:bg-gray60"
onClick={() => setModalState(true)}
>
{selectedChain ? (
<Icon
alt={selectedChain.chainName}
iconSrc={getChainIcon(selectedChain)}
width="auto"
height="32px"
/>
) : (
<span className="h-8 w-8 rounded-full bg-gray50"></span>
)}
<Icon
alt={selectedChain.chainName}
iconSrc={getChainIcon(selectedChain)}
width="auto"
height="32px"
iconSrc="/assets/images/fund/arrow-down.png"
width="14px"
height="auto"
/>
) : (
<span className="h-8 w-8 rounded-full bg-gray50"></span>
)}
<Icon
iconSrc="/assets/images/fund/arrow-down.png"
width="14px"
height="auto"
/>
</div>
<div className="select-box__info my-2 ml-3 mr-4 flex w-full flex-col justify-between bg-gray40">
<div className="select-box__info__top flex w-full items-center justify-between">
<p className="select-box__info__coin-symbol text-xs font-semibold text-white">
{selectedChain?.symbol}
</p>
{(balance.isLoading && balance.data?.formatted) || (
<p
// onClick={() => setFundAmount(balance.toString())}
className="select-box__info__coin-balance text-xs font-semibold text-gray100"
>
Balance:{" "}
{balance.data
? formatUnits(
balance.data?.value,
balance.data.decimals,
).slice(0, 5)
: "..."}{" "}
{selectedChain?.symbol}{" "}
</p>
)}
</div>
<div className="select-box__info__amount w-full">
<input
className="fund-input w-full bg-transparent text-xl text-white"
type="number"
step="0.001"
min="0"
autoFocus={true}
placeholder="Enter Amount"
value={fundAmount}
onChange={(e) => setFundAmount(e.target.value)}
/>
<div className="select-box__info my-2 ml-3 mr-4 flex w-full flex-col justify-between bg-gray40">
<div className="select-box__info__top flex w-full items-center justify-between">
<p className="select-box__info__coin-symbol text-xs font-semibold text-white">
{selectedChain?.symbol}
</p>
{(balance.isLoading && (balance.data as any)?.formatted) || (
<p
// onClick={() => setFundAmount(balance.toString())}
className="select-box__info__coin-balance text-xs font-semibold text-gray100"
>
Balance:{" "}
{balance.data
? formatUnits(
balance.data?.value,
balance.data.decimals,
).slice(0, 5)
: "..."}{" "}
{selectedChain?.symbol}{" "}
</p>
)}
</div>
<div className="select-box__info__amount w-full">
<input
className="fund-input w-full bg-transparent text-xl text-white"
type="number"
step="0.001"
min="0"
autoFocus={true}
placeholder="Enter Amount"
value={fundAmount}
onChange={(e) => setFundAmount(e.target.value)}
/>
</div>
</div>
</div>
</div>
{!!fundAmount && !!helpAmount && (
<div className="ml-5 mt-2 text-sm text-gray90">
You will help onboard{" "}
<Tooltip
text="All of your contributions will go to onboarding users to this network. The majority of the donations will be transferred straight to users as gas tokens and a smaller part will cover the network transaction fees."
toolTipClassName="!w-[300px]"
className="cursor-pointer"
// title=""
>
<b>approximately</b>
</Tooltip>{" "}
<span className="text-green-500">{helpAmount}</span> users to this
network!
</div>
)}

<ClaimButton
height="3.5rem"
className="mt-5 !w-full text-white"
$fontSize="20px"
onClick={handleSendFunds}
disabled={!Number(fundAmount) && isRightChain && isConnected}
data-testid="fund-action"
>
{fundActionButtonLabel}
</ClaimButton>
<Modal
isOpen={!!fundTransactionError || !!txHash}
closeModalHandler={closeModalHandler}
>
<FundTransactionModal
fundAmount={fundAmount}
closeModalHandler={closeModalHandler}
provideGasFeeError={fundTransactionError}
txHash={txHash}
selectedChain={selectedChain}
/>
</Modal>
</span>
</div>
{!!fundAmount && !!helpAmount && (
<div className="ml-5 mt-2 text-sm text-gray90">
You will help onboard{" "}
<Tooltip
text="All of your contributions will go to onboarding users to this network. The majority of the donations will be transferred straight to users as gas tokens and a smaller part will cover the network transaction fees."
toolTipClassName="!w-[300px]"
className="cursor-pointer"
// title=""
>
<b>approximately</b>
</Tooltip>{" "}
<span className="text-green-500">{helpAmount}</span> users to
this network!
</div>
)}

<ClaimButton
height="3.5rem"
className="mt-5 !w-full text-white"
$fontSize="20px"
onClick={handleSendFunds}
disabled={!Number(fundAmount) && isRightChain && isConnected}
data-testid="fund-action"
>
{fundActionButtonLabel}
</ClaimButton>
</span>
</div>
)}
</div>
);
};
Expand Down
19 changes: 11 additions & 8 deletions app/gastap/components/Modals/FundTransactionModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ const FundTransactionModal = ({
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
`I donated to @Unitap_app's ${
selectedChain!.chainName
} faucet 💚💜\nJoin me in making Web3 more accessible for everyone!\nDonate: `
} faucet 💚💜\nJoin me in making Web3 more accessible for everyone!\nDonate: `,
)}&url=${encodeURIComponent(
"unitap.app/fund?chain=" + encodeURIComponent(selectedChain!.pk)
"unitap.app/fund?chain=" + encodeURIComponent(selectedChain!.pk),
)}`;
window.open(twitterUrl, "_blank");
};
return (
<>
<div className="w-full">
<Icon
mb={3}
iconSrc="/assets/images/fund/success-provide-spaceman.svg"
Expand All @@ -57,7 +57,7 @@ const FundTransactionModal = ({
width="100%"
fontSize="14"
color="second_gray_light"
className="underline cursor-pointer"
className="cursor-pointer underline"
mb={3}
$textAlign="center"
onClick={() => {
Expand All @@ -70,22 +70,22 @@ const FundTransactionModal = ({
<div className="relative w-full">
<button
onClick={handleClick}
className={`gradient-outline-twitter-button w-full flex items-center justify-center bg-gray00 transition-all duration-75 hover:bg-gray20 rounded-xl border-gray00 px-3 py-4`}
className={`gradient-outline-twitter-button flex w-full items-center justify-center rounded-xl border-gray00 bg-gray00 px-3 py-4 transition-all duration-75 hover:bg-gray20`}
>
<p className="text-sm font-semibold text-twitter">
Share on Twitter
</p>
</button>
<Icon
iconSrc="/assets/images/gas-tap/twitter-share.svg"
className="w-6 h-6 absolute right-4 top-1/2 z-10 pointer-events-none -translate-y-1/2"
className="pointer-events-none absolute right-4 top-1/2 z-10 h-6 w-6 -translate-y-1/2"
width="auto"
height="26px"
/>
</div>
</>
)}
</>
</div>
);
}

Expand Down Expand Up @@ -118,7 +118,10 @@ const FundTransactionModal = ({
}

return (
<FundTransactionModalWrapper data-testid="fund-transaction-modal">
<FundTransactionModalWrapper
className="w-full"
data-testid="fund-transaction-modal"
>
{provideGasFeeError ? failed() : successful()}
</FundTransactionModalWrapper>
);
Expand Down
Loading

0 comments on commit 4ca599c

Please sign in to comment.