Allow specifying the logo when submitting 'Add Token' proposals

frontend/app/src/components/home/MakeProposalModal.svelte

@@ -11,7 +11,7 @@
         type OpenChat,
         type Treasury,
     } from "openchat-client";
-    import { isPrincipalValid, isSubAccountValid } from "openchat-shared";
+    import { isPrincipalValid, isSubAccountValid, isUrl } from "openchat-shared";
     import { iconSize } from "../../stores/iconSize";
     import Button from "../Button.svelte";
     import Legend from "../Legend.svelte";
@@ -88,6 +88,7 @@
     $: addTokenHowToBuyUrl = "";
     $: addTokenInfoUrl = "";
     $: addTokenTransactionUrlFormat = "";
+    $: addTokenLogo = "";
     $: valid =
         !insufficientFunds &&
         titleValid &&
@@ -102,7 +103,8 @@
             (selectedProposalType === "add_token" &&
                 isPrincipalValid(addTokenLedgerCanisterId) &&
                 addTokenHowToBuyUrl.length > 0 &&
-                addTokenTransactionUrlFormat.length > 0));
+                addTokenTransactionUrlFormat.length > 0 &&
+                isTokenLogoValid(addTokenLogo)));
     $: canSubmit =
         step === 2 ||
         (step === 1 &&
@@ -187,6 +189,7 @@
                         addTokenInfoUrl,
                         addTokenHowToBuyUrl,
                         addTokenTransactionUrlFormat,
+                        addTokenLogo,
                     ),
                 };
             }
@@ -228,6 +231,10 @@
 
 > Submitted by [@${$user.username}](https://oc.app/user/${$user.userId}) on [OpenChat](https://oc.app${groupPath})`;
     }
+
+    function isTokenLogoValid(logo: string): boolean {
+        return logo.length === 0 || isUrl(logo);
+    }
 </script>
 
 <ModalContent bind:actualWidth fill>
@@ -432,6 +439,16 @@
                                 bind:value={addTokenTransactionUrlFormat}
                                 placeholder={$_("proposal.maker.enterTransactionUrlFormat")} />
                         </section>
+                        <section>
+                            <Legend label={$_("proposal.maker.tokenLogo")} />
+                            <Input
+                                disabled={busy}
+                                invalid={!isTokenLogoValid(addTokenLogo)}
+                                minlength={0}
+                                maxlength={5000}
+                                bind:value={addTokenLogo}
+                                placeholder={"data:image/svg+xml;base64,PHN2ZyB3aW..."} />
+                        </section>
                     </div>
                 {/if}
             </div>

frontend/app/src/i18n/cn.json

@@ -666,7 +666,8 @@
             "howToBuyUrl": "如何购买网址",
             "enterHowToBuyUrl": "输入显示如何购买代币的网址",
             "transactionUrlFormat": "交易url格式",
-            "enterTransactionUrlFormat": "例如。 https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "例如。 https://token.com/?index={transaction_index}",
+            "tokenLogo": "标识"
         },
         "neuronControllerAction": "神经元控制器动作"
     },

frontend/app/src/i18n/de.json

@@ -670,7 +670,8 @@
             "howToBuyUrl": "So kaufen Sie eine URL",
             "enterHowToBuyUrl": "Geben Sie eine URL ein, die zeigt, wie Sie den Token kaufen können",
             "transactionUrlFormat": "Transaktions-URL-Format",
-            "enterTransactionUrlFormat": "Z.B. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Z.B. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         },
         "neuronControllerAction": "Neuron-Controller-Aktionen"
     },

frontend/app/src/i18n/en.json

@@ -816,7 +816,8 @@
             "howToBuyUrl": "How to buy url",
             "enterHowToBuyUrl": "Enter a url showing how to buy the token",
             "transactionUrlFormat": "Transaction url format",
-            "enterTransactionUrlFormat": "Eg. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Eg. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         }
     },
     "yes": "Yes",

frontend/app/src/i18n/es.json

@@ -668,7 +668,8 @@
             "howToBuyUrl": "como comprar URL",
             "enterHowToBuyUrl": "Ingrese una URL que muestre cómo comprar el token.",
             "transactionUrlFormat": "Formato de URL de transacción",
-            "enterTransactionUrlFormat": "P.ej. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "P.ej. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         },
         "neuronControllerAction": "Acciones del controlador de neuronas"
     },

