add different identicons for people (and increment version & add -beta)

package-lock.json

@@ -1,13 +1,15 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.9",
+  "version": "0.2.10-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari_Test",
-      "version": "0.2.9",
+      "version": "0.2.10-beta",
       "dependencies": {
+        "@dicebear/collection": "^5.3.5",
+        "@dicebear/core": "^5.3.5",
         "@ethersproject/hdnode": "^5.7.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
@@ -2423,6 +2425,358 @@
         "node": ">=8.9"
       }
     },
+    "node_modules/@dicebear/adventurer": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer/-/adventurer-5.3.5.tgz",
+      "integrity": "sha512-nbW5xOQ6Y/Ca4gD5bjMUCAsvRR8QswmWIGHEEq+dGOWsKMWI1xiS/ANUlaPjkEl78DeKfPFaBPUdsZCTnQHjvA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/adventurer-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/adventurer-neutral/-/adventurer-neutral-5.3.5.tgz",
+      "integrity": "sha512-IRui1HtGNSw2THVSrArZGHKBeg9sE+QDax4VmJpFyKGxUEqbjnb0GizvNQEeKYt4uu9OGFYXqQm8uAzx+uMk8w==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars/-/avataaars-5.3.5.tgz",
+      "integrity": "sha512-z9pEauaqRJGbABghFJAuhy4NSS9tHuNpmVdvSarVMn0b6fKxSxqpH6Om2lENXwEPze1EoOdvm5jPnDk3/EAFYA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/avataaars-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/avataaars-neutral/-/avataaars-neutral-5.3.5.tgz",
+      "integrity": "sha512-AiFhb0GwR1ouDX3ooIDufnSRkjckmqiUSmmGR3sa63qNyzrhgNZDRY9l5eixXn00eOW3FW7cRu8L72+dTBXeVA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears/-/big-ears-5.3.5.tgz",
+      "integrity": "sha512-2qy6M8pToQdzDzgVXN+9g70y4QioMZRF0qM5p1a5UiSwMZl8p1sI6rTM8WYKWVsrMTaZkeLiDCvq0N84YhLmug==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-ears-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-ears-neutral/-/big-ears-neutral-5.3.5.tgz",
+      "integrity": "sha512-9xqno7IzMDGVfv8zaH0s4vcRSH//LIW6Vaee9TiJzqb7xo2fUaSJcnZdwh4HQ72sJzPfxb9wwhqRZJRyczU1KA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/big-smile": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/big-smile/-/big-smile-5.3.5.tgz",
+      "integrity": "sha512-fXO50cB1WjCKRpv9cKhFroxwy8HzuUaM8iB2lzPYuOG3MJ838GnYGC26REXdmTgu0Xo9AGSQLh4AlpmXYzOgRg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts/-/bottts-5.3.5.tgz",
+      "integrity": "sha512-rk6kmCy4AGMIJ4FuA90PvQoOlejAoYqmXyCJRDfiVuzWBZZ36bMqwY/MHGNjXncsC0EMiPPqPFSKRNUXEy+X2A==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/bottts-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/bottts-neutral/-/bottts-neutral-5.3.5.tgz",
+      "integrity": "sha512-yichPU4ijqkYEsD6O9TMnmE2iOJ401/HAclpeixBFktEIEF7khUZ3Pmg08qMKPDGZMX5Syl9jm4KDAT9gDp9eg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/collection": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/collection/-/collection-5.3.5.tgz",
+      "integrity": "sha512-zWZjvBRaAY6smU5ynqpeFFufyGCnrAIwND1v/SjW1tyDzRY4DZ34opxibQYqL4bODPFsiTsFb8M7Jejkg324Yg==",
+      "dependencies": {
+        "@dicebear/adventurer": "5.3.5",
+        "@dicebear/adventurer-neutral": "5.3.5",
+        "@dicebear/avataaars": "5.3.5",
+        "@dicebear/avataaars-neutral": "5.3.5",
+        "@dicebear/big-ears": "5.3.5",
+        "@dicebear/big-ears-neutral": "5.3.5",
+        "@dicebear/big-smile": "5.3.5",
+        "@dicebear/bottts": "5.3.5",
+        "@dicebear/bottts-neutral": "5.3.5",
+        "@dicebear/croodles": "5.3.5",
+        "@dicebear/croodles-neutral": "5.3.5",
+        "@dicebear/fun-emoji": "5.3.5",
+        "@dicebear/icons": "5.3.5",
+        "@dicebear/identicon": "5.3.5",
+        "@dicebear/initials": "5.3.5",
+        "@dicebear/lorelei": "5.3.5",
+        "@dicebear/lorelei-neutral": "5.3.5",
+        "@dicebear/micah": "5.3.5",
+        "@dicebear/miniavs": "5.3.5",
+        "@dicebear/open-peeps": "5.3.5",
+        "@dicebear/personas": "5.3.5",
+        "@dicebear/pixel-art": "5.3.5",
+        "@dicebear/pixel-art-neutral": "5.3.5",
+        "@dicebear/shapes": "5.3.5",
+        "@dicebear/thumbs": "5.3.5"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/converter": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/converter/-/converter-5.3.5.tgz",
+      "integrity": "sha512-o/HEBQ4Jr8wTqpGYeQ7T9tmQjOiwVsi6PFwxIW8+99WL1RYfWNFZdrqtDs0CdfRt+C5xcD1lVVOp7AfNfZYWnA==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.7",
+        "tmp-promise": "^3.0.3"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@resvg/resvg-js": "^2.0.0",
+        "exiftool-vendored": "^16 || ^17 || ^18 || ^19 || ^20 || ^21",
+        "sharp": "^0.32.6"
+      },
+      "peerDependenciesMeta": {
+        "@resvg/resvg-js": {
+          "optional": true
+        },
+        "exiftool-vendored": {
+          "optional": true
+        },
+        "sharp": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@dicebear/core": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/core/-/core-5.3.5.tgz",
+      "integrity": "sha512-kQPH3LGFUwqkfetUvfNZyY8l7RgomESPTkVjxpQS0n2i6KzjFe7fpDGedVAkZwGOqOHSSaq5doENCTV1uDSC8Q==",
+      "dependencies": {
+        "@dicebear/converter": "5.3.5"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles/-/croodles-5.3.5.tgz",
+      "integrity": "sha512-TywdSL8ztt9rdIypMFDdBVEVHzaKL4044PPQtkrOH/elWkOrP+tvoccxGSouembRHeOHqCYXTafwItf6UMD6+Q==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/croodles-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/croodles-neutral/-/croodles-neutral-5.3.5.tgz",
+      "integrity": "sha512-l2Pw6k5UVajUZJOCy/0VTTUIhJcF+JVVwTy0XTKki3VCEeObhT8TAL67uRPFUZe6Xc8rC+DBBRXolglW4HrQ+g==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/fun-emoji": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/fun-emoji/-/fun-emoji-5.3.5.tgz",
+      "integrity": "sha512-20hVdZPWAT+Bw/SJeeApMuhd5N8wNkeMMdd2jZaQG9/cd4F4NtWfXZcGRNoiz76SvrgTr1fFxi13mKu6osNPZA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/icons": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/icons/-/icons-5.3.5.tgz",
+      "integrity": "sha512-tFHQOnnWzQSsSeNro2Ld3Mo7a+ngl03nY4YWwbpg/sn48L7n1YdDkFRrQofl9Wv8jqCsqEOv+SL9y81e7eDBBg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/identicon": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/identicon/-/identicon-5.3.5.tgz",
+      "integrity": "sha512-MMSwOsKVp9Y72P7Sv1Wr3cj05nmlHnCFLiWgxVmXBHWzbx2qIb5WjAeACoU6d6XF1NJo1M4ICJ9VP+V8vq+tOg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/initials": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/initials/-/initials-5.3.5.tgz",
+      "integrity": "sha512-SJv1pAzhQy15CzJqafxGtEbhxhWtE2/ai3udpHFYVBGZk3l3By7iau1AyDdB0GjZkg8XyE98ThH+3625OBKzpQ==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei/-/lorelei-5.3.5.tgz",
+      "integrity": "sha512-wApyFlSrA7FIcHC9MSFEumtCKFhXXWLnmDmNUW7gSmrUkleNDmbZxImBKIXCyl7KIN7Ckos13oPB4lag5r5DeA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/lorelei-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/lorelei-neutral/-/lorelei-neutral-5.3.5.tgz",
+      "integrity": "sha512-IE8RhLBVWSGEswm57ciAZ5YKcwo4rm3KIjdXevEiyYEm6BTPA2dzSB1JDGsqXGTpBe6kt9GRd5CibuBfD96p0w==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/micah": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/micah/-/micah-5.3.5.tgz",
+      "integrity": "sha512-cfEyFYrAPcmsZs2UoGuy9cEuwRgBBjV8TBxB+RQ/nS0ENeQ5pZ4qsgWQbFJUqtHfm2CAvMkkuQ2DfLo29SmPjg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/miniavs": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/miniavs/-/miniavs-5.3.5.tgz",
+      "integrity": "sha512-Uj8YSA0RY1jxJ0Ki6Yq4ERUeIsuFazKQbqfpAZLJBiUELq7WnASyaPqDjmAz5l2+dbVhpHSsQIzkLeejT6a/0Q==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/open-peeps": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/open-peeps/-/open-peeps-5.3.5.tgz",
+      "integrity": "sha512-Od/c2hjK+VJWb4PXS9G3ln50Kjl30o8Ns3+mhkoEgsKf82Dbiyp2JtKzZoizZxAqcPK93R+qrjDYumq22S9f4w==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/personas": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/personas/-/personas-5.3.5.tgz",
+      "integrity": "sha512-auLmS+y3Bhok+SkwLCDgTF0lglDaiNv6BrQpYS0/jvUMXRmFlqmOiA+dESP5Qa1jzdjrl+D9fxlRoS24qasIyg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art/-/pixel-art-5.3.5.tgz",
+      "integrity": "sha512-9i8przKdtzipYa4Bf2dHYgPIogcHEhctAKxi6BBOzcZKbzXjYc6An3E2E1JLNcDeGGbAE4XKt8INvMOYCHxv9A==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/pixel-art-neutral": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/pixel-art-neutral/-/pixel-art-neutral-5.3.5.tgz",
+      "integrity": "sha512-aBtEaJeEa/YOy5aTTXmH2S/9Q8bcjIWEsXNN0MMoksISJyfrqcZj1Nm1/NeSvXvNWkTWj0kVFi2TOMr804Hj3Q==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/shapes": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/shapes/-/shapes-5.3.5.tgz",
+      "integrity": "sha512-aGN+p0D1Xuwg+OwoTHAqLMYLIZRZe0YpcIH8FwfgEFK/4Yo+NqqAebmnRwh3yHejCknURteq853YhDhIbvJMaw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
+    "node_modules/@dicebear/thumbs": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/@dicebear/thumbs/-/thumbs-5.3.5.tgz",
+      "integrity": "sha512-uSsTOCZKiUWYpQG/jNTYTtF/h1vzPFrvtq2gUbhec4mKgdCMCsOnk0JMYUKte03Oly/a2XrtJjPL7/TlxqCXXA==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@dicebear/core": "^5.0.0"
+      }
+    },
     "node_modules/@digitalbazaar/bitstring": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@digitalbazaar/bitstring/-/bitstring-3.1.0.tgz",
