Merge pull request #95 from subquery/feat/new-address

feat: new version address component
subquery · Oct 23, 2023 · e3f7237 · e3f7237
2 parents 423d6fc + 0eca705
commit e3f7237
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 20 deletions.
diff --git a/components/common/address/Addres.less b/components/common/address/Addres.less
@@ -0,0 +1,16 @@
+.subql-address {
+  display: flex;
+  align-items: center;
+
+  &__text {
+    color: var(--sq-gray700);
+
+    &--small {
+      padding-left: 7px;
+    }
+
+    &--large {
+      padding-left: 10px;
+    }
+  }
+}
diff --git a/components/common/address/Address.module.css b/components/common/address/Address.module.css
diff --git a/components/common/address/Address.tsx b/components/common/address/Address.tsx
@@ -2,9 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
+import { toSvg } from 'jdenticon';
 import { Typography } from '../typography';
-import styles from './Address.module.css';
+import { createBEM } from 'components/utilities/createBem';
+import clsx from 'clsx';
+import './Addres.less';
 
 export function truncateAddress(address: string): string {
   if (!address) {
@@ -29,11 +31,16 @@ const Address: React.FC<Props> = ({ address, truncated = true, size = 'small' })
         return 32;
     }
   }, [size]);
+  const bem = createBEM('subql-address');
 
   return (
-    <div className={styles.container}>
-      <Jazzicon diameter={iconSize} seed={jsNumberForAddress(address)} />
-      <Typography variant={size === 'small' ? 'medium' : 'text'} className={styles[size]}>
+    <div className={clsx(bem())}>
+      <img
+        className={clsx(bem('icon'))}
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(toSvg(address, iconSize))}`}
+        alt=""
+      />
+      <Typography variant={size === 'small' ? 'small' : 'medium'} className={clsx(bem('text', size))} type="secondary">
         {truncated ? truncateAddress(address) : address}
       </Typography>
     </div>

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "graphiql": "^3.0.5",
     "graphql": "^16.7.0",
     "graphql-ws": "^5.13.1",
+    "jdenticon": "^3.2.0",
     "ra-data-graphql": "^4.11.3",
     "react-icons": "^4.8.0",
     "react-jazzicon": "^0.1.3",

diff --git a/yarn.lock b/yarn.lock
@@ -5470,6 +5470,13 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001517:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz#b3ca93904cb4699c01218246c4d77a71dbe97150"
   integrity sha512-rup09/e3I0BKjncL+FesTayKtPrdwKhUufQFd3riFw1hHg8JmIFoInYfB102cFcY/pPgGmdyl/iy+jgiDi2vdA==
 
+canvas-renderer@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.2.1.tgz#c1d131f78a9799aca8af9679ad0a005052b65550"
+  integrity sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==
+  dependencies:
+    "@types/node" "*"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -9160,6 +9167,13 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
+jdenticon@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/jdenticon/-/jdenticon-3.2.0.tgz#b5b9ef413cb66f70c600d6e69a764c977f248a46"
+  integrity sha512-z6Iq3fTODUMSOiR2nNYrqigS6Y0GvdXfyQWrUby7htDHvX7GNEwaWR4hcaL+FmhEgBe08Xkup/BKxXQhDJByPA==
+  dependencies:
+    canvas-renderer "~2.2.0"
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"