Skip to content

feat: autoswap integration #123

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

Open
JayWebtech wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: autoswap integration #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1,122 changes: 1,122 additions & 0 deletions app/abis/strk-abi.ts
View file
Open in desktop

Large diffs are not rendered by default.

621 changes: 474 additions & 147 deletions app/abis/swappr-abi.ts
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 20 additions & 15 deletions app/components/address.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,45 @@
"use client";
import { useState, useEffect } from "react";
import { useAccount } from "@starknet-react/core";
import { MoreVertical } from "lucide-react";
import { useState } from "react";
import { shortenAddress } from "../utils/helper";
import DisconnectModal from "./ui/modals/disconnect-wallet-modal";
import { getUserStrkBalance } from "@/services/getUserStrkBalance";

export default function Address() {
const [isModalOpen, setIsModalOpen] = useState(false);
const { address } = useAccount();
const { address, account } = useAccount();
const [balance, setBalance] = useState(0);
useEffect(() => {
const fetchBalance = async () => {
if (!address || !account) {
setBalance(0);
return;
}

const balanceValue = await getUserStrkBalance(address, account);
setBalance(Number(balanceValue.toFixed(2)));
};
fetchBalance();
}, [address, account]);

return (
<div className="flex items-center gap-2 sm:gap-4 text-[#F3F5FF] leading-6 text-sm font-semibold">
{/* {isModalOpen &&
createPortal(
<DisconnectModal handleClose={() => setIsModalOpen(false)} />,
document.body
)} */}
<DisconnectModal
open={isModalOpen}
onOpenChange={() => setIsModalOpen((prev) => !prev)}
/>
<div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg min-w-[164px] justify-center text-sm">
<div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-4 rounded-lg min-w-[164px] justify-center text-sm">
<img
src="/coin-logos/usdt-logo.svg"
src="/coin-logos/strk-logo.svg"
alt="USDT icon"
className="w-5 h-5"
/>
<span>USDT: $114.00</span>
<span>STRK: {balance}</span>
</div>

<div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg text-sm">
<div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-4 rounded-lg text-sm cursor-pointer" onClick={() => setIsModalOpen(true)}>
<img src="/user.svg" alt="" className="w-5 h-5" />
<span>{address ? shortenAddress(address) : ""}</span>
<button type="button" onClick={() => setIsModalOpen(true)}>
<MoreVertical className="w-4 h-4 text-gray-400" />
</button>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion app/components/layout/sections/landing-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function LandingHeroSection() {
</p>
<button
type="button"
className="flex gap-1 items-center justify-center py-3 md:py-3 w-[70%] md:w-[230px] border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
className="flex gap-1 items-center justify-center py-3 w-fit px-6 md:py-3 border border-[#4C5053] rounded-lg md:text-base font-semibold md:leading-[22px] text-[#F3F5FF] text-sm leading-5 bg-[#1D8CF4]"
onClick={() => {
if (!address) {
setIsConnecting(true);
Expand Down
79 changes: 56 additions & 23 deletions app/components/layout/sections/what-is-autoswappr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,63 @@
"use client";

import React from "react";
import { motion } from "framer-motion";

export default function WhatIsAutoSwapper() {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.2,
delayChildren: 0.1,
},
},
};

const itemVariants = {
hidden: {
opacity: 0,
y: 30
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
ease: [0.22, 1, 0.36, 1],
},
},
};

return (
<div className="px-6 md:px-[74px] py-10 text-center">
<h2 className="text-xl md:text-[32px] font-semibold text-[#F3F5FF] mb-3 md:mb-6 ">
WTH is autoswappr?
</h2>
<div className="flex md:flex-row flex-col gap-y-5 gap-x-5 justify-center items-stretch text-xs md:text-base leading-5 md:leading-6 text-[#DCDFE1]">
<div className="w-full md:max-w-[380px] flex items-center">
<p>
Autoswappr automatically converts any STRK tokens you receive into
USDT — a stable token that holds its value. This means you
won&apos;t have to worry about missing the right time to convert,
especially if you&apos;re not notified right away when STRK hits
your wallet.
</p>
</div>
<div className="w-full md:w-[2px] rounded-lg h-[3px] bg-[#1E2021]" />
<div className="w-full md:max-w-[380px] flex items-center">
<p>
It runs in the background, so you don&apos;t have to do anything
manually. Your transactions are secured with advanced technology
that protects your funds and personal data from fraud or hacking.
<section className="px-6 md:px-[74px] py-16 md:py-24">
<motion.div
className="max-w-4xl mx-auto text-center"
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={containerVariants}
>
{/* Heading */}
<motion.h2
className="text-4xl md:text-6xl font-semibold text-[#F3F5FF] mb-8 md:mb-12"
variants={itemVariants}
>
What is Autoswappr?
</motion.h2>

<motion.div
className="max-w-3xl mx-auto"
variants={itemVariants}
>
<p className="text-xl md:text-2xl leading-relaxed text-[#DCDFE1]">
Autoswappr automatically converts your STRK tokens into USDT — a stable token that holds its value.
It runs seamlessly in the background, so you never have to worry about missing the right time to convert.
Your transactions are secured with advanced technology that protects your funds and personal data.
</p>
</div>
</div>
</div>
</motion.div>
</motion.div>
</section>
);
}
195 changes: 142 additions & 53 deletions app/components/layout/sections/why-autoswappr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,161 @@
"use client";

import React from "react";
import { motion } from "framer-motion";

interface FeatureCardProps {
image: string;
title: string;
description: string;
variants: any;
}

const FeatureCard = ({
image,
title,
description,
}: {
image: string;
title: string;
description: string;
}) => (
<div className="py-6 flex flex-col items-center text-center md:items-start md:text-left">
<img src={image} className="w-[350px] md:w-auto mb-7 md:mb-[60px]" alt="" />
<div className="max-w-[360px] py-4">
<h5 className="mb-3 md:mb-4 text-[#F3F5FF] text-sm md:text-xl font-medium">
variants,
}: FeatureCardProps) => (
<motion.div
className="flex flex-col items-center text-center"
variants={variants}
>
<div className="mb-8 md:mb-12">
<img
src={image}
className="w-full"
alt={`${title} illustration`}
/>
</div>
<div className="max-w-md">
<h3 className="text-2xl md:text-3xl font-semibold text-[#F3F5FF] mb-4 md:mb-6">
{title}
</h5>
<p className="text-xs md:text-sm text-[#DCDFE1] h-[60px]">
</h3>
<p className="text-base md:text-lg leading-relaxed text-[#DCDFE1]">
{description}
</p>
</div>
</div>
</motion.div>
);

const Divider = () => (
<div
className="hidden lg:flex w-[2px] h-[235px] bg-[#1E2021] rounded-full"
const Divider = ({ variants }: { variants: any }) => (
<motion.div
className="hidden lg:flex w-[2px] h-[300px] bg-gradient-to-b from-transparent via-[#1E2021] to-transparent"
role="presentation"
aria-hidden="true"
variants={variants}
/>
);

function WhyAutoSwappr() {
export default function WhyAutoSwappr() {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
delayChildren: 0.1,
},
},
};

const itemVariants = {
hidden: {
opacity: 0,
y: 40,
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
ease: [0.22, 1, 0.36, 1],
},
},
};