@@ -8805,8 +9159,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.13",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
-      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
+      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ=="
-      "dev": true
     },
     "node_modules/@types/leaflet": {
       "version": "1.9.6",
@@ -11825,7 +12178,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "devOptional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -12657,8 +13009,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-      "devOptional": true
     },
     "node_modules/connect": {
       "version": "3.7.0",
@@ -16314,7 +16665,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "devOptional": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -21144,7 +21494,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "devOptional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -22186,7 +22535,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -24411,7 +24759,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "devOptional": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -26219,6 +26566,25 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/tmp-promise": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tmp-promise/-/tmp-promise-3.0.3.tgz",
+      "integrity": "sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==",
+      "dependencies": {
+        "tmp": "^0.2.0"
+      }
+    },
+    "node_modules/tmp-promise/node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@dicebear/collection": "^5.3.5",
+    "@dicebear/core": "^5.3.5",
     "@ethersproject/hdnode": "^5.7.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",

project.task.yaml

@@ -1,6 +1,7 @@
 
 tasks:
 
+- Jason reported that turning notifications on from the help screen did not stay. iPhone
 - check that 'show more contacts' from the contact-give-list on the project screen includes project ID
 
 - supply the projectId to the OfferDialog just like we do with the offerId
@@ -23,7 +24,6 @@ tasks:
 - copy button for seed
 - .5 If notifications are not enabled, add message to front page with link/button to enable
 - make server endpoint for full English description of limits
