feat: website internationalization (#153)

---------

Co-authored-by: Martin Domajnko <[email protected]>
Co-authored-by: martines3000 <[email protected]>

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -8,7 +8,7 @@ body:
     attributes:
       label: Describe the bug
       description: A clear and concise description of what the bug is.
-      placeholder: "When clicking on \"Load VCs\" button, nothing happens. In browser's console log, the following error is thrown: <Error>."
+      placeholder: 'When clicking on "Load VCs" button, nothing happens. In browser''s console log, the following error is thrown: <Error>.'
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/proposal.yml

@@ -9,8 +9,8 @@ body:
     id: motivation
     attributes:
       label: Motivation
-      description: "What is your motivation behind this proposal?"
-      placeholder: "It has been eight months since our last update of the issue templates. Many new features and packages have been added, and many things changed. Updating the templates would make reporting issues easier."
+      description: 'What is your motivation behind this proposal?'
+      placeholder: 'It has been eight months since our last update of the issue templates. Many new features and packages have been added, and many things changed. Updating the templates would make reporting issues easier.'
     validations:
       required: true
   - type: textarea
@@ -25,7 +25,7 @@ body:
         - [feature](libs): add did-ebsi-provider
         - [bug](snap): error handling always throws the same error
         - [proposal]: change the release pipeline to auto publish npm packages
-        
+
         I also propose introducing a new label, proposal, which gets auto-assigned to all new open issues of type [proposal]. Bodies and required fields of different issue types (especially [proposal]) should be discussed.
     validations:
       required: true

.prettierrc

@@ -16,6 +16,7 @@
     "^@/styles/(.*)$",
     "^@/utils/(.*)$",
     "^@/pages/(.*)$",
+    "^@/stores",
     "^[./]"
   ],
   "importOrderSeparation": false,

libs/utils/src/result.ts

@@ -7,13 +7,13 @@ export type Result<T> = {
     }
   | {
       success: false;
-      error: Error;
+      error: string;
     }
 );
 
 export const isError = <T>(
   result: Result<T>
-): result is { success: false; error: Error } => !result.success;
+): result is { success: false; error: string } => !result.success;
 
 export const isSuccess = <T>(
   result: Result<T>
@@ -24,7 +24,7 @@ export class ResultObject {
     return { success: true, data };
   }
 
-  static error<T>(error: Error): Result<T> {
+  static error<T>(error: string): Result<T> {
     return { success: false, error };
   }
 }

packages/connector/src/index.ts

@@ -40,7 +40,7 @@ export async function enableSSISnap(
   const provider = await detectEthereumProvider({ mustBeMetaMask: true });
 
   if (!provider) {
-    return ResultObject.error(new Error('No provider found'));
+    return ResultObject.error('No provider found');
   }
 
   // web3_clientVersion returns the installed MetaMask version as a string
@@ -50,7 +50,7 @@ export async function enableSSISnap(
 
   if (!mmVersion.includes('flask')) {
     return ResultObject.error(
-      new Error('MetaMask is not supported. Please install MetaMask Flask.')
+      'MetaMask is not supported. Please install MetaMask Flask.'
     );
   }
 
@@ -93,14 +93,12 @@ export async function enableSSISnap(
       }
 
       if (!switchResult.data) {
-        return ResultObject.error(
-          new Error('Could not switch to supported DID method')
-        );
+        return ResultObject.error('Could not switch to supported DID method');
       }
     }
 
     return ResultObject.success(snap);
   } catch (err: unknown) {
-    return ResultObject.error(err as Error);
+    return ResultObject.error((err as Error).toString());
   }
 }

packages/connector/src/utils.ts

@@ -37,9 +37,7 @@ export async function isSnapInstalled(
 
   if (snaps[snapOrigin].version !== version) {
     return ResultObject.error(
-      new Error(
-        `Snap version mismatch. Expected ${version} but got ${snaps[snapOrigin].version}`
-      )
+      `Snap version mismatch. Expected ${version} but got ${snaps[snapOrigin].version}`
     );
   }
 

packages/dapp/next.config.js

@@ -34,6 +34,10 @@ const nextConfig = {
       { loader: '@next/font/google', options: { subsets: ['latin'] } },
     ],
   },
+  i18n: {
+    locales: ['en', 'si'],
+    defaultLocale: 'en',
+  },
 
   // Security headers and CSP
   // https://nextjs.org/docs/advanced-features/security-headers

packages/dapp/package.json

@@ -29,6 +29,7 @@
     "clsx": "^1.2.1",
     "ethers": "^6.0.8",
     "next": "13.2.4",
