diff --git a/src/assets/images/meteor.svg b/src/assets/images/meteor.svg
new file mode 100644
index 000000000..f39ea9971
--- /dev/null
+++ b/src/assets/images/meteor.svg
@@ -0,0 +1,40 @@
+
+
diff --git a/src/assets/images/my_near_wallet.png b/src/assets/images/my_near_wallet.png
new file mode 100644
index 000000000..61ce051c7
Binary files /dev/null and b/src/assets/images/my_near_wallet.png differ
diff --git a/src/components/claim/FTPreview.tsx b/src/components/claim/FTPreview.tsx
new file mode 100644
index 000000000..70317876b
--- /dev/null
+++ b/src/components/claim/FTPreview.tsx
@@ -0,0 +1,24 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import Image from 'next/image';
+
+type FT = {
+ decimals: number;
+ icon: string;
+ name: string;
+ symbol: string;
+ total_supply: string;
+};
+
+const FTPreview = ({ token }: { token: FT }) => {
+ return (
+
+ {token.name}
+
+
+ {(BigInt(token.total_supply) / BigInt(10 ** token.decimals)).toString()} {token.symbol}
+
+
+ );
+};
+
+export default FTPreview;
diff --git a/src/components/claim/NFTPreview.tsx b/src/components/claim/NFTPreview.tsx
new file mode 100644
index 000000000..4b78c2fb5
--- /dev/null
+++ b/src/components/claim/NFTPreview.tsx
@@ -0,0 +1,35 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import { useContext, useEffect, useState } from 'react';
+
+import type { NFT } from '@/utils/types';
+
+import { NftImage } from '../NTFImage';
+import { NearContext } from '../wallet-selector/WalletSelector';
+
+const NFTPreview = ({ nft }: { nft: NFT }) => {
+ const [infoNft, setInfoNft] = useState(undefined);
+ const { wallet } = useContext(NearContext);
+ useEffect(() => {
+ if (!wallet) return;
+ const fetchNftInfo = async () => {
+ setInfoNft(
+ await wallet.viewMethod({
+ contractId: nft.contract_id,
+ method: 'nft_token',
+ args: { token_id: nft.token_id },
+ }),
+ );
+ };
+ fetchNftInfo();
+ }, [nft, wallet]);
+
+ return (
+
+ {infoNft?.metadata?.title}
+
+ {infoNft?.metadata?.description}
+
+ );
+};
+
+export default NFTPreview;
diff --git a/src/components/claim/NearPreview.tsx b/src/components/claim/NearPreview.tsx
new file mode 100644
index 000000000..06f4c2d42
--- /dev/null
+++ b/src/components/claim/NearPreview.tsx
@@ -0,0 +1,16 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import Image from 'next/image';
+
+import NearIconSvg from '@/assets/images/near-icon.svg';
+
+const NearPreview = ({ amount }: { amount: string }) => {
+ return (
+
+ NEAR
+
+ {amount} NEAR
+
+ );
+};
+
+export default NearPreview;
diff --git a/src/components/claim/Wallets.tsx b/src/components/claim/Wallets.tsx
new file mode 100644
index 000000000..3d95dd95f
--- /dev/null
+++ b/src/components/claim/Wallets.tsx
@@ -0,0 +1,54 @@
+import { Flex } from '@near-pagoda/ui';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import Meteor from '@/assets/images/meteor.svg';
+import MyNearWallet from '@/assets/images/my_near_wallet.png';
+import { networkId } from '@/config';
+
+const StyledButton = styled.a`
+ background-color: #1e2030;
+ color: #fff;
+ border: none;
+ border-radius: 25px;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s;
+ &:hover {
+ background-color: #101124;
+ }
+`;
+
+const WalletButton = styled(StyledButton)`
+ background-color: #212529;
+ text-decoration: none;
+ &:hover {
+ background-color: #11111c;
+ }
+`;
+
+const Wallets = ({ url }: { url: string }) => {
+ // https://docs.keypom.xyz/docs/next/keypom-sdk/Core/modules#supportedlinkdropclaimpages
+ const meteorWalletUrl = 'https://wallet.meteorwallet.app/linkdrop/';
+ const myNearWalletUrl =
+ networkId === 'testnet' ? 'https://testnet.mynearwallet.com/linkdrop/' : 'https://app.mynearwallet.com/linkdrop/';
+
+ return (
+
+
+
+ Meteor Wallet
+
+
+
+ My Near Wallet
+
+
+ );
+};
+
+export default Wallets;
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/DefaultLayout.tsx
index 5407d5ab9..b88838daa 100644
--- a/src/components/layouts/DefaultLayout.tsx
+++ b/src/components/layouts/DefaultLayout.tsx
@@ -25,7 +25,7 @@ const Wrapper = styled.div<{
min-width: 0;
justify-content: stretch;
align-items: stretch;
- flex-direction: ${(p) => (p.$sidebar ? 'row' : 'column')};
+ flex-direction: row;
@media (max-width: ${SMALL_SCREEN_LAYOUT_MAX_WIDTH}px) {
--sidebar-width-expanded: 100vw;
diff --git a/src/components/tools/Linkdrops/ListTokenDrop.tsx b/src/components/tools/Linkdrops/ListTokenDrop.tsx
index 89a527945..86d29c666 100644
--- a/src/components/tools/Linkdrops/ListTokenDrop.tsx
+++ b/src/components/tools/Linkdrops/ListTokenDrop.tsx
@@ -1,7 +1,7 @@
import { Accordion, Badge, Button, copyTextToClipboard, Flex, Text, Title, Tooltip } from '@near-pagoda/ui';
import { Copy } from '@phosphor-icons/react';
-import { networkId } from '@/config';
+import { network } from '@/config';
import type { Drops } from '@/utils/types';
const getDropName = (drop: Drops) => {
@@ -37,11 +37,11 @@ const ListTokenDrop = ({ drops }: { drops: Drops[] }) => {