Fix: support more cryptos (#639)

* support more cryptos

* add icons

* update icons

* update locale

enjoy/src/api/client.ts

@@ -419,6 +419,7 @@ export class Client {
 
   createPayment(params: {
     amount: number;
+    reconciledCurrency: string;
     processor: string;
     paymentType: string;
   }): Promise<PaymentType> {

enjoy/src/i18n/en.json

@@ -593,5 +593,6 @@
   "areYouSureToSaveTranscription": "It will perform a force-alignment between the audio and your edited transcription. Are you sure to continue?",
   "summarize": "Summarize",
   "noResultsFound": "No results found",
-  "readThrough": "Read through"
+  "readThrough": "Read through",
+  "selectCrypto": "Select crypto"
 }

enjoy/src/i18n/zh-CN.json

@@ -593,5 +593,6 @@
   "areYouSureToSaveTranscription": "即将根据您修改后的语音文本对语音重新进行对齐，确定要继续吗？",
   "summarize": "提炼主题",
   "noResultsFound": "没有找到结果",
-  "readThrough": "朗读全文"
+  "readThrough": "朗读全文",
+  "selectCrypto": "选择加密货币"
 }

enjoy/src/renderer/components/preferences/balance-settings.tsx

@@ -19,6 +19,13 @@ import {
   TableHeader,
   TableRow,
   toast,
+  Separator,
+  Select,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectGroup,
 } from "@renderer/components/ui";
 import { LoaderSpin } from "@renderer/components";
 import { LoaderIcon } from "lucide-react";
@@ -31,6 +38,19 @@ export const BalanceSettings = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [paymentCreated, setPaymentCreated] = useState<boolean>(false);
   const [payments, setPayments] = useState<any[]>([]);
+  const [assests, setAssests] = useState<any[]>([]);
+  const [currency, setCurrency] = useState<string>("");
+
+  const fetchAssests = () => {
+    webApi
+      .config("supported_assets")
+      .then((assests) => {
+        setAssests(assests);
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      });
+  };
 
   const refreshPayments = () => {
     webApi
@@ -58,6 +78,7 @@ export const BalanceSettings = () => {
     webApi
       .createPayment({
         amount: depositAmount,
+        reconciledCurrency: processor === "stripe" ? "" : currency,
         paymentType: "deposit",
         processor,
       })
@@ -77,6 +98,7 @@ export const BalanceSettings = () => {
 
   useEffect(() => {
     refreshBalance();
+    fetchAssests();
   }, []);
 
   if (!balance) return null;
@@ -108,7 +130,7 @@ export const BalanceSettings = () => {
           </Button>
         </DialogTrigger>
 
-        <DialogContent>
+        <DialogContent className="max-h-full overflow-y-auto">
           <DialogHeader>
             <DialogTitle>{t("deposit")}</DialogTitle>
             <DialogDescription>{t("depositDescription")}</DialogDescription>
@@ -140,39 +162,84 @@ export const BalanceSettings = () => {
             </>
           )}
 
+          <Separator />
+
+          {user.hasMixin && (
+            <div className="flex items-center justify-between space-x-4">
+              <Select
+                value={currency}
+                onValueChange={(value) => setCurrency(value)}
+                disabled={paymentCreated || loading}
+              >
+                <SelectTrigger className="w-64">
+                  <SelectValue placeholder={t("selectCrypto")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {assests.map((asset) => (
+                      <SelectItem key={asset.id} value={asset.id}>
+                        <div className="flex items-center">
+                          <div className="w-6 h-6 relative mr-2">
+                            <img
+                              src={asset.iconUrl}
+                              className="w-full h-full"
+                            />
+                            {asset.chain && asset.chain.id !== asset.id && (
+                              <img
+                                src={asset.chain.iconUrl}
+                                className="absolute bottom-0 -left-1 w-3 h-3"
+                              />
+                            )}
+                          </div>
+                          <span>{asset.displaySymbol}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+
+              <Button
+                variant="default"
+                disabled={paymentCreated || loading}
+                className="w-32 bg-blue-500 hover:bg-blue-600 transition-colors duration-200 ease-in-out"
+                onClick={() => createDepositPayment("mixin")}
+              >
+                {loading && (
+                  <LoaderIcon className="w-4 h-4 mr-2 animate-spin" />
+                )}
+                <span>Mixin {t("pay")}</span>
+              </Button>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between space-x-4">
+            <div className="flex items-center w-64 justify-around">
+              <img src="assets/mastercard.png" className="w-auto h-8" />
+              <img src="assets/visa.png" className="w-auto h-8" />
+              <img src="assets/unionpay.png" className="w-auto h-8" />
+              <img src="assets/alipay.png" className="w-auto h-8" />
+              <img src="assets/wechatpay.png" className="w-auto h-8" />
+            </div>
+            <Button
+              className="w-32"
+              variant="default"
+              disabled={paymentCreated || loading}
+              onClick={() => createDepositPayment()}
+            >
+              {loading && <LoaderIcon className="w-4 h-4 mr-2 animate-spin" />}
+              <span>Stripe {t("pay")}</span>
+            </Button>
+          </div>
+
+          <Separator />
+
           <DialogFooter>
             <DialogClose asChild>
               <Button variant="secondary">
                 {paymentCreated ? t("finish") : t("cancel")}
               </Button>
             </DialogClose>
-            {paymentCreated ? null : (
-              <>
-                {user.hasMixin && (
-                  <Button
-                    variant="default"
-                    disabled={loading}
-                    className="bg-blue-500 hover:bg-blue-600 transition-colors duration-200 ease-in-out"
-                    onClick={() => createDepositPayment("mixin")}
-                  >
-                    {loading && (
-                      <LoaderIcon className="w-4 h-4 mr-2 animate-spin" />
-                    )}
-                    <span>Mixin {t('pay')}</span>
-                  </Button>
-                )}
-                <Button
-                  variant="default"
-                  disabled={loading}
-                  onClick={() => createDepositPayment()}
-                >
-                  {loading && (
-                    <LoaderIcon className="w-4 h-4 mr-2 animate-spin" />
-                  )}
-                  <span>{t("pay")}</span>
-                </Button>
-              </>
-            )}
           </DialogFooter>
 
           {payments.length > 0 && (