+    "next-intl": "^2.12.0",
     "next-themes": "^0.2.1",
     "prettier-plugin-tailwindcss": "^0.2.4",
     "prop-types": "^15.8.1",

packages/dapp/src/components/AddressPopover/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { useTranslations } from 'next-intl';
 
 import { copyToClipboard } from '@/utils/string';
 
@@ -11,6 +12,7 @@ type AddressPopoverProps = {
   disconnect: () => void;
 };
 const AddressPopover = ({ address, did, disconnect }: AddressPopoverProps) => {
+  const t = useTranslations('Navbar');
   return (
     <Popover className="relative z-50">
       {({ open }) => (
@@ -65,7 +67,7 @@ const AddressPopover = ({ address, did, disconnect }: AddressPopoverProps) => {
                   </div>
                   <div>
                     <div className="dark:text-navy-blue-100 mt-4 text-sm text-gray-700">
-                      CONNECTED WITH METAMASK
+                      {t('address.connected')}
                     </div>
                     <div className="mt-2 flex items-center">
                       <div className="mr-1 mt-0.5">
@@ -87,9 +89,9 @@ const AddressPopover = ({ address, did, disconnect }: AddressPopoverProps) => {
                   <div className="mt-2 flex justify-start">
                     <button
                       onClick={disconnect}
-                      className="animated-transition mt-auto text-xs font-semibold text-pink-800 hover:text-pink-700 dark:text-pink-300 hover:dark:text-pink-400"
+                      className="animated-transition dark:text-pink-accent-dark mt-auto text-xs font-semibold text-pink-500 hover:text-pink-700 hover:dark:text-pink-400"
                     >
-                      DISCONNECT
+                      {t('address.disconnect')}
                     </button>
                   </div>
                 </div>

packages/dapp/src/components/Button/index.tsx

@@ -41,7 +41,7 @@ const sizes: Record<string, string> = {
   xs: 'text-sm py-2.5 px-4',
   sm: 'text-h5 py-2.5 px-5',
   md: 'text-h4 py-2.5 px-7',
-  lg: 'text-2xl py-2 px-8 font-semibold',
+  lg: 'text-2xl py-2 px-8 font-normal',
   xl: 'text-h3 py-2.5 px-9 font-semibold',
   wd: 'text-h4 py-2.5 px-7',
   icon: 'py-2 px-2',

packages/dapp/src/components/ConnectButton/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { shallow } from 'zustand/shallow';
 
 import Button from '@/components/Button';
-import { useGeneralStore } from '@/utils/stores';
+import { useGeneralStore } from '@/stores';
 
 const ConnectButton = () => {
+  const t = useTranslations('Navbar');
   const { isConnecting, changeIsConnecting } = useGeneralStore(
     (state) => ({
       isConnecting: state.isConnecting,
@@ -20,7 +22,7 @@ const ConnectButton = () => {
       onClick={() => changeIsConnecting(true)}
       loading={isConnecting}
     >
-      Connect Wallet
+      {t('connect')}
     </Button>
   );
 };

packages/dapp/src/components/ConnectedProvider/index.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { shallow } from 'zustand/shallow';
 
-import { useGeneralStore } from '@/utils/stores';
+import { useGeneralStore } from '@/stores';
 
 type ConnectedProviderProps = {
   children: React.ReactNode;
 };
 
 const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
+  const t = useTranslations('Gateway');
   const { isConnected, isConnecting, changeAddress, changeIsConnecting } =
     useGeneralStore(
       (state) => ({
@@ -48,7 +50,7 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
   return (
     <div className="flex min-h-full w-full items-center justify-center p-6">
       <h3 className="text-h3 dark:text-navy-blue-50 text-center text-gray-800">
-        Connect MetaMask to use the dApp!
+        {t('connect')}
       </h3>
     </div>
   );

packages/dapp/src/components/Controlbar/Controlbar.tsx

@@ -12,7 +12,7 @@ import ImportModal from '@/components/ImportModal';
 import DataStoreCombobox from '@/components/VCTable/DataStoreCombobox';
 import GlobalFilter from '@/components/VCTable/GlobalFilter';
 import ViewTabs from '@/components/VCTable/ViewTabs';
-import { useSnapStore } from '@/utils/stores';
+import { useSnapStore, useToastStore } from '@/stores';
 
 type ControlbarProps = {
   vcs: QueryVCsRequestResult[];
@@ -22,6 +22,16 @@ type ControlbarProps = {
 const Controlbar = ({ vcs, isConnected }: ControlbarProps) => {
   const [importModalOpen, setImportModalOpen] = useState(false);
   const [spinner, setSpinner] = useState(false);
+  const { setTitle, setLoading, setToastOpen, setType } = useToastStore(
+    (state) => ({
+      setTitle: state.setTitle,
+      setText: state.setText,
+      setLoading: state.setLoading,
+      setToastOpen: state.setOpen,
+      setType: state.setType,
+    }),
+    shallow
+  );
   const { api, changeVcs } = useSnapStore(
     (state) => ({
       api: state.snapApi,
@@ -30,24 +40,28 @@ const Controlbar = ({ vcs, isConnected }: ControlbarProps) => {
     shallow
   );
 
-  const refreshVCs = () => {
+  const refreshVCs = async () => {
     if (!api) return;
     setSpinner(true);
-    api
-      .queryVCs()
-      .then((res) => {
-        if (isError(res)) {
-          console.log(res);
-          setSpinner(false);
-          return;
-        }
-        changeVcs(res.data);
-        setSpinner(false);
-      })
-      .catch((err) => {
-        console.log(err);
-        setSpinner(false);
-      });
+
+    const res = await api.queryVCs();
+
+    if (isError(res)) {
+      console.log(res.error);
+
+      setSpinner(false);
+      setToastOpen(false);
+      setTimeout(() => {
+        setTitle('Failed to query credentials');
+        setType('error');
+        setLoading(false);
+        setToastOpen(true);
+      }, 100);
+      return;
+    }
+
+    changeVcs(res.data);
+    setSpinner(false);
   };
 
   const saveVC = async (vc: string, stores: AvailableVCStores[]) => {
@@ -76,41 +90,51 @@ const Controlbar = ({ vcs, isConnected }: ControlbarProps) => {
         newVcs.push(finalVC);
       });
       changeVcs([...vcs, ...newVcs]);
+
+      const queryResult = await api.queryVCs();
+      if (isError(queryResult)) {
+        return false;
+      }
+      if (queryResult.data) {
+        changeVcs(queryResult.data);
+      }
     }
     return true;
   };
 
   return (
     <>
-      <div className="mb-4 mt-6 grid grid-cols-11">
+      <div className="lg-mt-6 mb-4 mt-12 grid grid-cols-11 grid-rows-2 gap-y-4 md:grid-rows-1">
         {vcs.length > 0 && (
-          <div className="col-span-5 col-start-1 flex gap-x-1">
+          <div className="col-span-11 col-start-1 row-start-2 flex gap-x-2 md:col-span-5 md:row-start-1">
             <DataStoreCombobox isConnected={isConnected} vcs={vcs} />
             <GlobalFilter isConnected={isConnected} vcs={vcs} />
           </div>
         )}
 
         {vcs.length > 0 && (
-          <div className="col-start-6 flex justify-center">
+          <div className="col-span-5 col-start-1 row-start-1 flex justify-start sm:row-start-1 md:col-span-1 md:col-start-7 lg:col-start-6">
             <ViewTabs />
           </div>
         )}
-        <div className="col-span-5 col-start-7 flex justify-end gap-x-1">
+        <div className="col-span-5 col-start-7 flex justify-end gap-x-2 max-md:row-start-2 max-sm:row-start-1 md:row-start-1">
           {isConnected && (
             <button
-              className={`dark:bg-navy-blue-700 dark:text-navy-blue-50 flex h-[43px] w-[43px] items-center justify-center rounded-full bg-white text-gray-700 shadow-md`}
+              className={`dark:bg-navy-blue-700 dark:text-navy-blue-50 group flex h-[43px] w-[43px] items-center justify-center rounded-full bg-white text-gray-700 shadow-md`}
               onClick={() => setImportModalOpen(true)}
             >
-              <PlusIcon className={`h-6 w-6`} />
+              <PlusIcon className={`group-hover:animate-pingOnce h-6 w-6`} />
             </button>
           )}
           {vcs.length > 0 && (
             <button
-              className={`dark:bg-navy-blue-700 dark:text-navy-blue-50 flex h-[43px] w-[43px] items-center justify-center rounded-full bg-white text-gray-700 shadow-md`}
+              className={`dark:bg-navy-blue-700 dark:text-navy-blue-50 group flex h-[43px] w-[43px] items-center justify-center rounded-full bg-white text-gray-700 shadow-md`}
               onClick={() => refreshVCs()}
             >
               <ArrowPathIcon
-                className={`h-6 w-6 ${spinner ? 'animate-spin' : ''}`}
+                className={`group-hover:animate-spinOnce h-6 w-6 duration-75 ${
+                  spinner ? 'animate-spinRefresh duration-75' : ''
+                }`}
               />
             </button>
           )}