-- make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
 - create a help-desk document & add screenshots
 
 - 01 server - show all claim details when issued by the issuer

src/assets/blank-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <rect width="64" height="64" fill="#ffffff"></rect>
+</svg>

src/components/EntityIcon.vue

@@ -1,30 +1,23 @@
 <template>
-  <div v-html="generateIdenticon()" class="w-fit"></div>
+  <div v-html="generateIcon()" class="w-fit"></div>
 </template>
 <script lang="ts">
+import { createAvatar, StyleOptions } from "@dicebear/core";
+import { avataaars } from "@dicebear/collection";
 import { Vue, Component, Prop } from "vue-facing-decorator";
-import { toSvg } from "jdenticon";
-
-const BLANK_CONFIG = {
-  lightness: {
-    color: [1.0, 1.0],
-    grayscale: [1.0, 1.0],
-  },
-  saturation: {
-    color: 0.0,
-    grayscale: 0.0,
-  },
-  backColor: "#0000",
-};
 
 @Component
 export default class EntityIcon extends Vue {
   @Prop entityId = "";
   @Prop iconSize = 0;
 
-  generateIdenticon() {
+  generateIcon() {
-    const config = this.entityId ? undefined : BLANK_CONFIG;
+    const options: StyleOptions<object> = {
-    const svgString = toSvg(this.entityId, this.iconSize, config);
+      seed: this.entityId || "",
+      size: this.iconSize,
+    };
+    const avatar = createAvatar(avataaars, options);
+    const svgString = avatar.toString();
     return svgString;
   }
 }

src/components/ProjectIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-html="generateIdenticon()" class="w-fit"></div>
+</template>
+<script lang="ts">
+import { toSvg } from "jdenticon";
+import { Vue, Component, Prop } from "vue-facing-decorator";
+
+const BLANK_CONFIG = {
+  lightness: {
+    color: [1.0, 1.0],
+    grayscale: [1.0, 1.0],
+  },
+  saturation: {
+    color: 0.0,
+    grayscale: 0.0,
+  },
+  backColor: "#0000",
+};
+
+@Component
+export default class ProjectIcon extends Vue {
+  @Prop entityId = "";
+  @Prop iconSize = 0;
+
+  generateIdenticon() {
+    const config = this.entityId ? undefined : BLANK_CONFIG;
+    const svgString = toSvg(this.entityId, this.iconSize, config);
+    return svgString;
+  }
+}
+</script>
+<style scoped></style>

src/views/ContactGiftingView.vue

@@ -20,12 +20,11 @@
     <ul class="border-t border-slate-300">
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow italic text-slate-500"
+          <span class="grow italic text-slate-500">
-            ><EntityIcon
+            <img
-              :entityId="null"
+              src="../assets/blank-square.svg"
-              :iconSize="32"
+              class="mx-auto border border-slate-300 rounded-md mb-1"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+            />
-            ></EntityIcon>
             Anonymous
           </span>
           <span class="text-right">

src/views/DiscoverView.vue

@@ -103,11 +103,11 @@
             class="block py-4 flex gap-4"
           >
             <div class="w-12">
-              <EntityIcon
+              <ProjectIcon
                 :entityId="project.handleId"
                 :iconSize="48"
                 class="block border border-slate-300 rounded-md"
-              ></EntityIcon>
+              ></ProjectIcon>
             </div>
 
             <div class="grow">
@@ -137,6 +137,7 @@ import { didInfo, ProjectData } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
+import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
 
 interface Notification {
@@ -148,9 +149,10 @@ interface Notification {
 
 @Component({
   components: {
-    QuickNav,
-    InfiniteScroll,
     EntityIcon,
+    InfiniteScroll,
+    ProjectIcon,
+    QuickNav,
     TopMessage,
   },
 })

src/views/HomeView.vue

@@ -108,11 +108,10 @@
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
           <li @click="openDialog()">
-            <EntityIcon
+            <img
-              :entityId="null"
+              src="../assets/blank-square.svg"
-              :iconSize="64"
               class="mx-auto border border-slate-300 rounded-md mb-1"
-            ></EntityIcon>
+            />
             <h3
               class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
             >

src/views/ProjectViewView.vue

@@ -23,11 +23,11 @@
       <div>
         <div class="block pb-4 flex gap-4">
           <div class="flex-none w-16 pt-1">
-            <EntityIcon
+            <ProjectIcon
               :entityId="projectId"
               :iconSize="64"
               class="block border border-slate-300 rounded-md"
-            ></EntityIcon>
+            ></ProjectIcon>
           </div>
 
           <div class="overflow-hidden">
@@ -143,11 +143,10 @@
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openGiftDialog()">
-          <EntityIcon
+          <img
-            :entityId="undefined"
+            src="../assets/blank-square.svg"
-            :iconSize="64"
             class="mx-auto border border-slate-300 rounded-md mb-1"
-          ></EntityIcon>
+          />
           <h3
             class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
           >
@@ -356,6 +355,7 @@ import {
 import * as serverUtil from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
+import ProjectIcon from "@/components/ProjectIcon.vue";
 import { Account } from "@/db/tables/accounts";
 
 interface Notification {
@@ -366,7 +366,14 @@ interface Notification {
 }
 
 @Component({
-  components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav, TopMessage },
+  components: {
+    EntityIcon,
+    GiftedDialog,
+    OfferDialog,
+    ProjectIcon,
+    QuickNav,
+    TopMessage,
+  },
 })
 export default class ProjectViewView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;

src/views/ProjectsView.vue

@@ -52,11 +52,11 @@
             class="block py-4 flex gap-4"
           >
             <div class="flex-none w-12">
-              <EntityIcon
+              <ProjectIcon
                 :entityId="project.handleId"
                 :iconSize="48"
                 class="inline-block align-middle border border-slate-300 rounded-md"
-              ></EntityIcon>
+              ></ProjectIcon>
             </div>
 
             <div class="grow overflow-hidden">
@@ -80,7 +80,7 @@ import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { ProjectData } from "@/libs/endorserServer";
 
@@ -92,7 +92,7 @@ interface Notification {
 }
 
 @Component({
-  components: { InfiniteScroll, QuickNav, EntityIcon, TopMessage },
+  components: { InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
 })
 export default class ProjectsView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;