frontend/app/src/i18n/fr.json

@@ -666,7 +666,8 @@
             "howToBuyUrl": "Comment acheter une URL",
             "enterHowToBuyUrl": "Entrez une URL montrant comment acheter le jeton",
             "transactionUrlFormat": "Format de l'URL de la transaction",
-            "enterTransactionUrlFormat": "Par exemple. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Par exemple. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         },
         "neuronControllerAction": "Actions du contrôleur de neurones"
     },

frontend/app/src/i18n/it.json

@@ -666,7 +666,8 @@
             "howToBuyUrl": "Come acquistare l'URL",
             "enterHowToBuyUrl": "Inserisci un URL che mostri come acquistare il token",
             "transactionUrlFormat": "Formato dell'URL della transazione",
-            "enterTransactionUrlFormat": "Per esempio. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Per esempio. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         },
         "neuronControllerAction": "Azioni del controller neuronale"
     },

frontend/app/src/i18n/iw.json

@@ -664,7 +664,8 @@
             "howToBuyUrl": "איך לקנות כתובת אתר",
             "enterHowToBuyUrl": "הזן כתובת אתר שמראה כיצד לקנות את האסימון",
             "transactionUrlFormat": "פורמט כתובת האתר של העסקה",
-            "enterTransactionUrlFormat": "לְמָשָׁל. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "לְמָשָׁל. https://token.com/?index={transaction_index}",
+            "tokenLogo": "סֵמֶל"
         },
         "neuronControllerAction": "פעולות בקר נוירון"
     },

frontend/app/src/i18n/jp.json

@@ -666,7 +666,8 @@
             "howToBuyUrl": "購入方法URL",
             "enterHowToBuyUrl": "トークンの購入方法を示す URL を入力してください",
             "transactionUrlFormat": "トランザクションURL形式",
-            "enterTransactionUrlFormat": "例えば。 https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "例えば。 https://token.com/?index={transaction_index}",
+            "tokenLogo": "ロゴ"
         },
         "neuronControllerAction": "ニューロン コントローラーのアクション"
     },

frontend/app/src/i18n/ru.json

@@ -666,7 +666,8 @@
             "howToBuyUrl": "Как купить URL",
             "enterHowToBuyUrl": "Введите URL-адрес, показывающий, как купить токен",
             "transactionUrlFormat": "Формат URL транзакции",
-            "enterTransactionUrlFormat": "Например. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Например. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Логотип"
         },
         "neuronControllerAction": "Действия нейронного контроллера"
     },

frontend/app/src/i18n/vi.json

@@ -667,7 +667,8 @@
             "howToBuyUrl": "Làm thế nào để mua url",
             "enterHowToBuyUrl": "Nhập url hiển thị cách mua mã thông báo",
             "transactionUrlFormat": "Định dạng url giao dịch",
-            "enterTransactionUrlFormat": "Ví dụ. https://token.com/?index={transaction_index}"
+            "enterTransactionUrlFormat": "Ví dụ. https://token.com/?index={transaction_index}",
+            "tokenLogo": "Logo"
         },
         "neuronControllerAction": "Hành động điều khiển nơ-ron"
     },

frontend/app/src/utils/sns.ts

@@ -8,6 +8,7 @@ export function createAddTokenPayload(
     infoUrl: string,
     howToBuyUrl: string,
     transactionUrlFormat: string,
+    logo: string | undefined,
 ): Uint8Array {
     return new Uint8Array(
         IDL.encode(
@@ -25,7 +26,7 @@ export function createAddTokenPayload(
                 {
                     how_to_buy_url: howToBuyUrl,
                     info_url: infoUrl,
-                    logo: [],
+                    logo: logo !== undefined && logo.length > 0 ? [logo] : [],
                     token_standard: { icrc1: null },
                     ledger_canister_id: Principal.fromText(ledgerCanisterId),
                     transaction_url_format: transactionUrlFormat,

frontend/openchat-shared/src/utils/string.ts

@@ -29,3 +29,12 @@ export function isAccountIdentifierValid(text: string): boolean {
 export function isHexString(text: string): boolean {
     return HEX_REGEX.test(text);
 }
+
+export function isUrl(text: string): boolean {
+    try {
+        new URL(text);
+        return true;
+    } catch {
+        return false;
+    }
+}