{contact.profileIcon ? (
) : (
diff --git a/src/utils/svgies.ts b/src/utils/svgies.ts
deleted file mode 100644
index 1c8371486..000000000
--- a/src/utils/svgies.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-const addressRegex = /^[a-z0-9-_]{43}$/i;
-
-type svgieOptions = {
- asDataURI?: boolean;
- dimension?: number;
-};
-
-export const svgie = (address: string, opts?: svgieOptions) => {
- if (!address || address.length !== 43 || !addressRegex.test(address)) return;
-
- const { asDataURI = false, dimension = 32 } = opts;
-
- if (dimension < 1) return;
-
- const hexAddress = addressToHex(address);
- const hexPaths = hexAddress.slice(0, 40);
- const hexColors = hexAddress.slice(40);
-
- const c = getColors(hexColors);
- const p = getSPaths(hexPaths);
-
- const svg = `
`;
-
- if (asDataURI) return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-
- return svg;
-};
-
-const addressToHex = (address: string) => {
- // Replace special characters and restore padding
- const base64 = address.replace(/-/g, "+").replace(/_/g, "/") + "==";
- // Convert Base64 to binary data
- const binaryData = Buffer.from(base64, "base64");
- // Convert binary data to hex
- const hexString = binaryData.toString("hex");
- return hexString;
-};
-
-const fixOpacity = (hexString) => {
- const data =
- hexString.length == 8
- ? hexString
- : hexString.length == 6
- ? hexString + "ff"
- : "ffffffff";
- return (
- data?.slice(0, 6) +
- parseInt(
- `${(parseInt(data?.slice(6, 8), 16) * 256) / 1024 + 191}`
- ).toString(16)
- );
-};
-
-// Creates a path from an array with all the control points defined
-const getSPath = (arr) => {
- // First coordinates are the path start point
- let path = `M${arr[0]} ${arr[1]}`;
- // Every 2 coordinate pair, a Cubic Bézier S Curve goes into the path
- path += `C${arr[2]} ${arr[3]} ${arr[4]} ${arr[5]} ${arr[6]} ${arr[7]}`;
- for (let i = 8; i < arr.length; i += 4) {
- path += `S${arr[i]} ${arr[i + 1]} ${arr[i + 2]} ${arr[i + 3]}`;
- }
- // Last coordinate pair is used as control point for the last Bézier Curve
- // path += `S${2 * arr[0] - arr[2]} ${2 * arr[1] - arr[3]} ${arr[0]} ${arr[1]}z`
- path += `Q${2 * arr[arr.length - 2] - arr[arr.length - 4]} ${
- 2 * arr[arr.length - 1] - arr[arr.length - 3]
- } ${arr[0]} ${arr[1]}z`;
- return path;
-};
-
-// repeat every char in the string twice
-const repeatChar = (s) => {
- return s
- .split("")
- .map((c) => c.repeat(2))
- .join("");
-};
-
-// if color is 8 characters, split in half and use webcolors
-const splitColor = (s) => {
- if (s.length == 8) return [repeatChar(s.slice(0, 4)), repeatChar(s.slice(4))];
- return [s, s];
-};
-
-// Split hex data into groups of 4 bytes to create rgba colors
-const getColors = (hexData) => {
- let colors = hexData?.match(/.{1,8}/g) || [];
- switch (colors.length) {
- case 1:
- return [];
- case 2:
- colors = [...splitColor(colors[0]), ...splitColor(colors[1])];
- break;
- case 3:
- colors = [...splitColor(colors[0]), ...colors.slice(1)];
- break;
- default:
- break;
- }
- return colors.map((hex) => fixOpacity(hex));
-};
-
-const getSPaths = (ethAddress) => {
- const arr = ethAddress?.split("").map((char) => parseInt(char, 16) + 8);
- let symArr = arr?.map((val, index) => (index % 2 ? val : 32 - val));
- return [getSPath(arr), getSPath(symArr)];
-};
diff --git a/src/wallets/hardware/index.ts b/src/wallets/hardware/index.ts
index c6d417fbd..d41843636 100644
--- a/src/wallets/hardware/index.ts
+++ b/src/wallets/hardware/index.ts
@@ -11,6 +11,7 @@ export interface HardwareWallet {
address: string;
publicKey: string;
xfp: string;
+ avatar?: string;
}
/**
diff --git a/src/wallets/index.ts b/src/wallets/index.ts
index 3dee48b0b..a77afe659 100644
--- a/src/wallets/index.ts
+++ b/src/wallets/index.ts
@@ -20,6 +20,7 @@ import {
getDecryptionKey,
setDecryptionKey
} from "./auth";
+import { arSvgie } from "@7i7o/arsvgies";
/**
* Locally stored wallet
@@ -31,6 +32,7 @@ export interface LocalWallet
{
nickname: string;
address: string;
keyfile: KeyfileFormat;
+ avatar: string;
}
/**
@@ -249,13 +251,17 @@ export async function addWallet(
continue;
}
+ // get avatar
+ const avatar = await arSvgie(address, { asDataURI: true });
+
// push wallet
wallets.push({
type: "local",
// @ts-expect-error
nickname: item.nickname || `Account ${wallets.length + 1}`,
address,
- keyfile: encrypted
+ keyfile: encrypted,
+ avatar
});
}
diff --git a/yarn.lock b/yarn.lock
index 115acb1b2..da41eb199 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
# yarn lockfile v1
+"@7i7o/arsvgies@^1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@7i7o/arsvgies/-/arsvgies-1.1.0.tgz#98bdad739f5d6cd6cc2d94727bb950d7516f9a7d"
+ integrity sha512-w1+hTKDCFgOSugMY+L/8xWjIJ74FzYLbDe5qpHvRMbcauUUsrZ4y9OGPrJNsThuV6XzIoqGX5RccJdFGFyl2iA==
+
"@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"