feat: integrated with get-starknet-wallet (#163)

package.json

@@ -53,14 +53,14 @@
     ]
   },
   "dependencies": {
-    "@argent/get-starknet": "^3.0.1",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@headlessui/react": "^1.5.0",
     "@metamask/onboarding": "^1.0.1",
     "@mui/material": "^5.5.3",
     "@mui/styles": "^5.5.0",
     "@splitbee/web": "^0.3.0",
+    "get-starknet-wallet": "^0.0.5",
     "js-logger": "^1.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/UI/WalletButton/WalletButton.js

@@ -27,6 +27,15 @@ export const WalletButton = ({account, logoPath, onClick}) => {
     return utils.object.evaluate(walletBtnTxt, {address});
   };
 
+  const renderWalletLogo = () => {
+    const logoSize = isMobile(breakpoint) ? WALLET_LOGO_SIZE_MOBILE : WALLET_LOGO_SIZE;
+    return logoPath.startsWith('data:image') ? (
+      <img alt={''} height={logoSize} src={logoPath} width={logoSize} />
+    ) : (
+      <DynamicIcon path={logoPath} size={logoSize} />
+    );
+  };
+
   return (
     <Button
       className={toClasses(styles.walletButton, styles[breakpoint.toLowerCase()])}
@@ -35,12 +44,7 @@ export const WalletButton = ({account, logoPath, onClick}) => {
       colorBorder={colorBeta}
       colorText={colorWhite}
       height={0}
-      icon={
-        <DynamicIcon
-          path={logoPath}
-          size={isMobile(breakpoint) ? WALLET_LOGO_SIZE_MOBILE : WALLET_LOGO_SIZE}
-        />
-      }
+      icon={renderWalletLogo()}
       text={getText()}
       onClick={onClick}
     />

src/config/faqs.js

@@ -22,7 +22,7 @@ export const faqs = [
           <li>Make sure you are not using incognito mode.</li>
           <li>
             Ensure that you have successfully installed the required wallets (MetaMask and
-            Argent X). If you haven’t installed one of these wallets, please do so and
+            a StarkNet wallet). If you haven’t installed one of these wallets, please do so and
             refresh the page.
           </li>
           <li>

src/config/wallets.js

@@ -10,11 +10,11 @@ const wallets = [
     logoPath: 'wallets/metamask/logo.svg'
   },
   {
-    id: 'argent',
-    name: 'Argent X',
+    id: 'gsw',
+    name: 'StarkNet Wallet',
     type: WalletType.L2,
     description: 'Login using a browser wallet',
-    logoPath: 'wallets/argent/logo.svg'
+    logoPath: 'wallets/gsw/logo.svg'
   }
 ];
 

src/hooks/useWalletHandlerProvider.js

@@ -1,11 +1,11 @@
 import {useCallback, useEffect, useState} from 'react';
 
 import WalletsConfig from '../config/wallets.js';
-import {ArgentX, MetaMask} from '../wallets';
+import {GetStarknetWallet, MetaMask} from '../wallets';
 
 const SUPPORTED_HANDLERS_REGISTRY = {
   metamask: MetaMask,
-  argent: ArgentX
+  gsw: GetStarknetWallet
 };
 
 export const useWalletHandlerProvider = () => {

src/libs/starknet.js

@@ -1,4 +1,4 @@
-import {getStarknet} from '@argent/get-starknet';
+import {getStarknet} from 'get-starknet-wallet';
 import * as starknet from 'starknet';
 
 export {starknet, getStarknet};

src/providers/WalletsProvider/WalletsProvider.js

@@ -42,8 +42,15 @@ export const WalletsProvider = ({children}) => {
 
   const connectL2Wallet = async walletConfig => {
     try {
-      await getStarknet().enable(!autoConnect && {showModal: true});
-      setL2WalletConfig(walletConfig);
+      const wallet = getStarknet();
+      const enabled = await wallet
+        .enable(!autoConnect && {showModal: true})
+        .then(address => !!address?.length);
+      if (enabled) {
+        walletConfig.name = wallet.name || walletConfig.name;
+        walletConfig.logoPath = wallet.icon || walletConfig.logoPath;
+        setL2WalletConfig(walletConfig);
+      }
       // eslint-disable-next-line no-empty
     } catch {}
   };

src/wallets/argent-x.js → src/wallets/get-starknet-wallet.js

@@ -1,6 +1,6 @@
 import {getStarknet} from '../libs';
 
-export class ArgentX {
+export class GetStarknetWallet {
   constructor(config) {
     this.config = config;
   }

src/wallets/index.js

@@ -1,2 +1,2 @@
-export * from './argent-x';
+export * from './get-starknet-wallet';
 export * from './metamask';

yarn.lock

@@ -120,11 +120,6 @@
     "@web3-react/types" "^6.0.7"
     tiny-warning "^1.0.3"
 
-"@argent/get-starknet@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@argent/get-starknet/-/get-starknet-3.0.1.tgz#b3f80fd54528d4281bc5f3162d2576bb47c1c786"
-  integrity sha512-4jWzAU/vc6WWCrS5CabyrEVeQhYcYO6bLMgbJld+QRV6zlwgtRcsjjyfyxL9gKqP2IJI6V6dBHUdmvbxheUPQA==
-
 "@babel/cli@^7.16.0":
   version "7.17.6"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.17.6.tgz#169e5935f1795f0b62ded5a2accafeedfe5c5363"
@@ -6055,7 +6050,7 @@ bottleneck@^2.18.1:
   resolved "https://registry.yarnpkg.com/bottleneck/-/bottleneck-2.19.5.tgz#5df0b90f59fd47656ebe63c78a98419205cadd91"
   integrity sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==
 
-bowser@^2.9.0:
+bowser@^2.11.0, bowser@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
@@ -10399,6 +10394,13 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-starknet-wallet@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/get-starknet-wallet/-/get-starknet-wallet-0.0.5.tgz#dad317677d2367972af7a586bf73cd0069e636ab"
+  integrity sha512-OVOenKfqrC6TzRdyp58pSr4+APr6VaY66tlhlC3zbpK3lLgLl3XCZjnOUuI1sX8TsmhBRBlQJeO1guDnmu3b7w==
+  dependencies:
+    bowser "^2.11.0"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"