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 Dec 6, 2023
2 parents 3c59142 + ce78bba commit c73b086
Show file tree
Hide file tree
Showing 25 changed files with 877 additions and 755 deletions.
5 changes: 2 additions & 3 deletions .env
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@

API_URL=https://api.unitap.app
NEXT_PUBLIC_API_URL=https://api.unitap.app

NEXT_PUBLIC_GOOGLE_ANALYTICS='G-HHTJ4P5ZB0'
# API_URL=https://api.unitap.app


IS_STAGE=1
IS_STAGE=0
14 changes: 8 additions & 6 deletions app/gas-tap/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import GasTapProvider from "@/context/gasTapProvider";
import { FC, PropsWithChildren } from "react";

const GasTapLayout: FC<PropsWithChildren> = async ({ children }) => {
const chains = await fetch(process.env.API_URL! + "/api/gastap/chain/list/", {
next: {
revalidate: 10,
},
}).then((res) => res.json());

const chains = await fetch(
process.env.NEXT_PUBLIC_API_URL! + "/api/gastap/chain/list/",
{
next: {
revalidate: 10,
},
}
).then((res) => res.json());

return <GasTapProvider chains={chains}>{children}</GasTapProvider>;
};
Expand Down
108 changes: 73 additions & 35 deletions components/containers/gas-tap/Cards/Chainlist/ChainCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
"use client"
"use client";

import {
SecondaryButton,
ClaimedButton,
ClaimButton,
} from "@/components/ui/Button/button"
import { DV } from "@/components/ui/designVariables"
import { useGasTapContext } from "@/context/gasTapProvider"
import { PK, ClaimReceipt, ClaimReceiptState, ChainType, Chain } from "@/types"
import { formatChainBalance, numberWithCommas } from "@/utils"
import { getChainIcon } from "@/utils/chain"
import { useNetworkSwitcher, useWalletAccount } from "@/utils/wallet"
import { useContext } from "react"
import styled from "styled-components"
import { FundContext } from "../../Modals/FundGasModal"
} from "@/components/ui/Button/button";
import { DV } from "@/components/ui/designVariables";
import { useGasTapContext } from "@/context/gasTapProvider";
import { PK, ClaimReceipt, ClaimReceiptState, ChainType, Chain } from "@/types";
import { formatChainBalance, numberWithCommas } from "@/utils";
import { getChainIcon } from "@/utils/chain";
import { useNetworkSwitcher, useWalletAccount } from "@/utils/wallet";
import { useContext, useMemo } from "react";
import styled from "styled-components";
import { FundContext } from "../../Modals/FundGasModal";
import Icon from "@/components/ui/Icon";

type ChainCardProps = {
chain: Chain
isHighlighted?: boolean
}
chain: Chain;
isHighlighted?: boolean;
};

export const AddMetamaskButton = styled(SecondaryButton)`
display: flex;
Expand All @@ -35,20 +36,36 @@ export const AddMetamaskButton = styled(SecondaryButton)`
height: 20px;
transform: scale(1.4);
}
`
`;

const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
const { openClaimModal, activeClaimHistory } = useGasTapContext()
const { openClaimModal, activeClaimHistory, oneTimeClaimedGasList } =
useGasTapContext();

const { setChainId, setIsOpen } = useContext(FundContext)
const isOneTimeCollected = useMemo(
() => !!oneTimeClaimedGasList.find((item) => item.chain.pk === chain.pk),
[chain, oneTimeClaimedGasList]
);

const { addAndSwitchChain } = useNetworkSwitcher()
const { isConnected } = useWalletAccount()
const isMonthlyCollected = useMemo(
() =>
!!activeClaimHistory.find(
(claim: ClaimReceipt) =>
claim.chain.pk === chain.pk &&
claim.status === ClaimReceiptState.VERIFIED
),
[activeClaimHistory, chain]
);

const { setChainId, setIsOpen } = useContext(FundContext);

