fix: account with copy click icon (#2550)

Co-authored-by: enesozturk <enesozturk.d@gmail.com>
reown-com · Jul 29, 2024 · a6416ab · a6416ab
1 parent 86983f0
commit a6416ab
Show file tree

Hide file tree

Showing 14 changed files with 10,938 additions and 14,206 deletions.
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -25,6 +25,7 @@
     "zustand": "4.5.2"
   },
   "devDependencies": {
+    "@types/node": "20.11.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.18",

diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json
@@ -39,12 +39,11 @@
     "@emotion/styled": "11.11.0",
     "@sentry/browser": "7.92.0",
     "@sentry/react": "7.92.0",
-    "@solana/wallet-adapter-backpack": "0.1.14",
     "@solana/wallet-adapter-wallets": "0.19.32",
     "@solana/web3.js": "1.91.7",
     "@tanstack/react-query": "5.24.8",
-    "@wagmi/core": "2.11.6",
     "@wagmi/connectors": "5.0.21",
+    "@wagmi/core": "2.11.6",
     "@walletconnect/ethereum-provider": "2.14.0",
     "@walletconnect/utils": "2.14.0",
     "@web3modal/ethers": "workspace:*",
@@ -69,6 +68,7 @@
     "@aws-sdk/client-cloudwatch": "3.509.0",
     "@mailsac/api": "1.0.5",
     "@playwright/test": "1.40.1",
+    "@types/node": "20.11.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.7",
     "dotenv": "16.3.1"

diff --git a/apps/laboratory/src/pages/library/solana.tsx b/apps/laboratory/src/pages/library/solana.tsx
@@ -5,8 +5,7 @@ import { solana, solanaDevnet, solanaTestnet } from '../../utils/ChainsUtil'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { SolanaTests } from '../../components/Solana/SolanaTests'
-import { BackpackWalletAdapter } from '@solana/wallet-adapter-backpack'
-import { HuobiWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
+import { SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
 
 const chains = [solana, solanaTestnet, solanaDevnet]
 
@@ -25,7 +24,8 @@ const modal = createWeb3Modal({
   termsConditionsUrl: 'https://walletconnect.com/terms',
   privacyPolicyUrl: 'https://walletconnect.com/privacy',
   customWallets: ConstantsUtil.CustomWallets,
-  wallets: [new BackpackWalletAdapter(), new HuobiWalletAdapter(), new SolflareWalletAdapter()]
+  enableSwaps: false,
+  wallets: [new SolflareWalletAdapter()]
 })
 
 ThemeStore.setModal(modal)

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "turbo run build --filter={./packages/*} --concurrency=30",
     "watch": "turbo run watch --filter={./packages/*} --concurrency=50 --continue",
     "gallery": "turbo run dev --filter={./apps/gallery}",
-    "laboratory": "turbo run dev --filter={./apps/laboratory}",
+    "laboratory": "pnpm --filter @apps/laboratory dev",
     "demo": "turbo run dev --filter={./apps/demo}",
     "examples": "turbo run dev --filter={./examples/*}",
     "build:gallery": "pnpm build; pnpm --filter=./apps/gallery build",

diff --git a/packages/scaffold-ui/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-account-default-widget/index.ts
@@ -10,16 +10,19 @@ import {
   EventsController,
   ConnectionController,
   SnackController,
-  ConstantsUtil,
-  OptionsController
+  ConstantsUtil as CommonConstantsUtil,
+  OptionsController,
+  ChainController
 } from '@web3modal/core'
-import { customElement } from '@web3modal/ui'
+import { customElement, UiHelperUtil } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import styles from './styles.js'
+import { ConstantsUtil } from '@web3modal/common'
 import { W3mFrameRpcConstants } from '@web3modal/wallet'
 
+import styles from './styles.js'
+
 @customElement('w3m-account-default-widget')
 export class W3mAccountDefaultWidget extends LitElement {
   public static override styles = styles
@@ -77,23 +80,16 @@ export class W3mAccountDefaultWidget extends LitElement {
     }
 
     const networkImage = AssetUtil.getNetworkImage(this.network)
-    const account = AccountController.state.allAccounts?.find(acc => acc.address === this.address)
-    const label = AccountController.state.addressLabels.get(this.address)
 
     return html`<wui-flex
         flexDirection="column"
         .padding=${['0', 'xl', 'm', 'xl'] as const}
         alignItems="center"
         gap="l"
       >
-        <wui-profile-button-v2
-          .onProfileClick=${this.handleSwitchAccountsView.bind(this)}
-          address=${ifDefined(this.address)}
-          icon="${account?.type === 'smartAccount' ? 'lightbulb' : 'mail'}"
-          avatarSrc=${ifDefined(this.profileImage ? this.profileImage : undefined)}
-          profileName=${ifDefined(label ? label : this.profileName)}
-          .onCopyClick=${this.onCopyAddress.bind(this)}
-        ></wui-profile-button-v2>
+        ${ChainController.state.activeChain === ConstantsUtil.CHAIN.EVM
+          ? this.multiAccountTemplate()
+          : this.singleAccountTemplate()}
         <wui-flex flexDirection="column" alignItems="center">
           <wui-text variant="paragraph-500" color="fg-200"
             >${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)}</wui-text
@@ -118,16 +114,7 @@ export class W3mAccountDefaultWidget extends LitElement {
             ${this.network?.name ?? 'Unknown'}
           </wui-text>
         </wui-list-item>
-        ${this.onrampTemplate()} ${this.swapsTemplate()}
-        <wui-list-item
-          iconVariant="blue"
-          icon="clock"
-          iconSize="sm"
-          ?chevron=${true}
-          @click=${this.onTransactions.bind(this)}
-        >
-          <wui-text variant="paragraph-500" color="fg-100">Activity</wui-text>
-        </wui-list-item>
+        ${this.onrampTemplate()} ${this.swapsTemplate()} ${this.activityTemplate()}
         <wui-list-item
           variant="icon"
           iconVariant="overlay"
@@ -145,6 +132,7 @@ export class W3mAccountDefaultWidget extends LitElement {
   // -- Private ------------------------------------------- //
   private onrampTemplate() {
     const { enableOnramp } = OptionsController.state
+    const isSolana = ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA
 
     if (!enableOnramp) {
       return null
@@ -154,14 +142,32 @@ export class W3mAccountDefaultWidget extends LitElement {
       <wui-list-item
         iconVariant="blue"
         icon="card"
-        ?chevron=${true}
+        ?chevron=${!isSolana}
+        ?disabled=${isSolana}
         @click=${this.handleClickPay.bind(this)}
       >
-        <wui-text variant="paragraph-500" color="fg-100">Buy crypto</wui-text>
+        <wui-text variant="paragraph-500" color="fg-100" ?disabled=${isSolana}>Buy crypto</wui-text>
+        ${isSolana ? html`<wui-tag variant="main">Coming soon</wui-tag>` : ''}
       </wui-list-item>
     `
   }
 
+  private activityTemplate() {
+    const isSolana = ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA
+
+    return html` <wui-list-item
+      iconVariant="blue"
+      icon="clock"
+      iconSize="sm"
+      ?chevron=${!isSolana}
+      ?disabled=${isSolana}
+      @click=${this.onTransactions.bind(this)}
+    >
+      <wui-text variant="paragraph-500" color="fg-100" ?disabled=${isSolana}> Activity </wui-text>
+      ${isSolana ? html`<wui-tag variant="main">Coming soon</wui-tag>` : ''}
+    </wui-list-item>`
+  }
+
   private swapsTemplate() {
     const { enableSwaps } = OptionsController.state
 
@@ -185,7 +191,7 @@ export class W3mAccountDefaultWidget extends LitElement {
     const type = StorageUtil.getConnectedConnector()
     const authConnector = ConnectorController.getAuthConnector()
     const { origin } = location
-    if (!authConnector || type !== 'AUTH' || origin.includes(ConstantsUtil.SECURE_SITE)) {
+    if (!authConnector || type !== 'AUTH' || origin.includes(CommonConstantsUtil.SECURE_SITE)) {
       return null
     }
 
@@ -228,6 +234,63 @@ export class W3mAccountDefaultWidget extends LitElement {
     `
   }
 
+  private singleAccountTemplate() {
+    return html`
+      <wui-avatar
+        alt=${ifDefined(this.address)}
+        address=${ifDefined(this.address)}
+        imageSrc=${ifDefined(this.profileImage === null ? undefined : this.profileImage)}
+      ></wui-avatar>
+      <wui-flex flexDirection="column" alignItems="center">
+        <wui-flex gap="3xs" alignItems="center" justifyContent="center">
+          <wui-text variant="large-600" color="fg-100">
+            ${this.profileName
+              ? UiHelperUtil.getTruncateString({
+                  string: this.profileName,
+                  charsStart: 20,
+                  charsEnd: 0,
+                  truncate: 'end'
+                })
+              : UiHelperUtil.getTruncateString({
+                  string: this.address ? this.address : '',
+                  charsStart: 4,
+                  charsEnd: 4,
+                  truncate: 'middle'
+                })}
+          </wui-text>
+          <wui-icon-link
+            size="md"
+            icon="copy"
+            iconColor="fg-200"
+            @click=${this.onCopyAddress}
+          ></wui-icon-link> </wui-flex
+      ></wui-flex>
+    `
+  }
+
+  private multiAccountTemplate() {
+    if (!this.address) {
+      throw new Error('w3m-account-view: No account provided')
+    }
+
+    const account = AccountController.state.allAccounts?.find(acc => acc.address === this.address)
+    const label = AccountController.state.addressLabels.get(this.address)
+
+    return html`
+      <wui-profile-button-v2
+        .onProfileClick=${this.handleSwitchAccountsView.bind(this)}
+        address=${ifDefined(this.address)}
+        icon="${account?.type === W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT &&
+        ChainController.state.activeChain === ConstantsUtil.CHAIN.EVM
+          ? 'lightbulb'
+          : 'mail'}"
+        avatarSrc=${ifDefined(this.profileImage ? this.profileImage : undefined)}
+        profileName=${ifDefined(label ? label : this.profileName)}
+        .onCopyClick=${this.onCopyAddress.bind(this)}
+      ></wui-profile-button-v2>
+    `
+  }
+
   private isAllowedNetworkSwitch() {
     const requestedCaipNetworks = NetworkController.getRequestedCaipNetworks()
     const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false

diff --git a/packages/scaffold-ui/src/partials/w3m-account-default-widget/styles.ts b/packages/scaffold-ui/src/partials/w3m-account-default-widget/styles.ts
@@ -17,6 +17,10 @@ export default css`
     margin-bottom: var(--wui-spacing-3xs);
   }
 
+  wui-list-item > wui-text {
+    flex: 1;
+  }
+
   w3m-transactions-view {
     max-height: 200px;
   }
@@ -45,7 +49,7 @@ export default css`
     box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
     background-color: var(--wui-color-gray-glass-002);
     border-radius: 24px;
-    transaction: background-color 0.2s linear;
+    transition: background-color 0.2s linear;
   }
 
   .account-button:hover {

diff --git a/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts b/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts
@@ -2,6 +2,7 @@ import { DateUtil } from '@web3modal/common'
 import type { Transaction, TransactionImage } from '@web3modal/common'
 import {
   AccountController,
+  ChainController,
   EventsController,
   OptionsController,
   RouterController,
@@ -11,8 +12,10 @@ import { TransactionUtil, customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import type { TransactionType } from '@web3modal/ui/src/utils/TypeUtil.js'
-import styles from './styles.js'
 import { W3mFrameRpcConstants } from '@web3modal/wallet'
+import { ConstantsUtil } from '@web3modal/common'
+
+import styles from './styles.js'
 
 // -- Helpers --------------------------------------------- //
 const PAGINATOR_ID = 'last-transaction'
@@ -30,6 +33,8 @@ export class W3mActivityList extends LitElement {
   // -- State & Properties -------------------------------- //
   @property() public page: 'account' | 'activity' = 'activity'
 
+  @state() private isSolana = ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA
+
   @state() private address: string | undefined = AccountController.state.address
 
   @state() private transactionsByYear = TransactionsController.state.transactionsByYear
@@ -46,6 +51,9 @@ export class W3mActivityList extends LitElement {
     TransactionsController.clearCursor()
     this.unsubscribe.push(
       ...[
+        ChainController.subscribeKey('activeChain', activeChain => {
+          this.isSolana = activeChain === ConstantsUtil.CHAIN.SOLANA
+        }),
         AccountController.subscribe(val => {
           if (val.isConnected) {
             if (this.address !== val.address) {
@@ -66,6 +74,12 @@ export class W3mActivityList extends LitElement {
   }
 
   public override firstUpdated() {
+    if (this.isSolana) {
+      this.loading = false
+      this.empty = true
+
+      return
+    }
     TransactionsController.fetchTransactions(this.address)
     this.createPaginationObserver()
   }
@@ -184,6 +198,19 @@ export class W3mActivityList extends LitElement {
   }
 
   private emptyStateActivity() {
+    const comingSoon = html`
+      <wui-text align="center" variant="paragraph-500" color="fg-100"
+        >Transaction history is coming soon!</wui-text
+      >
+    `
+    const empty = html` <wui-text align="center" variant="paragraph-500" color="fg-100"
+        >No Transactions yet</wui-text
+      >
+      <wui-text align="center" variant="small-500" color="fg-200"
+        >Start trading on dApps <br />
+        to grow your wallet!</wui-text
+      >`
+
     return html`<wui-flex
       class="emptyContainer"
       flexGrow="1"
@@ -203,18 +230,24 @@ export class W3mActivityList extends LitElement {
         borderColor="wui-color-bg-125"
       ></wui-icon-box>
       <wui-flex flexDirection="column" alignItems="center" gap="xs">
-        <wui-text align="center" variant="paragraph-500" color="fg-100"
-          >No Transactions yet</wui-text
-        >
-        <wui-text align="center" variant="small-500" color="fg-200"
-          >Start trading on dApps <br />
-          to grow your wallet!</wui-text
-        >
+        ${this.isSolana ? comingSoon : empty}
       </wui-flex>
     </wui-flex>`
   }
 
   private emptyStateAccount() {
+    const comingSoon = html`
+      <wui-text variant="paragraph-500" align="center" color="fg-100"
+        >Transaction history is coming soon!</wui-text
+      >
+    `
+    const empty = html` <wui-text variant="paragraph-500" align="center" color="fg-100"
+        >No activity yet</wui-text
+      >
+      <wui-text variant="small-400" align="center" color="fg-200"
+        >Your next transactions will appear here</wui-text
+      >`
+
     return html`<wui-flex
       class="contentContainer"
       alignItems="center"
@@ -236,10 +269,7 @@ export class W3mActivityList extends LitElement {
         justifyContent="center"
         flexDirection="column"
       >
-        <wui-text variant="paragraph-500" align="center" color="fg-100">No activity yet</wui-text>
-        <wui-text variant="small-400" align="center" color="fg-200"
-          >Your next transactions will appear here</wui-text
-        >
+        ${this.isSolana ? comingSoon : empty}
       </wui-flex>
       <wui-link @click=${this.onReceiveClick.bind(this)}>Trade</wui-link>
     </wui-flex>`

diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts
@@ -352,7 +352,9 @@ export class Web3ModalScaffold {
     OptionsController.setSdkVersion(options._sdkVersion)
     // Enabled by default
     OptionsController.setOnrampEnabled(options.enableOnramp !== false)
-    OptionsController.setEnableSwaps(options.enableSwaps !== false)
+    OptionsController.setEnableSwaps(
+      options.chain === ConstantsUtil.CHAIN.EVM && options.enableSwaps !== false
+    )
 
     if (options.metadata) {
       OptionsController.setMetadata(options.metadata)