const cardVariants = {
hidden: {
opacity: 0,
y: 50,
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.7,
ease: [0.22, 1, 0.36, 1],
},
},
};

const features = [
{
image: "/dot-pattern-1.svg",
title: "Security",
description:
"Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step.",
},
{
image: "/dot-pattern-2.svg",
title: "Transparency",
description:
"Every transaction is verifiable on-chain. You have full visibility into your swaps and can track all activities with complete transparency.",
},
{
image: "/dot-pattern-3.svg",
title: "Efficiency",
description:
"Automated swaps execute instantly when conditions are met. No manual intervention needed — save time while maximizing your token value.",
},
];

return (
<div className="md:py-[60px] py-10 px-6 md:px-[75px]">
<h2 className="text-xl md:text-[32px] text-center md:text-left font-semibold text-[#F3F5FF] mb-3 md:mb-4">
Why AutoSwappr?
</h2>
<div className="flex gap-x-3 text-center">
<div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm bg-[#1E2021] text-[#F3F5FF] flex-1 md:flex-none">
Security
</div>
<div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
Transparency
</div>
<div className="py-2 px-4 border border-[#1E2021] rounded-lg text-sm text-[#F3F5FF] flex-1 md:flex-none">
Efficiency
</div>
</div>
<section className="px-6 md:px-[74px] py-16 md:py-24">
<motion.div
className="max-w-7xl mx-auto"
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={containerVariants}
>
<motion.h2
className="text-4xl md:text-6xl font-semibold text-[#F3F5FF] text-center mb-12 md:mb-16"
variants={itemVariants}
>
Why AutoSwappr?
</motion.h2>

<div className="grid grid-cols-[1fr] lg:grid-cols-[1fr_auto_1fr_auto_1fr] mt-7 md:mt-[68px] items-end gap-x-[52px]">
<FeatureCard
image="/dot-pattern-1.svg"
title="Security"
description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
/>
<Divider />
<FeatureCard
image="/dot-pattern-2.svg"
title="Transparency"
description="Fill out the short form by inputting the amount of STRK tokens you want to automatically swap to USDT."
/>
<Divider />
<FeatureCard
image="/dot-pattern-3.svg"
title="Efficiency"
description="Security is at the core of Autoswappr. Your assets are protected by audited smart contracts and industry-best practices at every step."
/>
</div>
</div>
<motion.div
className="flex flex-wrap justify-center gap-3 md:gap-4 mb-12 md:mb-20"
variants={itemVariants}
>
{features.map((feature, index) => (
<div
key={feature.title}
className="px-4 md:px-6 py-2 md:py-3 border border-[#1E2021] rounded-full text-xs md:text-lg font-medium text-[#F3F5FF] bg-[#1E2021]/50 backdrop-blur-sm transition-all hover:border-[#1D8CF4]/50 hover:bg-[#1E2021]"
>
{feature.title}
</div>
))}
</motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-5 items-start">
{features.map((feature, index) => (
<React.Fragment key={feature.title}>
<FeatureCard
image={feature.image}
title={feature.title}
description={feature.description}
variants={cardVariants}
/>
{index < features.length - 1 && (
<Divider variants={itemVariants} />
)}
</React.Fragment>
))}
</div>
</motion.div>
</section>
);
}

export default WhyAutoSwappr;
Loading
Loading