Move Coinbase button into its own component (#1741)

* Break custom coinbase button into its own component * Index file * Use new import
AudiusProject · Aug 19, 2022 · a88f8c0 · a88f8c0
1 parent 6c204c6
commit a88f8c0
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 49 deletions.
diff --git a/packages/web/src/components/coinbase-pay-button/CoinbasePayButtonCustom.module.css b/packages/web/src/components/coinbase-pay-button/CoinbasePayButtonCustom.module.css
@@ -0,0 +1,40 @@
+.coinbaseButton:not(:disabled) {
+  background: transparent !important;
+  border: 1px solid #0052ff;
+}
+.coinbaseButton .coinbaseLogo {
+  vertical-align: baseline;
+  margin-left: 4px;
+}
+.coinbaseButton .textClassName {
+  color: #0052ff;
+  font-size: var(--font-2xl);
+  font-weight: var(--font-demi-bold);
+  text-transform: none;
+}
+.coinbaseLogo path {
+  transition: all var(--quick);
+}
+
+/** Hover **/
+.coinbaseButton:hover:not(:disabled) {
+  background: #0052ff !important;
+  transform: none;
+}
+.coinbaseButton:hover:not(:disabled) .textClassName {
+  color: var(--static-white);
+}
+.coinbaseButton:hover:not(:disabled) .coinbaseLogo path {
+  fill: var(--static-white);
+}
+
+/** Disabled **/
+.coinbaseButton:disabled {
+  background: var(--neutral-light-6);
+}
+.coinbaseButton:disabled .textClassName {
+  color: var(--static-white);
+}
+.coinbaseButton:disabled .coinbaseLogo path {
+  fill: var(--static-white);
+}
diff --git a/packages/web/src/components/coinbase-pay-button/CoinbasePayButtonCustom.tsx b/packages/web/src/components/coinbase-pay-button/CoinbasePayButtonCustom.tsx
@@ -0,0 +1,33 @@
+import { Button, ButtonProps, ButtonType } from '@audius/stems'
+
+import { ReactComponent as CoinbaseLogo } from 'assets/img/coinbase-pay/LogoCoinbase.svg'
+
+import styles from './CoinbasePayButtonCustom.module.css'
+
+const messages = {
+  buyWith: 'Buy with',
+  buyWithCoinbase: 'Buy with Coinbase'
+}
+
+export const CoinbasePayButtonCustom = (props: Partial<ButtonProps>) => {
+  return (
+    <Button
+      aria-label={messages.buyWithCoinbase}
+      text={
+        <>
+          <span>{messages.buyWith}</span>
+          <CoinbaseLogo
+            className={styles.coinbaseLogo}
+            width={97}
+            height={18}
+          />
+        </>
+      }
+      type={ButtonType.GLASS}
+      includeHoverAnimations
+      className={styles.coinbaseButton}
+      textClassName={styles.textClassName}
+      {...props}
+    />
+  )
+}
diff --git a/packages/web/src/components/coinbase-pay-button/index.ts b/packages/web/src/components/coinbase-pay-button/index.ts
@@ -0,0 +1,3 @@
+export { CoinbasePayButtonCustom } from './CoinbasePayButtonCustom'
+export { CoinbasePayButton } from './CoinbasePayButton'
+export { CoinbasePayButtonProvider } from './CoinbasePayButtonProvider'
diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.module.css b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.module.css
@@ -158,31 +158,3 @@
   opacity: 0.5;
   background-color: hsla(0, 0%, 100%, 0.1);
 }
-
-.coinbaseButton {
-  background: transparent !important;
-  border: 1px solid #0052ff;
-}
-.coinbaseButton .coinbaseLogo {
-  vertical-align: baseline;
-  margin-left: 4px;
-}
-.coinbaseButton .textClassName {
-  color: #0052ff;
-  font-size: var(--font-2xl);
-  font-weight: var(--font-demi-bold);
-  text-transform: none;
-}
-.coinbaseButton:hover {
-  background: #0052ff !important;
-  transform: none;
-}
-.coinbaseButton:hover .textClassName {
-  color: var(--static-white);
-}
-.coinbaseLogo path {
-  transition: all var(--quick);
-}
-.coinbaseButton:hover .coinbaseLogo path {
-  fill: var(--static-white);
-}
diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx
@@ -6,7 +6,6 @@ import BN from 'bn.js'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { ReactComponent as CoinbaseLogo } from 'assets/img/coinbase-pay/LogoCoinbase.svg'
 import { ReactComponent as IconCaretDownLine } from 'assets/img/iconCaretDownLine.svg'
 import { ReactComponent as IconCaretUpLine } from 'assets/img/iconCaretUpLine.svg'
 import { ReactComponent as IconReceive } from 'assets/img/iconReceive.svg'
@@ -25,6 +24,7 @@ import {
   getAccountTotalBalance
 } from 'common/store/wallet/selectors'
 import { formatWei } from 'common/utils/wallet'
+import { CoinbasePayButtonCustom } from 'components/coinbase-pay-button'
 import MobileConnectWalletsDrawer from 'components/mobile-connect-wallets-drawer/MobileConnectWalletsDrawer'
 import { isMobile } from 'utils/clientUtil'
 
@@ -42,9 +42,7 @@ const messages = {
   checkoutWithCoinbase: 'Checkout with Coinbase',
   showAdvanced: 'Show Advanced',
   hideAdvanced: 'Hide Advanced',
-  advancedOptions: 'Advanced Options',
-  buyWith: 'Buy with',
-  buyWithCoinbase: 'Buy with Coinbase'
+  advancedOptions: 'Advanced Options'
 }
 const IS_NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
@@ -212,23 +210,7 @@ export const WalletManagementTile = () => {
             </div>
           </div>
         </div>
-        <Button
-          aria-label={messages.buyWithCoinbase}
-          text={
-            <>
-              <span>{messages.buyWith}</span>
-              <CoinbaseLogo
-                className={styles.coinbaseLogo}
-                width={97}
-                height={18}
-              />
-            </>
-          }
-          type={ButtonType.GLASS}
-          includeHoverAnimations
-          className={styles.coinbaseButton}
-          textClassName={styles.textClassName}
-        />
+        <CoinbasePayButtonCustom />
         <ToggleCollapseButton
           className={styles.advancedToggle}
           showText={messages.showAdvanced}