Fix/Poseidon implementation (#76)

composables/index.ts

@@ -1,4 +1,3 @@
 export * from './use-form-validation'
 export * from './use-notifications'
 export * from './use-viewport-sizes'
-export * from './use-poseidon'

constants/index.ts

@@ -1,4 +1,3 @@
 export * from './numbers.constant'
 export * from './bytes.constant'
-export * from './poseidon_constants_opt'
 export * from './bn128.constants'

enums/route-names.enum.ts

@@ -16,7 +16,7 @@ export enum ROUTE_NAMES {
   hashFunctionKeccak256Id = 'hash-function-keccak256-id',
   hashFunctionSha256Id = 'hash-function-sha256-id',
   hashFunctionRipemd160Id = 'hash-function-ripemd160-id',
-  hashFunctionPoseidon6Id = 'hash-function-poseidon6-id',
+  hashFunctionPoseidon16Id = 'hash-function-poseidon16-id',
   addressUtils = 'address-utils',
   addressUtilsCommonAddresses = 'address-utils-common-addresses',
   addressUtilsCreate = 'address-utils-create',

forms/PoseidonForm.vue

@@ -48,7 +48,7 @@
         :disabled="isAddButtonDisabled"
         :text="
           isAddButtonDisabled
-            ? $t('poseidon-form.add-arg-btn--max')
+            ? $t('poseidon-form.add-arg-btn--max', { max: MAX_FIELDS_QUANTITY })
             : $t('poseidon-form.add-arg-btn')
         "
         :icon-left="$icons.plus"
@@ -90,7 +90,7 @@
 <script lang="ts" setup>
 import { v4 as uuidv4 } from 'uuid'
 import { InputField } from '@/fields'
-import { Poseidon, useNotifications } from '@/composables'
+import { useNotifications } from '@/composables'
 import { i18n } from '~/plugins/localization'
 import { useFormValidation } from '@/composables'
 import {
@@ -101,31 +101,36 @@ import {
   maxBn128Value,
   sleep,
 } from '@/helpers'
-import { hexlify } from 'ethers'
+import { toQuantity } from 'ethers'
 import { ROUTE_NAMES } from '@/enums'
 import { linkShortener } from '@/services'
 import { COPIED_DURING_MS } from '@/constants'
 import { runtimeErrors } from '@/errors'
-import { usePoseidon } from '@/composables'
-
+import * as poseidon from 'poseidon-lite'
 const { showToast } = useNotifications()
 const { t } = i18n.global
 
+type PoseidonFunctions = {
+  [K in `poseidon${number}`]: (
+    input: (bigint | number | string)[],
+    nOuts?: number,
+  ) => bigint
+}
+
 type FormField = {
   id: string
   value: string
   label: string
 }
 
-const poseidonHash = ref<Poseidon>()
 const isInitializing = ref(true)
 const isUrlCopied = ref(false)
 
 onBeforeMount(() => {
   init()
 })
 
-const MAX_FIELDS_QUANTITY = 6
+const MAX_FIELDS_QUANTITY = 16
 
 const form = reactive({
   fields: [
@@ -154,7 +159,7 @@ const router = useRouter()
 
 const routePathOfEncoder = computed<string>(() => {
   const { path } = router.resolve({
-    name: ROUTE_NAMES.hashFunctionPoseidon6Id,
+    name: ROUTE_NAMES.hashFunctionPoseidon16Id,
   })
 
   return path
@@ -203,10 +208,6 @@ const removeArg = (id: FormField['id']) => {
 const init = async (): Promise<void> => {
   isInitializing.value = true
 
-  if (!poseidonHash.value) {
-    poseidonHash.value = await usePoseidon()
-  }
-
   try {
     const id = router.currentRoute.value.params.id
     if (id && typeof id === 'string') {
@@ -223,14 +224,14 @@ const init = async (): Promise<void> => {
     }
   } catch (error) {
     ErrorHandler.process(error)
-    await router.replace({ name: ROUTE_NAMES.hashFunctionPoseidon6Id })
+    await router.replace({ name: ROUTE_NAMES.hashFunctionPoseidon16Id })
   } finally {
     isInitializing.value = false
   }
 }
 
 watch(form, async () => {
-  if (!isFormValid() || !poseidonHash.value) {
+  if (!isFormValid()) {
     result.value = ''
     return
   }
@@ -240,7 +241,9 @@ watch(form, async () => {
     return accumulator
   }, [] as bigint[])
 
-  result.value = hexlify(poseidonHash.value(inputs))
+  result.value = toQuantity(
+    (poseidon as PoseidonFunctions)[`poseidon${form.fields.length}`](inputs),
+  )
 })
 </script>
 

nginx.conf

@@ -112,7 +112,7 @@ http {
         location ~ ^/hash-function/ripemd160/.* {
           error_page 404 /404.html;
         }
-        location ~ ^/hash-function/poseidon6/.* {
+        location ~ ^/hash-function/poseidon16/.* {
           error_page 404 /404.html;
         }
     }

nuxt.config.ts

@@ -1,6 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import path from 'path'
 
 const lifecycle = process.env.npm_lifecycle_event
@@ -125,7 +124,6 @@ export default defineNuxtConfig({
         iconDirs: [path.resolve(process.cwd(), 'assets/icons')],
         symbolId: '[name]',
       }),
-      nodePolyfills({ include: ['buffer'] }),
     ],
     css: {
       preprocessorOptions: {
@@ -139,11 +137,6 @@ export default defineNuxtConfig({
     },
     resolve: {
       alias: {
-        // HACK: ffjavascript runs in Node.js env by default
-        // and uses a web-worker package.
-        // As we use it only in client components
-        // we tell Vite always to use a browser version
-        ffjavascript: '/node_modules/ffjavascript/build/browser.esm.js',
         '@distributedlab/fetcher':
           '/node_modules/@distributedlab/fetcher/dist/esm/index.js',
       },
@@ -165,7 +158,7 @@ export default defineNuxtConfig({
         '/hash-function/keccak256',
         '/hash-function/sha256',
         '/hash-function/ripemd160',
-        '/hash-function/poseidon6',
+        '/hash-function/poseidon16',
       ],
     },
   },

package.json

@@ -41,8 +41,8 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vue-i18n": "^0.3.0",
-    "ffjavascript": "^0.3.0",
     "loglevel": "^1.8.0",
+    "poseidon-lite": "^0.3.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "sass": "^1.54.8",
@@ -52,7 +52,6 @@
     "stylelint-scss": "^4.3.0",
     "typescript": "^4.8.2",
     "unplugin-vue-components": "^0.22.4",
-    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.0.3",
     "yorkie": "^2.0.0"

pages/ecrecover.vue

@@ -15,7 +15,6 @@ import { definePageMeta } from '#imports'
 import { ROUTE_NAMES } from '@/enums'
 import { i18n } from '~/plugins/localization'
 import { type Tab } from '@/types'
-import { computed } from 'vue'
 
 definePageMeta({
   layout: 'solidity-tools',

pages/hash-function.vue

@@ -25,7 +25,7 @@ enum TAB_IDS {
   keccak256 = 'keccak256',
   sha256 = 'sha256',
   ripemd160 = 'ripemd160',
-  poseidon6 = 'poseidon6',
+  poseidon16 = 'poseidon16',
 }
 
 const TAB_ITEMS: Tab[] = [
@@ -46,8 +46,8 @@ const TAB_ITEMS: Tab[] = [
   },
   {
     title: 'Poseidon (iden3)',
-    id: TAB_IDS.poseidon6,
-    route: { name: ROUTE_NAMES.hashFunctionPoseidon6Id },
+    id: TAB_IDS.poseidon16,
+    route: { name: ROUTE_NAMES.hashFunctionPoseidon16Id },
   },
 ]
 </script>

pages/hash-function/poseidon6/[[id]].vue → pages/hash-function/poseidon16/[[id]].vue

@@ -1,7 +1,5 @@
 <template>
-  <client-only>
-    <poseidon-form />
-  </client-only>
+  <poseidon-form />
 </template>
 
 <script lang="ts" setup>

plugins/localization/resources/en.json

@@ -308,7 +308,7 @@
     "arg-placeholder": "Enter argument",
     "cannot-hash-more": "Cannot hash more than {max} elements",
     "add-arg-btn": "Add argument",
-    "add-arg-btn--max": "Maximum 6 arguments",
+    "add-arg-btn--max": "Maximum {max} arguments",
     "hash-label": "Hash",
     "output-title": "Output",
     "share-btn": "Copy link to share",