Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adds the squid widget in the mint attestation workflow #3699

Merged
merged 2 commits into from
Oct 22, 2024
Merged

adds the squid widget in the mint attestation workflow #3699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b461f5b
adds the squid widget in the mint attestation workflow
nijoe1 Oct 22, 2024
c196841
removed hardcoded native token
nijoe1 Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion packages/grant-explorer/src/features/attestations/components/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import { Button } from "common/src/styles";
import processingIcon from "../../../assets/processing.svg";
import { ProgressStatus } from "../../../hooks/attestations/config";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import GenericModal from "../../common/GenericModal";
import SquidWidget, { SwapParams } from "../../round/ViewCartPage/SquidWidget";
import { useState } from "react";
import { NATIVE } from "common";

// Extracted ActionButton component
export const ActionButton = ({
Expand All @@ -19,6 +23,17 @@ export const ActionButton = ({
notEnoughFunds: boolean;
isLoading: boolean;
}) => {
const [openSwapModel, setOpenSwapModal] = useState<boolean>(false);
const swapParams = {
fromChainId: "1",
toChainId: "42161",
fromTokenAddress: NATIVE,
toTokenAddress: NATIVE,
} as SwapParams;

const swapModalHandler = async (flag: boolean) => {
setOpenSwapModal(flag);
};
if (!isConnected) {
return (
<Button className="bg-[#DE3714] text-white font-mono text-md w-full px-4 py-2 rounded-lg hover:shadow-md">
Expand All @@ -41,9 +56,21 @@ export const ActionButton = ({
Insufficient funds to complete the minting process. Please bridge or
add funds to your wallet to proceed.
</span>
<Button className="bg-[#DE3714] text-white font-mono text-md w-full px-4 pb-2 rounded-lg hover:shadow-md">
<Button
onClick={() => {
swapModalHandler(true);
}}
className="bg-[#DE3714] text-white font-mono text-md w-full px-4 pb-2 rounded-lg hover:shadow-md"
>
Bridge Funds
</Button>
<GenericModal
isIframe={true}
body={<SquidWidget {...swapParams} />}
isOpen={openSwapModel}
setIsOpen={swapModalHandler}
className="z-40"
/>
</div>
);
} else if (
Expand Down
3 changes: 2 additions & 1 deletion packages/grant-explorer/src/features/common/GenericModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface InfoModalProps {
| ((flag: boolean) => void);
children?: ReactNode;
isIframe?: boolean;
className?: string;
}

export default function InfoModal({
Expand All @@ -30,7 +31,7 @@ export default function InfoModal({
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
className={`relative ${props.className ?? "z-10"}`}
initialFocus={cancelButtonRef}
onClose={setIsOpen}
data-testid="generic-modal"
Expand Down
16 changes: 7 additions & 9 deletions packages/grant-explorer/src/features/round/ViewCartPage/ViewCartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,12 @@ export default function ViewCart() {
const chainIds = Object.keys(groupedCartProjects);

const [openSwapModel, setOpenSwapModal] = useState<boolean>(false);
const [swapParams, setSwapParams] = useState<SwapParams>(
{
fromChainId: "1",
toChainId: "42161",
fromTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
toTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
}
);
const [swapParams, setSwapParams] = useState<SwapParams>({
fromChainId: "1",
toChainId: "42161",
fromTokenAddress: NATIVE,
toTokenAddress: NATIVE,
});

const handleSwap = (params: SwapParams) => {
setSwapParams(params);
Expand Down Expand Up @@ -220,7 +218,7 @@ export default function ViewCart() {
handleSwap({
fromChainId: isConnectedChain ? "1" : connectedChain.toString(),
toChainId: chainId.toString(),
fromTokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
fromTokenAddress: NATIVE,
toTokenAddress: getVotingTokenForChain(chainId).address,
});
};
Expand Down
Loading