From 7f5841a9edb80e3dced9face3bea0f288f8aa5cc Mon Sep 17 00:00:00 2001 From: immutablegoblin <112887817+immutablegoblin@users.noreply.github.com> Date: Wed, 25 Oct 2023 22:17:25 +0300 Subject: [PATCH] feat(frontend): add browser wallet icons (#369) * dependencies: upgrade shared-ui version * feat: use wallet icons and name in connection modal * feat: use wallet icon in header menu --- packages/frontend/package.json | 2 +- .../ConnectWallet/ConnectWallet.tsx | 7 ++-- .../src/components/HeaderMenu/HeaderMenu.tsx | 5 ++- pnpm-lock.yaml | 39 +++++++++---------- 4 files changed, 26 insertions(+), 27 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 001849cf..1ee222e6 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -27,7 +27,7 @@ "@headlessui/react": "^1.7.4", "@heroicons/react": "^2.0.12", "@sifi/sdk": "^1.9.0", - "@sifi/shared-ui": "^1.8.1", + "@sifi/shared-ui": "^1.8.3", "@tanstack/react-query": "^4.13.0", "@types/three": "^0.127.1", "@uniswap/permit2-sdk": "^1.2.0", diff --git a/packages/frontend/src/components/ConnectWallet/ConnectWallet.tsx b/packages/frontend/src/components/ConnectWallet/ConnectWallet.tsx index c69b7e66..7e5f1626 100644 --- a/packages/frontend/src/components/ConnectWallet/ConnectWallet.tsx +++ b/packages/frontend/src/components/ConnectWallet/ConnectWallet.tsx @@ -1,5 +1,5 @@ import { type FunctionComponent, useState, useEffect } from 'react'; -import { Modal, showToast, WalletOption } from '@sifi/shared-ui'; +import { Modal, showToast, WalletOption, useWalletBranding } from '@sifi/shared-ui'; import useConnectWallet from 'src/hooks/useConnectWallet'; import { type SupportedWallet } from 'src/connectors'; import { getViemErrorMessage } from 'src/utils'; @@ -17,6 +17,7 @@ const ConnectWalletModal: FunctionComponent = ({ closeModal, }: ConnectWalletModalProps) => { const { connectWallet, error } = useConnectWallet(); + const { text: injectedWalletText, icon: injectedWalletIcon } = useWalletBranding(); useEffect(() => { if (error) { @@ -29,11 +30,11 @@ const ConnectWalletModal: FunctionComponent = ({
{supportedWallets.map(wallet => ( connectWallet(wallet)} + injectedWalletName={wallet === 'injected' ? injectedWalletText : undefined} + injectedWalletIcon={wallet === 'injected' ? injectedWalletIcon : undefined} /> ))}
diff --git a/packages/frontend/src/components/HeaderMenu/HeaderMenu.tsx b/packages/frontend/src/components/HeaderMenu/HeaderMenu.tsx index 90fc2cd0..80ab0ad8 100644 --- a/packages/frontend/src/components/HeaderMenu/HeaderMenu.tsx +++ b/packages/frontend/src/components/HeaderMenu/HeaderMenu.tsx @@ -1,5 +1,5 @@ import { FunctionComponent } from 'react'; -import { Menu } from '@sifi/shared-ui'; +import { Menu, useWalletBranding } from '@sifi/shared-ui'; import { useAccount, useDisconnect, useEnsName, useNetwork } from 'wagmi'; import { formatAddress, formatEnsName } from 'src/utils'; @@ -8,6 +8,7 @@ const HeaderMenu: FunctionComponent = () => { const { data: ensName } = useEnsName({ address }); const { chain } = useNetwork(); const { disconnect } = useDisconnect(); + const { icon, text } = useWalletBranding(); if (!address || !isConnected) return null; @@ -21,7 +22,7 @@ const HeaderMenu: FunctionComponent = () => { ]; return ( - +
Network diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b533bc75..0d61b3cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ importers: specifier: ^1.9.0 version: link:../sdk '@sifi/shared-ui': - specifier: ^1.8.1 - version: 1.8.1(@headlessui/react@1.7.11)(date-fns@2.29.3)(react-dom@18.2.0)(react-hook-form@7.43.1)(react-router-dom@6.0.1)(react@18.2.0)(viem@1.9.0)(wagmi@1.3.10) + specifier: ^1.8.3 + version: 1.8.3(@headlessui/react@1.7.11)(date-fns@2.29.3)(react-dom@18.2.0)(react-hook-form@7.43.1)(react-router-dom@6.0.1)(react@18.2.0)(viem@1.9.0)(wagmi@1.3.10) '@tanstack/react-query': specifier: ^4.13.0 version: 4.28.0(react-dom@18.2.0)(react@18.2.0) @@ -283,10 +283,6 @@ importers: specifier: ^0.0.5 version: 0.0.5(prettier-plugin-solidity@1.1.3)(prettier@2.8.8) - packages/hardhat/lib/forge-std: {} - - packages/hardhat/lib/forge-std/lib/ds-test: {} - packages/sdk: devDependencies: '@types/node': @@ -3756,7 +3752,7 @@ packages: local-pkg: 0.4.1 semver: 7.5.4 speed-measure-webpack-plugin: 1.4.2(webpack@5.88.2) - tslib: 2.6.1 + tslib: 2.6.2 webpack-dev-server: 4.15.1(debug@4.3.4)(webpack@5.88.2) webpack-merge: 5.9.0 transitivePeerDependencies: @@ -5534,7 +5530,7 @@ packages: supports-color: 8.1.1 supports-hyperlinks: 2.3.0 ts-node: 10.9.1(@types/node@18.11.19)(typescript@5.2.2) - tslib: 2.6.1 + tslib: 2.6.2 widest-line: 3.1.0 wordwrap: 1.0.0 wrap-ansi: 7.0.0 @@ -5574,7 +5570,7 @@ packages: supports-color: 8.1.1 supports-hyperlinks: 2.3.0 ts-node: 10.9.1(@types/node@18.11.19)(typescript@5.2.2) - tslib: 2.6.1 + tslib: 2.6.2 widest-line: 3.1.0 wordwrap: 1.0.0 wrap-ansi: 7.0.0 @@ -5644,7 +5640,7 @@ packages: '@peculiar/asn1-schema': 2.3.8 '@peculiar/json-schema': 1.1.12 pvtsutils: 1.3.5 - tslib: 2.6.1 + tslib: 2.6.2 webcrypto-core: 1.7.7 dev: false @@ -6529,8 +6525,8 @@ packages: resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==} dev: true - /@sifi/shared-ui@1.8.1(@headlessui/react@1.7.11)(date-fns@2.29.3)(react-dom@18.2.0)(react-hook-form@7.43.1)(react-router-dom@6.0.1)(react@18.2.0)(viem@1.9.0)(wagmi@1.3.10): - resolution: {integrity: sha512-d9uOQ7LN57xHTALW0H9zqLQMsxe9ND2Vy7szbj7w7NLwfQFtm/sD3zPIFOX2U+kZFPX/APBzubqjnqDsfEfp5A==} + /@sifi/shared-ui@1.8.3(@headlessui/react@1.7.11)(date-fns@2.29.3)(react-dom@18.2.0)(react-hook-form@7.43.1)(react-router-dom@6.0.1)(react@18.2.0)(viem@1.9.0)(wagmi@1.3.10): + resolution: {integrity: sha512-E2YpN4utF/fqxPl7aDhuPKhOCcA2a1rtB36jPe2zTpNADxcdsY3aoJ+xqKqMi8NQbT0CVY43jPoen5aNAuvMqg==} peerDependencies: '@headlessui/react': ^1.7.3 date-fns: 2.29.3 @@ -6604,7 +6600,7 @@ packages: object-hash: 3.0.0 packageurl-js: 1.0.0 semver: 7.5.4 - tslib: 2.6.1 + tslib: 2.6.2 dev: true /@snyk/graphlib@2.1.9-patch.3: @@ -10073,7 +10069,7 @@ packages: busboy: 1.6.0 fast-querystring: 1.1.2 fast-url-parser: 1.1.3 - tslib: 2.6.1 + tslib: 2.6.2 dev: false /@xmldom/xmldom@0.8.6: @@ -10661,7 +10657,7 @@ packages: resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==} engines: {node: '>=10'} dependencies: - tslib: 2.6.1 + tslib: 2.6.2 dev: true /aria-query@4.2.2: @@ -14625,7 +14621,7 @@ packages: /event-loop-spinner@2.2.0: resolution: {integrity: sha512-KB44sV4Mv7uLIkJHJ5qhiZe5um6th2g57nHQL/uqnPHKP2IswoTRWUteEXTJQL4gW++1zqWUni+H2hGkP51c9w==} dependencies: - tslib: 2.6.1 + tslib: 2.6.2 dev: true /event-target-shim@5.0.1: @@ -19480,7 +19476,7 @@ packages: resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} dependencies: lower-case: 2.0.2 - tslib: 2.6.1 + tslib: 2.6.2 dev: true /node-addon-api@2.0.2: @@ -20216,7 +20212,7 @@ packages: resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} dependencies: no-case: 3.0.4 - tslib: 2.6.1 + tslib: 2.6.2 dev: true /pascalcase@0.1.1: @@ -21159,7 +21155,7 @@ packages: react: 18.2.0 react-remove-scroll-bar: 2.3.4(@types/react@18.0.28)(react@18.2.0) react-style-singleton: 2.2.1(@types/react@18.0.28)(react@18.2.0) - tslib: 2.6.1 + tslib: 2.6.2 use-callback-ref: 1.3.0(@types/react@18.0.28)(react@18.2.0) use-sidecar: 1.1.2(@types/react@18.0.28)(react@18.2.0) dev: true @@ -21332,7 +21328,7 @@ packages: ast-types: 0.16.1 esprima: 4.0.1 source-map: 0.6.1 - tslib: 2.6.1 + tslib: 2.6.2 dev: true /receptacle@1.3.2: @@ -21866,7 +21862,7 @@ packages: /rxjs@7.8.1: resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==} dependencies: - tslib: 2.6.1 + tslib: 2.6.2 dev: true /sade@1.8.1: @@ -23726,6 +23722,7 @@ packages: /tslib@2.6.1: resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==} + dev: true /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}