Skip to content

Commit

Permalink
Readme (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fadeev
fadeev authored Jul 25, 2024
1 parent f393c48 commit 137d896
Show file tree
Hide file tree
Showing 9 changed files with 303 additions and 69 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@rainbow-me/rainbowkit": "^2.1.3",
"@tanstack/react-query": "^5.28.4",
Expand Down Expand Up @@ -68,4 +69,4 @@
"node": ">=18.0.0"
},
"packageManager": "[email protected]+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
}
}
40 changes: 4 additions & 36 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,14 @@
"use client";

import { useState } from "react";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import {
ConnectBitcoin,
useZetaChainClient,
useEthersSigner,
Swap,
} from "@/index";
import { ConnectBitcoin } from "@/index";
import { useAccount, useChainId, useWalletClient } from "wagmi";
import { ThemeToggle } from "@/components/ThemeToggle";
import { useBitcoinWallet } from "@/providers/BitcoinWalletProvider";

const contract = "0xb459F14260D1dc6484CE56EB0826be317171e91F";

const Page = () => {
const account = useAccount();
const chainId = useChainId();
const { data: walletClient } = useWalletClient({ chainId });
const signer = useEthersSigner({ walletClient });
const client = useZetaChainClient({ network: "testnet", signer });
const { sendTransaction, address: bitcoinAddress } = useBitcoinWallet();

return (
<div className="m-4">
<div className="flex justify-end gap-2 mb-10">
<ThemeToggle />
<ConnectBitcoin />
<ConnectButton label="Connect EVM" showBalance={false} />
</div>
<div className="flex justify-center">
<div className="w-[400px]">
{client && (
<Swap
client={client}
account={account}
bitcoin={bitcoinAddress}
contract={contract}
/>
)}
</div>
</div>
<div>
<ConnectBitcoin />
<ConnectButton />
</div>
);
};
Expand Down
44 changes: 23 additions & 21 deletions src/components/Balances/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,26 @@ export const Balances = ({
);

const SearchInput = (
<div className="m-2 relative flex items-center">
<Input
placeholder="Search tokens..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
<Search className="absolute left-3 top-3 w-4 h-4 text-gray-500" />
<Button
variant="link"
size="icon"
className="ml-2 absolute right-0 top-0"
onClick={() => fetchBalances(true)}
>
<RefreshCw
className={`w-4 h-4 text-gray-500 ${isReloading && "animate-spin"}`}
<div className="p-2">
<div className="relative flex items-center">
<Input
placeholder="Search tokens..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9 dark:bg-zinc-900"
/>
</Button>
<Search className="absolute left-3 top-3 w-4 h-4 text-gray-500" />
<Button
variant="link"
size="icon"
className="ml-2 absolute right-0 top-0"
onClick={() => fetchBalances(true)}
>
<RefreshCw
className={`w-4 h-4 text-gray-500 ${isReloading && "animate-spin"}`}
/>
</Button>
</div>
</div>
);

Expand All @@ -107,7 +109,7 @@ export const Balances = ({
variant="outline"
size="sm"
key={chain}
className={`mr-2 ${
className={`mr-2 dark:font-light ${
selectedChain === chain ? "bg-zinc-100 dark:bg-zinc-800" : ""
}`}
onClick={() =>
Expand All @@ -130,7 +132,7 @@ export const Balances = ({
onClick={() => onBalanceClick(token)}
>
<div className="flex flex-col">
<span>{token.symbol}</span>
<span className="font-light">{token.symbol}</span>
<span className="text-gray-500 text-xs">{token.chain_name}</span>
</div>
<span>{roundNumber(parseFloat(token.balance))}</span>
Expand All @@ -140,7 +142,7 @@ export const Balances = ({
);

const LoadingSkeleton = (
<div className="space-y-2 px-2 pb-2">
<div className="space-y-2 px-2 pb-2 mt-2">
{Array(5)
.fill(null)
.map((_, index) => (
Expand All @@ -157,7 +159,7 @@ export const Balances = ({

return (
<div>
<Card className="dark:bg-zinc-900">
<Card className="dark:bg-zinc-900 border-none shadow-xl shadow-zeta-grey-100 dark:shadow-none">
{SearchInput}
{error ? (
ErrorMessage
Expand Down
4 changes: 2 additions & 2 deletions src/components/StakingRewards/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const StakingRewards = ({ client, account }: any) => {

return (
<div className="grid grid-cols-2 gap-2">
<Card className="p-2 flex flex-col gap-4">
<Card className="p-2 flex flex-col gap-4 dark:bg-zinc-900 dark:border-none">
<div className="px-2">
<div className="text-xs text-muted-foreground">Staked</div>
{isConnected ? (
Expand All @@ -153,7 +153,7 @@ export const StakingRewards = ({ client, account }: any) => {
)}
</div>
</Card>
<Card className="p-2 flex flex-col gap-2 justify-between">
<Card className="p-2 flex flex-col gap-2 justify-between dark:bg-zinc-900 dark:border-none">
<div className="px-2">
<div className="text-xs text-muted-foreground">Rewards</div>
{isConnected ? (
Expand Down
20 changes: 11 additions & 9 deletions src/components/Swap/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
};

return (
<Card className="p-0 px-5 pb-7 pt-2 dark:bg-zinc-900">
<Card className="p-0 px-5 pb-7 pt-2 dark:bg-zinc-900 border-none shadow-xl shadow-zeta-grey-100 dark:shadow-none">
<h1 className="text-2xl font-bold leading-tight tracking-tight mt-6 mb-4 ml-2">
{sendTypeDetails[sendType as any]?.title || "Swap"}
</h1>
Expand Down Expand Up @@ -154,16 +154,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-75" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0 border-none shadow-2xl dark:border dark:border-zinc-800 dark:border-solid">
<PopoverContent className="w-[300px] p-0 border-none shadow-2xl">
<Command>
<CommandList className="dark:bg-zinc-900">
<CommandList className="dark:bg-zinc-800">
<CommandInput placeholder="Search tokens..." />
<CommandEmpty>No available tokens found.</CommandEmpty>
<CommandGroup className="max-h-[400px] overflow-y-scroll">
{sourceBalances.map((balances: any) => (
<CommandItem
key={balances.id}
className="hover:cursor-pointer"
className="hover:cursor-pointer dark:hover:bg-zinc-700"
value={balances.id}
onSelect={(c: any) => {
setSourceToken(c === sourceTokenSelected ? null : c);
Expand Down Expand Up @@ -238,16 +238,16 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-75" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0 border-none shadow-2xl dark:border dark:border-zinc-800 dark:border-solid">
<PopoverContent className="w-[300px] p-0 border-none shadow-2xl">
<Command>
<CommandList className="dark:bg-zinc-900">
<CommandList className="dark:bg-zinc-800">
<CommandInput placeholder="Search tokens..." />
<CommandEmpty>No available tokens found.</CommandEmpty>
<CommandGroup className="max-h-[400px] overflow-y-scroll">
{destinationBalances?.map((balances: any) => (
<CommandItem
key={balances.id}
className={`hover:cursor-pointer ${
className={`hover:cursor-pointer dark:hover:bg-zinc-700 ${
!computeSendType(sourceTokenSelected, balances) &&
"opacity-25"
}`}
Expand Down Expand Up @@ -308,7 +308,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
<div>{formatAddress(addressSelected)}</div>
</Button>
</PopoverTrigger>
<PopoverContent className="rounded-xl flex p-2 border-none shadow-xl space-x-2 w-[390px] dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:border-solid">
<PopoverContent className="rounded-xl flex p-2 border-none shadow-xl space-x-2 w-[390px] dark:bg-zinc-800">
<Input
className="grow border-none text-xs px-2 bg-transparent"
placeholder="Recipient address"
Expand All @@ -319,6 +319,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
<Button
disabled={!isCustomAddressValid}
size="icon"
className="dark:border-zinc-900"
variant="outline"
onClick={confirmCustomAddress}
>
Expand All @@ -339,7 +340,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
{crossChainFee.formatted}
</Button>
</PopoverTrigger>
<PopoverContent className="rounded-xl w-auto text-xs border-none shadow-2xl dark:bg-zinc-900 dark:border dark:border-zinc-800 dark:border-solid">
<PopoverContent className="rounded-xl w-auto text-xs border-none shadow-2xl dark:bg-zinc-800">
<div className="font-medium text-center">Cross-Chain Fee</div>
<div className="text-zinc-400">{crossChainFee?.amount}</div>
</PopoverContent>
Expand All @@ -352,6 +353,7 @@ const SwapLayout: React.FC<SwapLayoutProps> = ({
<div>
<Button
variant="outline"
className="dark:border-none dark:bg-zinc-800 dark:hover:bg-zinc-800/50"
onClick={handleSend}
disabled={sendDisabled}
>
Expand Down
Loading

0 comments on commit 137d896

Please sign in to comment.