Chore: add walletconnect styling extension points via class names (#85)

* chore: add extension points via class names to be able to customize walletconnect

* chore: bump version to 2.3.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xdefi/wallets-connector",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Cross chain wallets connector with react hooks",
   "author": "garageinc",
   "license": "MIT",

src/components/Provider.tsx

@@ -114,18 +114,24 @@ export function WalletProvider({
 
     if (needInstall) {
       return installationLink ? (
-        <SLink href={installationLink} target='_blank'>
+        <SLink
+          className='walletconnect__provider-row--install-link'
+          href={installationLink}
+          target='_blank'
+        >
           <span>Please install {name}</span>
           <LinkOutSvg />
         </SLink>
       ) : (
-        <SLinkFallback>Please install {name}</SLinkFallback>
+        <SLinkFallback className='walletconnect__provider-row--install-link-fallback'>
+          Please install {name}
+        </SLinkFallback>
       )
     }
 
     if (isRecommended) {
       return (
-        <RecommendedWrapper>
+        <RecommendedWrapper className='walletconnect__provider-row--recommended'>
           <span>Recommended</span>
           <ArrowSvg />
         </RecommendedWrapper>
@@ -153,16 +159,17 @@ export function WalletProvider({
       onClick={handleClickProvider}
       available={isAvailable && !isConnected}
       active={isActive}
+      className='walletconnect__provider-row'
     >
-      <NameWrapper>
-        <SIcon>
+      <NameWrapper className='walletconnect__provider-row--name-wrapper'>
+        <SIcon className='walletconnect__provider-row--icon'>
           {typeof El !== 'string' ? (
             <El style={{ flexShrink: 0 }} />
           ) : (
             <img src={El} />
           )}
         </SIcon>
-        <SName>{name}</SName>
+        <SName className='walletconnect__provider-row--name'>{name}</SName>
       </NameWrapper>
       {rightPart}
     </SProviderWrapper>

src/components/WalletsModal/ChainCard/ChainCard.tsx

@@ -25,16 +25,22 @@ export const ChainCard = ({
   }
 
   return (
-    <Container disabled={disabled} onClick={disabled ? undefined : handleClick}>
-      <ChainImage>
+    <Container
+      className='walletconnect__select-chain--card'
+      disabled={disabled}
+      onClick={disabled ? undefined : handleClick}
+    >
+      <ChainImage className='walletconnect__select-chain--card-icon-container'>
         {icon}
         {checked ? (
           <CheckmarkWrapper>
             <Checkmark />
           </CheckmarkWrapper>
         ) : null}
       </ChainImage>
-      <ChainName>{label}</ChainName>
+      <ChainName className='walletconnect__select-chain--card-label'>
+        {label}
+      </ChainName>
     </Container>
   )
 }

src/components/WalletsModal/SelectChainSection/SelectChainSection.tsx

@@ -127,7 +127,7 @@ export const SelectChainSection = ({ provider, onSelect }: IProps) => {
 
   return (
     <Container>
-      <ChainContainer>
+      <ChainContainer className='walletconnect__select-chain--container'>
         {CHAIN_OPTIONS.map((chain) => (
           <ChainCard
             key={chain.value}