const { addAndSwitchChain } = useNetworkSwitcher();
const { isConnected } = useWalletAccount();

const handleRefillButtonClicked = (chainId: PK) => {
setChainId(chainId)
setIsOpen(true)
}
setChainId(chainId);
setIsOpen(true);
};

return (
<div>
Expand Down Expand Up @@ -117,12 +134,7 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
</div>

<div className="action flex flex-col md:flex-row w-full sm:w-auto items-center sm:items-end">
{/* todo migrate buttom logic*/}
{activeClaimHistory.find(
(claim: ClaimReceipt) =>
claim.chain.pk === chain.pk &&
claim.status === ClaimReceiptState.VERIFIED
) ? (
{isMonthlyCollected || isOneTimeCollected ? (
<ClaimedButton
data-testid={`chain-claimed-${chain.pk}`}
$mlAuto
Expand All @@ -138,12 +150,12 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
</ClaimedButton>
) : chain.needsFunding && chain.chainType !== ChainType.SOLANA ? (
<div className="btn btn--claim btn--sm btn--out-of-balance">
Out of balance
Out of Gas
<button
onClick={() => handleRefillButtonClicked(chain.pk)}
className="btn btn--sm btn--refill"
>
Refill
Refuel
</button>
</div>
) : !activeClaimHistory.find(
Expand All @@ -158,7 +170,7 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
className="text-sm m-auto"
>
<p>{`Claim ${formatChainBalance(
BigInt(chain.maxClaimAmount),
chain.maxClaimAmount,
chain.symbol
)} ${chain.symbol}`}</p>
</ClaimButton>
Expand All @@ -178,7 +190,7 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
<div
className={`${
isHighlighted ? "bg-g-primary-low" : "bg-gray30"
} w-full gap-2 md:gap-0 items-center flex flex-col md:flex-row rounded-b-xl px-8 py-2.5 justify-between`}
} w-full gap-2 md:gap-0 items-center flex flex-col md:flex-row rounded-b-xl px-8 justify-between`}
>
<div
className={`${
Expand All @@ -192,6 +204,32 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
{chain.symbol}
</p>
</div>
<div
className={`${
isHighlighted ? "bg-transparent" : "bg-gray40"
} w-full max-w-[180px] items-center flex rounded-none py-3 justify-between md:justify-center`}
>
{chain.isOneTimeClaim ? (
<>
<p className="text-xs">Single-Claim Tap</p>
<Icon
className="text-white"
ml={4}
iconSrc="/assets/images/gas-tap/claimable-once.svg"
/>
</>
) : (
<>
<p className="text-xs">Periodic Tap</p>
<Icon
className="text-white"
ml={4}
iconSrc="/assets/images/gas-tap/periodic-tap.svg"
/>
</>
)}
</div>

<div
className={`${
isHighlighted ? "bg-transparent" : "bg-gray30"
Expand Down Expand Up @@ -219,7 +257,7 @@ const ChainCard = ({ chain, isHighlighted }: ChainCardProps) => {
</div>
</div>
</div>
)
}
);
};

export default ChainCard
export default ChainCard;
36 changes: 18 additions & 18 deletions components/containers/gas-tap/Cards/ProvideGasCard/provideGasCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
"use client"
"use client";

import React, { useContext, useEffect } from "react"
import { LightOutlinedButton } from "@/components/ui/Button/button"
import ChainCard from "./chainCard"
import { FundContext } from "../../Modals/FundGasModal"
import { useGasTapContext } from "@/context/gasTapProvider"
import React, { useContext, useEffect } from "react";
import { LightOutlinedButton } from "@/components/ui/Button/button";
import ChainCard from "./chainCard";
import { FundContext } from "../../Modals/FundGasModal";
import { useGasTapContext } from "@/context/gasTapProvider";

const ProvideGasCard = () => {
const [chainListIndex, setChainListIndex] = React.useState(0)
const { chainList } = useGasTapContext()
const [chainListIndex, setChainListIndex] = React.useState(0);
const { chainList } = useGasTapContext();

const { setIsOpen } = useContext(FundContext)
const { setIsOpen } = useContext(FundContext);

useEffect(() => {
setTimeout(() => {
if (chainListIndex > chainList.length - 5) {
setChainListIndex(0)
setChainListIndex(0);
} else {
setChainListIndex(chainListIndex + 4)
setChainListIndex(chainListIndex + 4);
}
}, 10000)
}, [chainListIndex, chainList])
}, 10000);
}, [chainListIndex, chainList]);

if (chainList.length > 0) {
return (
Expand Down Expand Up @@ -48,14 +48,14 @@ const ProvideGasCard = () => {
$fontSize="14"
height="46px"
>
Provide Gas Fee
Contribute Gas
</LightOutlinedButton>
</span>
</div>
)
);
}

return <></>
}
return <></>;
};

export default ProvideGasCard
export default ProvideGasCard;
42 changes: 20 additions & 22 deletions components/containers/gas-tap/Modals/ClaimModal/ModalStatusesBody/ClaimSuccess.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
"use client"
"use client";

import Icon from "@/components/ui/Icon"
import { FC } from "react"
import { Chain, ClaimReceipt, ClaimReceiptState } from "@/types"
import { getChainClaimIcon, getTxUrl } from "@/utils/chain"
import { formatWeiBalance } from "@/utils/numbers"
import { DropIconWrapper } from "../claimModal.style"
import { Text } from "@/components/ui/text.style"
import Icon from "@/components/ui/Icon";
import { FC } from "react";
import { Chain, ClaimReceipt, ClaimReceiptState } from "@/types";
import { getChainClaimIcon, getTxUrl } from "@/utils/chain";
import { formatWeiBalance } from "@/utils/numbers";
import { DropIconWrapper } from "../claimModal.style";
import { Text } from "@/components/ui/text.style";

const ClaimSuccessBody: FC<{
chain: Chain
activeClaimReceipt: ClaimReceipt
chain: Chain;
activeClaimReceipt: ClaimReceipt;
}> = ({ chain, activeClaimReceipt }) => {
const handleClick = () => {
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
`I've just claimed ${formatWeiBalance(chain.maxClaimAmount.toString())} ${
`I've just claimed ${formatWeiBalance(chain.maxClaimAmount)} ${
chain.symbol
} on ${chain.chainName} from @Unitap_app 🔥\nClaim yours:`
)}&url=${encodeURIComponent(
"unitap.app/gas-tap?hc=" + encodeURIComponent(chain.chainName)
)}`
window.open(twitterUrl, "_blank")
}
)}`;
window.open(twitterUrl, "_blank");
};

return (
<>
Expand All @@ -42,8 +42,7 @@ const ClaimSuccessBody: FC<{
color="space_green"
$textAlign="center"
>
{formatWeiBalance(chain.maxClaimAmount.toString())} {chain.symbol}{" "}
Claimed
{formatWeiBalance(chain.maxClaimAmount)} {chain.symbol} Claimed
</Text>
<Icon
iconSrc="assets/images/modal/successful-state-check.svg"
Expand All @@ -59,9 +58,8 @@ const ClaimSuccessBody: FC<{
mb={1}
$textAlign="center"
>
we successfully transferred{" "}
{formatWeiBalance(chain.maxClaimAmount.toString())} {chain.symbol} to
your wallet
we successfully transferred {formatWeiBalance(chain.maxClaimAmount)}{" "}
{chain.symbol} to your wallet
</Text>

<Text
Expand Down Expand Up @@ -93,7 +91,7 @@ const ClaimSuccessBody: FC<{
/>
</div>
</>
)
}
);
};

export default ClaimSuccessBody
export default ClaimSuccessBody;
Loading

0 comments on commit c73b086

Please sign in to comment.