Cody Tseng
9 months ago
committed by
GitHub
43 changed files with 1466 additions and 47 deletions
@ -0,0 +1,140 @@ |
|||||||
|
import { |
||||||
|
EMAIL_REGEX, |
||||||
|
EMBEDDED_EVENT_REGEX, |
||||||
|
EMBEDDED_MENTION_REGEX, |
||||||
|
EMOJI_REGEX, |
||||||
|
HASHTAG_REGEX, |
||||||
|
URL_REGEX, |
||||||
|
WS_URL_REGEX |
||||||
|
} from '@/constants' |
||||||
|
import { useTranslatedEvent } from '@/hooks' |
||||||
|
import { isSupportedKind } from '@/lib/event' |
||||||
|
import { toTranslation } from '@/lib/link' |
||||||
|
import { cn } from '@/lib/utils' |
||||||
|
import { useSecondaryPage } from '@/PageManager' |
||||||
|
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||||
|
import { franc } from 'franc-min' |
||||||
|
import { Languages, Loader } from 'lucide-react' |
||||||
|
import { Event } from 'nostr-tools' |
||||||
|
import { useMemo, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import { toast } from 'sonner' |
||||||
|
|
||||||
|
export default function TranslateButton({ |
||||||
|
event, |
||||||
|
className |
||||||
|
}: { |
||||||
|
event: Event |
||||||
|
className?: string |
||||||
|
}) { |
||||||
|
const { i18n } = useTranslation() |
||||||
|
const { push } = useSecondaryPage() |
||||||
|
const { translate, showOriginalEvent } = useTranslationService() |
||||||
|
const [translating, setTranslating] = useState(false) |
||||||
|
const translatedEvent = useTranslatedEvent(event.id) |
||||||
|
const supported = useMemo(() => isSupportedKind(event.kind), [event]) |
||||||
|
|
||||||
|
const needTranslation = useMemo(() => { |
||||||
|
const cleanText = event.content |
||||||
|
.replace(URL_REGEX, '') |
||||||
|
.replace(WS_URL_REGEX, '') |
||||||
|
.replace(EMAIL_REGEX, '') |
||||||
|
.replace(EMBEDDED_MENTION_REGEX, '') |
||||||
|
.replace(EMBEDDED_EVENT_REGEX, '') |
||||||
|
.replace(HASHTAG_REGEX, '') |
||||||
|
.replace(EMOJI_REGEX, '') |
||||||
|
.trim() |
||||||
|
|
||||||
|
if (!cleanText) { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
const hasChinese = /[\u4e00-\u9fff]/.test(cleanText) |
||||||
|
const hasJapanese = /[\u3040-\u309f\u30a0-\u30ff]/.test(cleanText) |
||||||
|
const hasArabic = /[\u0600-\u06ff]/.test(cleanText) |
||||||
|
const hasRussian = /[\u0400-\u04ff]/.test(cleanText) |
||||||
|
|
||||||
|
if (hasJapanese) return i18n.language !== 'ja' |
||||||
|
if (hasChinese && !hasJapanese) return i18n.language !== 'zh' |
||||||
|
|
||||||
|
if (hasArabic) return i18n.language !== 'ar' |
||||||
|
if (hasRussian) return i18n.language !== 'ru' |
||||||
|
|
||||||
|
try { |
||||||
|
const detectedLang = franc(cleanText) |
||||||
|
const langMap: { [key: string]: string } = { |
||||||
|
ara: 'ar', // Arabic
|
||||||
|
deu: 'de', // German
|
||||||
|
eng: 'en', // English
|
||||||
|
spa: 'es', // Spanish
|
||||||
|
fra: 'fr', // French
|
||||||
|
ita: 'it', // Italian
|
||||||
|
jpn: 'ja', // Japanese
|
||||||
|
pol: 'pl', // Polish
|
||||||
|
por: 'pt', // Portuguese
|
||||||
|
rus: 'ru', // Russian
|
||||||
|
cmn: 'zh', // Chinese (Mandarin)
|
||||||
|
zho: 'zh' // Chinese (alternative code)
|
||||||
|
} |
||||||
|
|
||||||
|
const normalizedLang = langMap[detectedLang] |
||||||
|
if (!normalizedLang) { |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
return !i18n.language.startsWith(normalizedLang) |
||||||
|
} catch { |
||||||
|
return true |
||||||
|
} |
||||||
|
}, [event, i18n.language]) |
||||||
|
|
||||||
|
if (!supported || !needTranslation) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const handleTranslate = async () => { |
||||||
|
if (translating) return |
||||||
|
|
||||||
|
setTranslating(true) |
||||||
|
await translate(event) |
||||||
|
.catch((error) => { |
||||||
|
toast.error( |
||||||
|
'Translation failed: ' + (error.message || 'An error occurred while translating the note') |
||||||
|
) |
||||||
|
if (error.message === 'Insufficient balance.') { |
||||||
|
push(toTranslation()) |
||||||
|
} |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
setTranslating(false) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const showOriginal = () => { |
||||||
|
showOriginalEvent(event.id) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex items-center text-muted-foreground hover:text-pink-400 px-2 h-full disabled:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 transition-colors', |
||||||
|
className |
||||||
|
)} |
||||||
|
disabled={translating} |
||||||
|
onClick={(e) => { |
||||||
|
e.stopPropagation() |
||||||
|
if (translatedEvent) { |
||||||
|
showOriginal() |
||||||
|
} else { |
||||||
|
handleTranslate() |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
{translating ? ( |
||||||
|
<Loader className="animate-spin" /> |
||||||
|
) : ( |
||||||
|
<Languages className={translatedEvent ? 'text-pink-400 hover:text-pink-400/60' : ''} /> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||||
|
import { Event } from 'nostr-tools' |
||||||
|
import { useEffect, useMemo, useState } from 'react' |
||||||
|
|
||||||
|
export function useTranslatedEvent(eventId?: string) { |
||||||
|
const { translatedEventIdSet, getTranslatedEvent } = useTranslationService() |
||||||
|
const translated = useMemo(() => { |
||||||
|
return eventId ? translatedEventIdSet.has(eventId) : false |
||||||
|
}, [eventId, translatedEventIdSet]) |
||||||
|
const [translatedEvent, setTranslatedEvent] = useState<Event | null>(null) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (translated && eventId) { |
||||||
|
setTranslatedEvent(getTranslatedEvent(eventId)) |
||||||
|
} else { |
||||||
|
setTranslatedEvent(null) |
||||||
|
} |
||||||
|
}, [translated, eventId]) |
||||||
|
|
||||||
|
return translatedEvent |
||||||
|
} |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
import { Button } from '@/components/ui/button' |
||||||
|
import { Input } from '@/components/ui/input' |
||||||
|
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import { Check, Copy, Eye, EyeOff } from 'lucide-react' |
||||||
|
import { useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||||
|
import RegenerateApiKeyButton from './RegenerateApiKeyButton' |
||||||
|
import TopUp from './TopUp' |
||||||
|
|
||||||
|
export function AccountInfo() { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { pubkey, startLogin } = useNostr() |
||||||
|
const { account } = useJumbleTranslateAccount() |
||||||
|
const [showApiKey, setShowApiKey] = useState(false) |
||||||
|
const [copied, setCopied] = useState(false) |
||||||
|
|
||||||
|
if (!pubkey) { |
||||||
|
return ( |
||||||
|
<div className="w-full flex justify-center"> |
||||||
|
<Button onClick={() => startLogin()}>{t('Login')}</Button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="space-y-4"> |
||||||
|
{/* Balance display in characters */} |
||||||
|
<div className="space-y-2"> |
||||||
|
<p className="font-medium">{t('Balance')}</p> |
||||||
|
<div className="flex items-baseline gap-2"> |
||||||
|
<p className="text-3xl font-bold">{account?.balance.toLocaleString() ?? '0'}</p> |
||||||
|
<p className="text-muted-foreground">{t('characters')}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* API Key section with visibility toggle and copy functionality */} |
||||||
|
<div className="space-y-2"> |
||||||
|
<p className="font-medium">API key</p> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<Input |
||||||
|
type={showApiKey ? 'text' : 'password'} |
||||||
|
value={account?.api_key ?? ''} |
||||||
|
readOnly |
||||||
|
className="font-mono flex-1 max-w-fit" |
||||||
|
/> |
||||||
|
<Button variant="outline" onClick={() => setShowApiKey(!showApiKey)}> |
||||||
|
{showApiKey ? <Eye /> : <EyeOff />} |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
variant="outline" |
||||||
|
disabled={!account?.api_key} |
||||||
|
onClick={() => { |
||||||
|
if (!account?.api_key) return |
||||||
|
navigator.clipboard.writeText(account.api_key) |
||||||
|
setCopied(true) |
||||||
|
setTimeout(() => setCopied(false), 4000) |
||||||
|
}} |
||||||
|
> |
||||||
|
{copied ? <Check /> : <Copy />} |
||||||
|
</Button> |
||||||
|
<RegenerateApiKeyButton /> |
||||||
|
</div> |
||||||
|
<p className="text-sm text-muted-foreground select-text"> |
||||||
|
{t('jumbleTranslateApiKeyDescription', { |
||||||
|
serviceUrl: new URL('/v1/translation', JUMBLE_API_BASE_URL).toString() |
||||||
|
})} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<TopUp /> |
||||||
|
<div className="h-40" /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||||
|
import { TTranslationAccount } from '@/types' |
||||||
|
import { createContext, useContext, useEffect, useState } from 'react' |
||||||
|
import { toast } from 'sonner' |
||||||
|
|
||||||
|
type TJumbleTranslateAccountContext = { |
||||||
|
account: TTranslationAccount | null |
||||||
|
getAccount: () => Promise<void> |
||||||
|
regenerateApiKey: () => Promise<void> |
||||||
|
} |
||||||
|
|
||||||
|
export const JumbleTranslateAccountContext = createContext< |
||||||
|
TJumbleTranslateAccountContext | undefined |
||||||
|
>(undefined) |
||||||
|
|
||||||
|
export const useJumbleTranslateAccount = () => { |
||||||
|
const context = useContext(JumbleTranslateAccountContext) |
||||||
|
if (!context) { |
||||||
|
throw new Error( |
||||||
|
'useJumbleTranslateAccount must be used within a JumbleTranslateAccountProvider' |
||||||
|
) |
||||||
|
} |
||||||
|
return context |
||||||
|
} |
||||||
|
|
||||||
|
export function JumbleTranslateAccountProvider({ children }: { children: React.ReactNode }) { |
||||||
|
const { pubkey } = useNostr() |
||||||
|
const { getAccount: _getAccount, regenerateApiKey: _regenerateApiKey } = useTranslationService() |
||||||
|
const [account, setAccount] = useState<TTranslationAccount | null>(null) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setAccount(null) |
||||||
|
if (!pubkey) return |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
getAccount() |
||||||
|
}, 100) |
||||||
|
}, [pubkey]) |
||||||
|
|
||||||
|
const regenerateApiKey = async (): Promise<void> => { |
||||||
|
try { |
||||||
|
if (!account) { |
||||||
|
await getAccount() |
||||||
|
} |
||||||
|
const newApiKey = await _regenerateApiKey() |
||||||
|
if (newApiKey) { |
||||||
|
setAccount((prev) => { |
||||||
|
if (!prev) return prev |
||||||
|
return { |
||||||
|
...prev, |
||||||
|
api_key: newApiKey |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
toast.error( |
||||||
|
'Failed to regenerate Jumble translation API key: ' + |
||||||
|
(error instanceof Error |
||||||
|
? error.message |
||||||
|
: 'An error occurred while regenerating the API key') |
||||||
|
) |
||||||
|
setAccount(null) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getAccount = async (): Promise<void> => { |
||||||
|
try { |
||||||
|
const data = await _getAccount() |
||||||
|
if (data) { |
||||||
|
setAccount(data) |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
toast.error( |
||||||
|
'Failed to fetch Jumble translation account: ' + |
||||||
|
(error instanceof Error ? error.message : 'An error occurred while fetching the account') |
||||||
|
) |
||||||
|
setAccount(null) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<JumbleTranslateAccountContext.Provider value={{ account, getAccount, regenerateApiKey }}> |
||||||
|
{children} |
||||||
|
</JumbleTranslateAccountContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
import { Button } from '@/components/ui/button' |
||||||
|
import { |
||||||
|
Dialog, |
||||||
|
DialogContent, |
||||||
|
DialogDescription, |
||||||
|
DialogFooter, |
||||||
|
DialogHeader, |
||||||
|
DialogTitle, |
||||||
|
DialogTrigger |
||||||
|
} from '@/components/ui/dialog' |
||||||
|
import { Loader, RotateCcw } from 'lucide-react' |
||||||
|
import { useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||||
|
|
||||||
|
export default function RegenerateApiKeyButton() { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { account, regenerateApiKey } = useJumbleTranslateAccount() |
||||||
|
const [resettingApiKey, setResettingApiKey] = useState(false) |
||||||
|
const [showResetDialog, setShowResetDialog] = useState(false) |
||||||
|
|
||||||
|
const handleRegenerateApiKey = async () => { |
||||||
|
if (resettingApiKey || !account) return |
||||||
|
|
||||||
|
setResettingApiKey(true) |
||||||
|
await regenerateApiKey() |
||||||
|
setShowResetDialog(false) |
||||||
|
setResettingApiKey(false) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Dialog open={showResetDialog} onOpenChange={setShowResetDialog}> |
||||||
|
<DialogTrigger asChild> |
||||||
|
<Button variant="outline" disabled={!account?.api_key}> |
||||||
|
<RotateCcw /> |
||||||
|
</Button> |
||||||
|
</DialogTrigger> |
||||||
|
<DialogContent> |
||||||
|
<DialogHeader> |
||||||
|
<DialogTitle>{t('Reset API key')}</DialogTitle> |
||||||
|
<DialogDescription> |
||||||
|
{t('Are you sure you want to reset your API key? This action cannot be undone.')} |
||||||
|
<br /> |
||||||
|
<br /> |
||||||
|
<strong>{t('Warning')}:</strong>{' '} |
||||||
|
{t( |
||||||
|
'Your current API key will become invalid immediately, and any applications using it will stop working until you update them with the new key.' |
||||||
|
)} |
||||||
|
</DialogDescription> |
||||||
|
</DialogHeader> |
||||||
|
<DialogFooter> |
||||||
|
<Button |
||||||
|
variant="outline" |
||||||
|
onClick={() => setShowResetDialog(false)} |
||||||
|
disabled={resettingApiKey} |
||||||
|
> |
||||||
|
{t('Cancel')} |
||||||
|
</Button> |
||||||
|
<Button variant="destructive" onClick={handleRegenerateApiKey} disabled={resettingApiKey}> |
||||||
|
{resettingApiKey && <Loader className="animate-spin" />} |
||||||
|
{t('Reset API key')} |
||||||
|
</Button> |
||||||
|
</DialogFooter> |
||||||
|
</DialogContent> |
||||||
|
</Dialog> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
import { Button } from '@/components/ui/button' |
||||||
|
import { Input } from '@/components/ui/input' |
||||||
|
import { cn } from '@/lib/utils' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import transaction from '@/services/transaction.service' |
||||||
|
import { closeModal, launchPaymentModal } from '@getalby/bitcoin-connect-react' |
||||||
|
import { Loader } from 'lucide-react' |
||||||
|
import { useState } from 'react' |
||||||
|
import { toast } from 'sonner' |
||||||
|
import { useJumbleTranslateAccount } from './JumbleTranslateAccountProvider' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
|
||||||
|
export default function TopUp() { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { pubkey } = useNostr() |
||||||
|
const { getAccount } = useJumbleTranslateAccount() |
||||||
|
const [topUpLoading, setTopUpLoading] = useState(false) |
||||||
|
const [topUpAmount, setTopUpAmount] = useState(1000) |
||||||
|
const [selectedAmount, setSelectedAmount] = useState<number | null>(1000) |
||||||
|
|
||||||
|
const presetAmounts = [ |
||||||
|
{ amount: 1_000, text: '1k' }, |
||||||
|
{ amount: 5_000, text: '5k' }, |
||||||
|
{ amount: 10_000, text: '10k' }, |
||||||
|
{ amount: 25_000, text: '25k' }, |
||||||
|
{ amount: 50_000, text: '50k' }, |
||||||
|
{ amount: 100_000, text: '100k' } |
||||||
|
] |
||||||
|
const charactersPerUnit = 100 // 1 unit = 100 characters
|
||||||
|
|
||||||
|
const calculateCharacters = (amount: number) => { |
||||||
|
return amount * charactersPerUnit |
||||||
|
} |
||||||
|
|
||||||
|
const handlePresetClick = (amount: number) => { |
||||||
|
setSelectedAmount(amount) |
||||||
|
setTopUpAmount(amount) |
||||||
|
} |
||||||
|
|
||||||
|
const handleInputChange = (value: string) => { |
||||||
|
const numValue = parseInt(value) || 0 |
||||||
|
setTopUpAmount(numValue) |
||||||
|
setSelectedAmount(numValue >= 1000 ? numValue : null) |
||||||
|
} |
||||||
|
|
||||||
|
const handleTopUp = async (amount: number | null) => { |
||||||
|
if (topUpLoading || !pubkey || !amount || amount < 1000) return |
||||||
|
|
||||||
|
setTopUpLoading(true) |
||||||
|
try { |
||||||
|
const { transactionId, invoiceId } = await transaction.createTransaction(pubkey, amount) |
||||||
|
|
||||||
|
let checkPaymentInterval: ReturnType<typeof setInterval> | undefined = undefined |
||||||
|
const { setPaid } = launchPaymentModal({ |
||||||
|
invoice: invoiceId, |
||||||
|
onCancelled: () => { |
||||||
|
clearInterval(checkPaymentInterval) |
||||||
|
setTopUpLoading(false) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
let failedCount = 0 |
||||||
|
checkPaymentInterval = setInterval(async () => { |
||||||
|
try { |
||||||
|
const { state } = await transaction.checkTransaction(transactionId) |
||||||
|
if (state === 'pending') return |
||||||
|
|
||||||
|
clearInterval(checkPaymentInterval) |
||||||
|
setTopUpLoading(false) |
||||||
|
|
||||||
|
if (state === 'settled') { |
||||||
|
setPaid({ preimage: '' }) // Preimage is not returned, but we can assume payment is successful
|
||||||
|
getAccount() // Refresh account balance
|
||||||
|
} else { |
||||||
|
closeModal() |
||||||
|
toast.error('The invoice has expired or the payment was not successful') |
||||||
|
} |
||||||
|
} catch (err) { |
||||||
|
failedCount++ |
||||||
|
if (failedCount <= 3) return |
||||||
|
|
||||||
|
clearInterval(checkPaymentInterval) |
||||||
|
setTopUpLoading(false) |
||||||
|
toast.error( |
||||||
|
'Top up failed: ' + |
||||||
|
(err instanceof Error ? err.message : 'An error occurred while topping up') |
||||||
|
) |
||||||
|
} |
||||||
|
}, 2000) |
||||||
|
} catch (err) { |
||||||
|
setTopUpLoading(false) |
||||||
|
toast.error( |
||||||
|
'Top up failed: ' + |
||||||
|
(err instanceof Error ? err.message : 'An error occurred while topping up') |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="space-y-4"> |
||||||
|
<p className="font-medium">{t('Top up')}</p> |
||||||
|
|
||||||
|
{/* Preset amounts */} |
||||||
|
<div className="grid grid-cols-2 gap-2"> |
||||||
|
{presetAmounts.map(({ amount, text }) => ( |
||||||
|
<Button |
||||||
|
key={amount} |
||||||
|
variant="outline" |
||||||
|
onClick={() => handlePresetClick(amount)} |
||||||
|
className={cn( |
||||||
|
'flex flex-col h-auto py-3 hover:bg-primary/10', |
||||||
|
selectedAmount === amount && 'border border-primary bg-primary/10' |
||||||
|
)} |
||||||
|
> |
||||||
|
<span className="text-lg font-semibold"> |
||||||
|
{text} {t('sats')} |
||||||
|
</span> |
||||||
|
<span className="text-sm text-muted-foreground"> |
||||||
|
{calculateCharacters(amount).toLocaleString()} {t('characters')} |
||||||
|
</span> |
||||||
|
</Button> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Custom amount input */} |
||||||
|
<div className="space-y-2"> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<Input |
||||||
|
type="number" |
||||||
|
placeholder="Custom amount" |
||||||
|
value={topUpAmount} |
||||||
|
onChange={(e) => handleInputChange(e.target.value)} |
||||||
|
min={1000} |
||||||
|
step={1000} |
||||||
|
className="w-40" |
||||||
|
/> |
||||||
|
<span className="text-sm text-muted-foreground">{t('sats')}</span> |
||||||
|
</div> |
||||||
|
{selectedAmount && selectedAmount >= 1000 && ( |
||||||
|
<p className="text-sm text-muted-foreground"> |
||||||
|
{t('Will receive: {n} characters', { |
||||||
|
n: calculateCharacters(selectedAmount).toLocaleString() |
||||||
|
})} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<Button |
||||||
|
className="w-full" |
||||||
|
disabled={topUpLoading || !selectedAmount || selectedAmount < 1000} |
||||||
|
onClick={() => handleTopUp(selectedAmount)} |
||||||
|
> |
||||||
|
{topUpLoading && <Loader className="animate-spin" />} |
||||||
|
{selectedAmount && selectedAmount >= 1000 |
||||||
|
? t('Top up {n} sats', { |
||||||
|
n: selectedAmount?.toLocaleString() |
||||||
|
}) |
||||||
|
: t('Minimum top up is {n} sats', { |
||||||
|
n: new Number(1000).toLocaleString() |
||||||
|
})} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import { AccountInfo } from './AccountInfo' |
||||||
|
import { JumbleTranslateAccountProvider } from './JumbleTranslateAccountProvider' |
||||||
|
|
||||||
|
export default function JumbleTranslate() { |
||||||
|
return ( |
||||||
|
<JumbleTranslateAccountProvider> |
||||||
|
<AccountInfo /> |
||||||
|
</JumbleTranslateAccountProvider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
import { Input } from '@/components/ui/input' |
||||||
|
import { Label } from '@/components/ui/label' |
||||||
|
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||||
|
import { useEffect, useRef, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
|
||||||
|
export default function LibreTranslate() { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { config, updateConfig } = useTranslationService() |
||||||
|
const [server, setServer] = useState( |
||||||
|
config.service === 'libre_translate' ? (config.server ?? '') : '' |
||||||
|
) |
||||||
|
const [apiKey, setApiKey] = useState( |
||||||
|
config.service === 'libre_translate' ? (config.api_key ?? '') : '' |
||||||
|
) |
||||||
|
const initialized = useRef(false) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!initialized.current) { |
||||||
|
initialized.current = true |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
updateConfig({ |
||||||
|
service: 'libre_translate', |
||||||
|
server, |
||||||
|
api_key: apiKey |
||||||
|
}) |
||||||
|
}, [server, apiKey]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="space-y-4"> |
||||||
|
<div className="space-y-2"> |
||||||
|
<Label htmlFor="libre-translate-server" className="text-base"> |
||||||
|
{t('Service address')} |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
id="libre-translate-server" |
||||||
|
type="text" |
||||||
|
value={server} |
||||||
|
onChange={(e) => setServer(e.target.value)} |
||||||
|
placeholder="Enter server address" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="space-y-2"> |
||||||
|
<Label htmlFor="libre-translate-api-key" className="text-base"> |
||||||
|
API key |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
id="libre-translate-api-key" |
||||||
|
type="text" |
||||||
|
value={apiKey} |
||||||
|
onChange={(e) => setApiKey(e.target.value)} |
||||||
|
placeholder="Enter API Key" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
import { Label } from '@/components/ui/label' |
||||||
|
import { |
||||||
|
Select, |
||||||
|
SelectContent, |
||||||
|
SelectItem, |
||||||
|
SelectTrigger, |
||||||
|
SelectValue |
||||||
|
} from '@/components/ui/select' |
||||||
|
import { LocalizedLanguageNames } from '@/i18n' |
||||||
|
import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' |
||||||
|
import { useTranslationService } from '@/providers/TranslationServiceProvider' |
||||||
|
import { TLanguage } from '@/types' |
||||||
|
import { forwardRef, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import JumbleTranslate from './JumbleTranslate' |
||||||
|
import LibreTranslate from './LibreTranslate' |
||||||
|
|
||||||
|
const TranslationPage = forwardRef(({ index }: { index?: number }, ref) => { |
||||||
|
const { t, i18n } = useTranslation() |
||||||
|
const { config, updateConfig } = useTranslationService() |
||||||
|
const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage) |
||||||
|
|
||||||
|
const handleLanguageChange = (value: TLanguage) => { |
||||||
|
i18n.changeLanguage(value) |
||||||
|
setLanguage(value) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<SecondaryPageLayout ref={ref} index={index} title={t('Translation')}> |
||||||
|
<div className="px-4 pt-2 space-y-4"> |
||||||
|
<div className="space-y-2"> |
||||||
|
<Label htmlFor="languages" className="text-base font-medium"> |
||||||
|
{t('Languages')} |
||||||
|
</Label> |
||||||
|
<Select defaultValue="en" value={language} onValueChange={handleLanguageChange}> |
||||||
|
<SelectTrigger id="languages" className="w-48"> |
||||||
|
<SelectValue /> |
||||||
|
</SelectTrigger> |
||||||
|
<SelectContent> |
||||||
|
{Object.entries(LocalizedLanguageNames).map(([key, value]) => ( |
||||||
|
<SelectItem key={key} value={key}> |
||||||
|
{value} |
||||||
|
</SelectItem> |
||||||
|
))} |
||||||
|
</SelectContent> |
||||||
|
</Select> |
||||||
|
</div> |
||||||
|
<div className="space-y-2"> |
||||||
|
<Label htmlFor="translation-service-select" className="text-base font-medium"> |
||||||
|
{t('Service')} |
||||||
|
</Label> |
||||||
|
<Select |
||||||
|
defaultValue={config.service} |
||||||
|
value={config.service} |
||||||
|
onValueChange={(newService) => { |
||||||
|
updateConfig({ service: newService as 'jumble' | 'libre_translate' }) |
||||||
|
}} |
||||||
|
> |
||||||
|
<SelectTrigger id="translation-service-select" className="w-[180px]"> |
||||||
|
<SelectValue placeholder={t('Select Translation Service')} /> |
||||||
|
</SelectTrigger> |
||||||
|
<SelectContent> |
||||||
|
<SelectItem value="jumble">Jumble</SelectItem> |
||||||
|
<SelectItem value="libre_translate">LibreTranslate</SelectItem> |
||||||
|
</SelectContent> |
||||||
|
</Select> |
||||||
|
</div> |
||||||
|
{config.service === 'jumble' ? <JumbleTranslate /> : <LibreTranslate />} |
||||||
|
</div> |
||||||
|
</SecondaryPageLayout> |
||||||
|
) |
||||||
|
}) |
||||||
|
TranslationPage.displayName = 'TranslationPage' |
||||||
|
export default TranslationPage |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
import libreTranslate from '@/services/libre-translate.service' |
||||||
|
import storage from '@/services/local-storage.service' |
||||||
|
import translation from '@/services/translation.service' |
||||||
|
import { TTranslationAccount, TTranslationServiceConfig } from '@/types' |
||||||
|
import { Event, kinds } from 'nostr-tools' |
||||||
|
import { createContext, useContext, useEffect, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import { useNostr } from './NostrProvider' |
||||||
|
|
||||||
|
const translatedEventCache: Record<string, Event> = {} |
||||||
|
|
||||||
|
type TTranslationServiceContext = { |
||||||
|
config: TTranslationServiceConfig |
||||||
|
translatedEventIdSet: Set<string> |
||||||
|
translate: (event: Event) => Promise<Event | void> |
||||||
|
getTranslatedEvent: (eventId: string) => Event | null |
||||||
|
showOriginalEvent: (eventId: string) => void |
||||||
|
getAccount: () => Promise<TTranslationAccount | void> |
||||||
|
regenerateApiKey: () => Promise<string | undefined> |
||||||
|
updateConfig: (newConfig: TTranslationServiceConfig) => void |
||||||
|
} |
||||||
|
|
||||||
|
const TranslationServiceContext = createContext<TTranslationServiceContext | undefined>(undefined) |
||||||
|
|
||||||
|
export const useTranslationService = () => { |
||||||
|
const context = useContext(TranslationServiceContext) |
||||||
|
if (!context) { |
||||||
|
throw new Error('useTranslation must be used within a TranslationProvider') |
||||||
|
} |
||||||
|
return context |
||||||
|
} |
||||||
|
|
||||||
|
export function TranslationServiceProvider({ children }: { children: React.ReactNode }) { |
||||||
|
const { i18n } = useTranslation() |
||||||
|
const [config, setConfig] = useState<TTranslationServiceConfig>({ service: 'jumble' }) |
||||||
|
const { pubkey, startLogin } = useNostr() |
||||||
|
const [translatedEventIdSet, setTranslatedEventIdSet] = useState<Set<string>>(new Set()) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
translation.changeCurrentPubkey(pubkey) |
||||||
|
const config = storage.getTranslationServiceConfig(pubkey) |
||||||
|
setConfig(config) |
||||||
|
}, [pubkey]) |
||||||
|
|
||||||
|
const getAccount = async (): Promise<TTranslationAccount | void> => { |
||||||
|
if (config.service !== 'jumble') return |
||||||
|
if (!pubkey) { |
||||||
|
startLogin() |
||||||
|
return |
||||||
|
} |
||||||
|
return await translation.getAccount() |
||||||
|
} |
||||||
|
|
||||||
|
const regenerateApiKey = async (): Promise<string | undefined> => { |
||||||
|
if (config.service !== 'jumble') return |
||||||
|
if (!pubkey) { |
||||||
|
startLogin() |
||||||
|
return |
||||||
|
} |
||||||
|
return await translation.regenerateApiKey() |
||||||
|
} |
||||||
|
|
||||||
|
const getTranslatedEvent = (eventId: string): Event | null => { |
||||||
|
const target = i18n.language |
||||||
|
const cacheKey = eventId + '_' + target |
||||||
|
return translatedEventCache[cacheKey] ?? null |
||||||
|
} |
||||||
|
|
||||||
|
const translate = async (event: Event): Promise<Event | void> => { |
||||||
|
if (config.service === 'jumble' && !pubkey) { |
||||||
|
startLogin() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const target = i18n.language |
||||||
|
const cacheKey = event.id + '_' + target |
||||||
|
if (translatedEventCache[cacheKey]) { |
||||||
|
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||||
|
return translatedEventCache[cacheKey] |
||||||
|
} |
||||||
|
|
||||||
|
if (event.kind === kinds.Highlights) { |
||||||
|
const comment = event.tags.find((tag) => tag[0] === 'comment')?.[1] |
||||||
|
const [translatedContent, translatedComment] = await Promise.all([ |
||||||
|
config.service === 'jumble' |
||||||
|
? await translation.translate(event.content, target) |
||||||
|
: await libreTranslate.translate(event.content, target, config.server, config.api_key), |
||||||
|
!!comment && |
||||||
|
(config.service === 'jumble' |
||||||
|
? await translation.translate(comment, target) |
||||||
|
: await libreTranslate.translate(comment, target, config.server, config.api_key)) |
||||||
|
]) |
||||||
|
|
||||||
|
if (!translatedContent) { |
||||||
|
return |
||||||
|
} |
||||||
|
const translatedEvent: Event = { |
||||||
|
...event, |
||||||
|
content: translatedContent |
||||||
|
} |
||||||
|
if (translatedComment) { |
||||||
|
translatedEvent.tags = event.tags.map((tag) => |
||||||
|
tag[0] === 'comment' ? ['comment', translatedComment] : tag |
||||||
|
) |
||||||
|
} |
||||||
|
translatedEventCache[cacheKey] = translatedEvent |
||||||
|
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||||
|
return translatedEvent |
||||||
|
} |
||||||
|
|
||||||
|
const translatedText = |
||||||
|
config.service === 'jumble' |
||||||
|
? await translation.translate(event.content, target) |
||||||
|
: await libreTranslate.translate(event.content, target, config.server, config.api_key) |
||||||
|
if (!translatedText) { |
||||||
|
return |
||||||
|
} |
||||||
|
const translatedEvent: Event = { ...event, content: translatedText } |
||||||
|
translatedEventCache[cacheKey] = translatedEvent |
||||||
|
setTranslatedEventIdSet((prev) => new Set(prev.add(event.id))) |
||||||
|
return translatedEvent |
||||||
|
} |
||||||
|
|
||||||
|
const showOriginalEvent = (eventId: string) => { |
||||||
|
setTranslatedEventIdSet((prev) => { |
||||||
|
const newSet = new Set(prev) |
||||||
|
newSet.delete(eventId) |
||||||
|
return newSet |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const updateConfig = (newConfig: TTranslationServiceConfig) => { |
||||||
|
setConfig(newConfig) |
||||||
|
storage.setTranslationServiceConfig(newConfig, pubkey) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<TranslationServiceContext.Provider |
||||||
|
value={{ |
||||||
|
config, |
||||||
|
translatedEventIdSet, |
||||||
|
getAccount, |
||||||
|
regenerateApiKey, |
||||||
|
translate, |
||||||
|
getTranslatedEvent, |
||||||
|
showOriginalEvent, |
||||||
|
updateConfig |
||||||
|
}} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</TranslationServiceContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
class LibreTranslateService { |
||||||
|
static instance: LibreTranslateService |
||||||
|
|
||||||
|
constructor() { |
||||||
|
if (!LibreTranslateService.instance) { |
||||||
|
LibreTranslateService.instance = this |
||||||
|
} |
||||||
|
return LibreTranslateService.instance |
||||||
|
} |
||||||
|
|
||||||
|
async translate( |
||||||
|
text: string, |
||||||
|
target: string, |
||||||
|
server?: string, |
||||||
|
api_key?: string |
||||||
|
): Promise<string | undefined> { |
||||||
|
if (!server) { |
||||||
|
throw new Error('LibreTranslate server address is not configured') |
||||||
|
} |
||||||
|
const url = new URL('/translate', server).toString() |
||||||
|
const response = await fetch(url, { |
||||||
|
method: 'POST', |
||||||
|
headers: { 'Content-Type': 'application/json' }, |
||||||
|
body: JSON.stringify({ q: text, target, source: 'auto', api_key }) |
||||||
|
}) |
||||||
|
const data = await response.json() |
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(data.error ?? 'Failed to translate') |
||||||
|
} |
||||||
|
return data.translatedText |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const instance = new LibreTranslateService() |
||||||
|
export default instance |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||||
|
|
||||||
|
class TransactionService { |
||||||
|
static instance: TransactionService |
||||||
|
|
||||||
|
constructor() { |
||||||
|
if (!TransactionService.instance) { |
||||||
|
TransactionService.instance = this |
||||||
|
} |
||||||
|
return TransactionService.instance |
||||||
|
} |
||||||
|
|
||||||
|
async createTransaction( |
||||||
|
pubkey: string, |
||||||
|
amount: number |
||||||
|
): Promise<{ |
||||||
|
transactionId: string |
||||||
|
invoiceId: string |
||||||
|
}> { |
||||||
|
const url = new URL('/v1/transactions', JUMBLE_API_BASE_URL).toString() |
||||||
|
const response = await fetch(url, { |
||||||
|
method: 'POST', |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json' |
||||||
|
}, |
||||||
|
body: JSON.stringify({ |
||||||
|
pubkey, |
||||||
|
amount, |
||||||
|
purpose: 'translation' |
||||||
|
}) |
||||||
|
}) |
||||||
|
const data = await response.json() |
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(data.error ?? 'Failed to create transaction') |
||||||
|
} |
||||||
|
return data |
||||||
|
} |
||||||
|
|
||||||
|
async checkTransaction(transactionId: string): Promise<{ |
||||||
|
state: 'pending' | 'failed' | 'settled' |
||||||
|
}> { |
||||||
|
const url = new URL(`/v1/transactions/${transactionId}/check`, JUMBLE_API_BASE_URL).toString() |
||||||
|
const response = await fetch(url, { |
||||||
|
method: 'POST' |
||||||
|
}) |
||||||
|
const data = await response.json() |
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(data.error ?? 'Failed to complete transaction') |
||||||
|
} |
||||||
|
return data |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const instance = new TransactionService() |
||||||
|
export default instance |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
import { JUMBLE_API_BASE_URL } from '@/constants' |
||||||
|
import client from '@/services/client.service' |
||||||
|
import { TTranslationAccount } from '@/types' |
||||||
|
|
||||||
|
class TranslationService { |
||||||
|
static instance: TranslationService |
||||||
|
|
||||||
|
private apiKeyMap: Record<string, string | undefined> = {} |
||||||
|
private currentPubkey: string | null = null |
||||||
|
|
||||||
|
constructor() { |
||||||
|
if (!TranslationService.instance) { |
||||||
|
TranslationService.instance = this |
||||||
|
} |
||||||
|
return TranslationService.instance |
||||||
|
} |
||||||
|
|
||||||
|
async getAccount(): Promise<TTranslationAccount> { |
||||||
|
if (!this.currentPubkey) { |
||||||
|
throw new Error('Please login first') |
||||||
|
} |
||||||
|
const apiKey = this.apiKeyMap[this.currentPubkey] |
||||||
|
const path = '/v1/translation/account' |
||||||
|
const method = 'GET' |
||||||
|
let auth: string | undefined |
||||||
|
if (!apiKey) { |
||||||
|
auth = await client.signHttpAuth( |
||||||
|
new URL(path, JUMBLE_API_BASE_URL).toString(), |
||||||
|
method, |
||||||
|
'Auth to get Jumble translation service account' |
||||||
|
) |
||||||
|
} |
||||||
|
const act = await this._fetch<TTranslationAccount>({ |
||||||
|
path, |
||||||
|
method, |
||||||
|
auth, |
||||||
|
retryWhenUnauthorized: !auth |
||||||
|
}) |
||||||
|
|
||||||
|
if (act.api_key && act.pubkey) { |
||||||
|
this.apiKeyMap[act.pubkey] = act.api_key |
||||||
|
} |
||||||
|
|
||||||
|
return act |
||||||
|
} |
||||||
|
|
||||||
|
async regenerateApiKey(): Promise<string> { |
||||||
|
try { |
||||||
|
const data = await this._fetch({ |
||||||
|
path: '/v1/translation/regenerate-api-key', |
||||||
|
method: 'POST' |
||||||
|
}) |
||||||
|
if (data.api_key && this.currentPubkey) { |
||||||
|
this.apiKeyMap[this.currentPubkey] = data.api_key |
||||||
|
} |
||||||
|
return data.api_key |
||||||
|
} catch (error) { |
||||||
|
const errMsg = error instanceof Error ? error.message : '' |
||||||
|
throw new Error(errMsg || 'Failed to regenerate API key') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async translate(text: string, target: string): Promise<string | undefined> { |
||||||
|
try { |
||||||
|
const data = await this._fetch({ |
||||||
|
path: '/v1/translation/translate', |
||||||
|
method: 'POST', |
||||||
|
body: JSON.stringify({ q: text, target }) |
||||||
|
}) |
||||||
|
return data.translatedText |
||||||
|
} catch (error) { |
||||||
|
const errMsg = error instanceof Error ? error.message : '' |
||||||
|
throw new Error(errMsg || 'Failed to translate') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
changeCurrentPubkey(pubkey: string | null): void { |
||||||
|
this.currentPubkey = pubkey |
||||||
|
} |
||||||
|
|
||||||
|
private async _fetch<T = any>({ |
||||||
|
path, |
||||||
|
method, |
||||||
|
body, |
||||||
|
auth, |
||||||
|
retryWhenUnauthorized = true |
||||||
|
}: { |
||||||
|
path: string |
||||||
|
method: string |
||||||
|
body?: string |
||||||
|
auth?: string |
||||||
|
retryWhenUnauthorized?: boolean |
||||||
|
}): Promise<T> { |
||||||
|
if (!this.currentPubkey) { |
||||||
|
throw new Error('Please login first') |
||||||
|
} |
||||||
|
const apiKey = this.apiKeyMap[this.currentPubkey] |
||||||
|
const hasApiKey = !!apiKey |
||||||
|
let _auth: string |
||||||
|
if (auth) { |
||||||
|
_auth = auth |
||||||
|
} else if (hasApiKey) { |
||||||
|
_auth = `Bearer ${apiKey}` |
||||||
|
} else { |
||||||
|
const act = await this.getAccount() |
||||||
|
_auth = `Bearer ${act.api_key}` |
||||||
|
} |
||||||
|
|
||||||
|
const url = new URL(path, JUMBLE_API_BASE_URL).toString() |
||||||
|
const response = await fetch(url, { |
||||||
|
method, |
||||||
|
headers: { 'Content-Type': 'application/json', Authorization: _auth }, |
||||||
|
body |
||||||
|
}) |
||||||
|
|
||||||
|
const data = await response.json() |
||||||
|
if (!response.ok) { |
||||||
|
if (data.code === '00403' && hasApiKey && retryWhenUnauthorized) { |
||||||
|
this.apiKeyMap[this.currentPubkey] = undefined |
||||||
|
return this._fetch({ path, method, body, retryWhenUnauthorized: false }) |
||||||
|
} |
||||||
|
throw new Error(data.error) |
||||||
|
} |
||||||
|
return data |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const instance = new TranslationService() |
||||||
|
export default instance |
||||||
Loading…
Reference in new issue