117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
|
|
import { Clipboard, Phone } from "lucide-react";
|
|
import { Card } from "@/components/ui/card";
|
|
import { useEffect, useState } from "react";
|
|
import { parsePhoneNumberFromString } from 'libphonenumber-js';
|
|
|
|
interface PhoneNumber {
|
|
id: string;
|
|
number: string;
|
|
status: "active" | "inactive";
|
|
}
|
|
|
|
const list = [
|
|
{
|
|
"activationId": "3336974038",
|
|
"serviceCode": "fb",
|
|
"phoneNumber": "19892798946",
|
|
"activationCost": 0.225,
|
|
"activationStatus": "4",
|
|
"activationTime": "2025-03-03 19:22:40",
|
|
"countryCode": "187",
|
|
"countryName": "USA",
|
|
"canGetAnotherSms": "1",
|
|
"currency": 840,
|
|
"smsCode": 64744,
|
|
"smsText": null,
|
|
"discount": "0",
|
|
"repeated": "0"
|
|
}
|
|
]
|
|
|
|
export function PhoneNumberList() {
|
|
|
|
const [numberList, setNumberList] = useState([])
|
|
|
|
const fetchNumberList = async () => {
|
|
try {
|
|
const myHeaders = new Headers({
|
|
"Origin": window.location.origin,
|
|
"x-requested-with": "XMLHttpRequest"
|
|
});
|
|
|
|
const requestOptions = {
|
|
method: "GET",
|
|
headers: myHeaders
|
|
};
|
|
|
|
const corsProxy = "https://cors-anywhere.herokuapp.com/";
|
|
const apiUrl = "https://api.sms-activate.ae/stubs/handler_api.php?api_key=3e70A03f3dA6bfb2b32b2cc09Adb6841&action=getActiveActivations";
|
|
const response = await fetch(corsProxy + apiUrl, requestOptions)
|
|
const data = await response.json()
|
|
console.log(data)
|
|
setNumberList(data?.activeActivations || [])
|
|
} catch (error) {
|
|
console.error("Error fetching phone numbers:", error)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchNumberList()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="space-y-4 p-4 animate-fadeIn">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-semibold tracking-tight">Phone Numbers</h2>
|
|
<span className="text-sm text-muted-foreground">
|
|
{numberList.length} numbers
|
|
</span>
|
|
</div>
|
|
<div className="grid gap-4">
|
|
{numberList.map((number) => (
|
|
<Card
|
|
key={number.activationId}
|
|
className="p-4 transition-all hover:shadow-md cursor-pointer group"
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-colors">
|
|
<Phone className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-medium flex" onClick={() => navigator.clipboard.writeText(number.phoneNumber.toString())}>
|
|
{parsePhoneNumberFromString(number.phoneNumber)?.formatInternational() || number.phoneNumber}
|
|
<Clipboard className="ml-2 h-4 w-4 text-black " />
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Status:{" "}
|
|
<span
|
|
className={
|
|
number.activationStatus === "4"
|
|
? "text-green-500"
|
|
: "text-red-500"
|
|
}
|
|
>
|
|
{number.activationStatus}
|
|
</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground flex gap-1">
|
|
OTP:
|
|
<span
|
|
className="text-green-500 cursor-pointer flex"
|
|
onClick={() => navigator.clipboard.writeText(number.smsCode.toString())}
|
|
title="Click to copy"
|
|
>
|
|
{ " " + number.smsCode}
|
|
<Clipboard className="ml-2 h-4 w-4 text-black " />
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|