Button styling, event handling, loader:

- Refactor the method: move logic for unlocking wallet out of buyEvent - Add constants file - Add loader animation - Add style for button for network mismatch state
ProjectOpenSea · Feb 26, 2020 · 32c4b05 · 32c4b05
1 parent d7dc14d
commit 32c4b05
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 55 deletions.
diff --git a/dist/opensea-nft-card.min.js b/dist/opensea-nft-card.min.js
diff --git a/dist/opensea-nft-card.min.js.map b/dist/opensea-nft-card.min.js.map
diff --git a/example/index.html b/example/index.html
@@ -7,7 +7,7 @@
     <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
-    <script defer src="/dist/nft-card.js"></script>
+    <script defer src="/dist/opensea-nft-card.min.js"></script>
 
     <title>OpenSea Embeddable NFT example</title>
     <style media="screen">
@@ -41,11 +41,17 @@ <h3>Show users any crypto collectible and let them buy it straight from your sit
     </div>
 </div>
 <div class="card-container">
+<!--    <nft-card-->
+<!--            id="nftCard"-->
+<!--            contractAddress="0x7dca125b1e805dc88814aed7ccc810f677d3e1db"-->
+<!--            network="rinkeby"-->
+<!--            tokenId="18"-->
+<!--    >-->
+<!--    </nft-card>-->
+
     <nft-card
-            id="nftCard"
-            contractAddress="0x7dca125b1e805dc88814aed7ccc810f677d3e1db"
-            network="rinkeby"
-            tokenId="18"
+            contractAddress="0x2fb5d7dda4f1f20f974a0fdd547c38674e8d940c"
+            tokenId="20014"
     >
     </nft-card>
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1 @@
+export const NO_WEB3_ERROR: string = 'You need an Ethereum wallet to interact with this marketplace. Unlock your wallet, get MetaMask.io or Portis on desktop, or get Trust Wallet or Coinbase Wallet on mobile.'
diff --git a/src/loader.ts b/src/loader.ts
@@ -0,0 +1,88 @@
+import {css, customElement, html, LitElement} from 'lit-element'
+
+
+@customElement('loader-element')
+export class Loader extends LitElement {
+    static get styles() {
+        return css`
+           @keyframes pulse-opacity {
+                0% {
+                    opacity: 1;
+                }
+                16.666% {
+                    opacity: 1;
+                }
+                100% {
+                    opacity: 0;
+                }
+            }
+            .Loading {
+                transform: translate(-50%,-50%) rotate(30deg);
+                height: 81px;
+                width: 90px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+            .Loading .tri.upwards {
+                border-top: 0;
+                border-bottom: 27px solid #fff;
+            }
+            .Loading .tri:first-child {
+                left: 15px;
+                border-bottom-color: #00c9a4;
+            }
+            .Loading .tri:nth-child(2) {
+                left: 30px;
+                animation-delay: .1s;
+                border-top-color: #00ffd0;
+            }
+            .Loading .tri:nth-child(3) {
+                left: 45px;
+                animation-delay: .2s;
+                border-bottom-color: #00d7d1;
+            }
+            .Loading .tri:nth-child(4) {
+                left: 45px;
+                top: 27px;
+                animation-delay: .3s;
+                border-top-color: #0095be;
+            }
+            .Loading .tri:nth-child(5) {
+                top: 27px;
+                left: 30px;
+                animation-delay: .4s;
+                border-bottom-color: #007296;
+            }
+             .Loading .tri:nth-child(6) {
+                top: 27px;
+                left: 15px;
+                animation-delay: .5s;
+                border-top-color: #1c1f27;
+            }
+            .Loading .tri, .Loading .tri.upwards {
+                border-left: 15px solid transparent;
+                border-right: 15px solid transparent;
+            }
+            .Loading .tri {
+                position: absolute;
+                opacity: 0;
+                animation: pulse-opacity .6s ease-in infinite;
+                border-top: 27px solid #fff;
+                border-bottom: 0;
+            }
+        `
+    }
+    public render() {
+        return (html`
+            <div class="Loading">
+                <div class="tri upwards"></div>
+                <div class="tri"></div>
+                <div class="tri upwards"></div>
+                <div class="tri"></div>
+                <div class="tri upwards"></div>
+                <div class="tri"></div>
+            </div>`
+        )
+    }
+}
diff --git a/src/nft-card-front.ts b/src/nft-card-front.ts
@@ -148,8 +148,8 @@ export class NftCardFrontTemplate extends LitElement {
       }
       .asset-action-info {
         position: absolute;
-        right: 10px;
-        top: 10px;
+        right: 5px;
+        top: 5px;
       }
       .asset-action-info #info-icon {
         cursor: pointer;
@@ -168,7 +168,7 @@ export class NftCardFrontTemplate extends LitElement {
   @property({type: Boolean}) public horizontal!: boolean
   @property({type: Object}) public state!: State
 
-  @property({type: Boolean}) private isLoading: boolean = true
+  // @property({type: Boolean}) private isLoading: boolean = true
   @property({type: Object}) private lastSaleData?: LastSaleData
 
   public updated(changedProperties: Map<string, string>) {
@@ -178,7 +178,7 @@ export class NftCardFrontTemplate extends LitElement {
     changedProperties.forEach((_oldValue: string, propName: string) => {
       if (propName === 'asset') {
         // We got the data so we are done loading
-        this.isLoading = false
+        // this.isLoading = false
 
         // Check for a sell order to populate the UI with the sell information
         // TODO: We will be using lastSale here once added to SDK
@@ -240,7 +240,6 @@ export class NftCardFrontTemplate extends LitElement {
    * Implement `render` to define a template for your element.
    */
   public render() {
-    if (this.isLoading) { return html`front loading` }
     return html`
       <div class="card-front ${classMap({'is-vertical': !this.horizontal})}">
         <div class="asset-action-info">
@@ -278,7 +277,7 @@ export class NftCardFrontTemplate extends LitElement {
                 border="1px solid #E2E6EF"
               ></pill-element>
             </div>
-            <!-- TODO: This badge is optional and must be rendered programmatically -->
+            <!-- This badge is optional and must be rendered programmatically -->
             <!-- <div class="asset-detail-badge">
               <pill-element
                 label="New"
@@ -339,9 +338,14 @@ export class NftCardFrontTemplate extends LitElement {
       // No injected web3 found
       btnType = ButtonType.View
     }
+    // If we are informing the user to switch networks we need to append the
+    // network on which the asset resides
     const btnText: string = btnType === ButtonType.SwitchNetwork ? BTN_TEXT[btnType] + this.state.network : BTN_TEXT[btnType]
+    const btnStyle = btnType === ButtonType.SwitchNetwork ? styleMap({'background': 'rgb(183, 183, 183)', 'cursor': 'not-allowed'}) : ''
+
     return html`
       <button
+        style=${btnStyle}
         @click="${(e: any) => this.eventHandler(e, btnType)}"
       >
         ${btnText}

diff --git a/src/nft-card.ts b/src/nft-card.ts
@@ -5,10 +5,13 @@ import { styleMap } from 'lit-html/directives/style-map'
 import Web3 from 'web3'
 
 import { Network, OpenSeaPort } from 'opensea-js'
-import {OpenSeaAsset, OrderSide} from 'opensea-js/lib/types'
+import { OpenSeaAsset, OrderSide } from 'opensea-js/lib/types'
+
+import { NO_WEB3_ERROR } from './constants'
 
 /* lit-element classes */
 import './pill.ts'
+import './loader.ts'
 import './nft-card-front.ts'
 import './nft-card-back.ts'
 
@@ -17,7 +20,7 @@ export interface CustomWindow extends Window {
     web3: Web3
 }
 
-declare let window: CustomWindow
+declare const window: CustomWindow
 
 export interface ButtonEvent {
     detail: {
@@ -131,23 +134,15 @@ export class NftCard extends LitElement {
         //     console.log('accountsChanged', accounts)
         // })
     }
-    public async buyEvent() {
-        // Check to see that we are connected and we have an account
-        // This will run if user is logged out or has not granted access
-        if (this.provider) {
-            await this.connectWallet()
-            this.account = this.provider ? this.provider.selectedAddress : null
-        }
+
+    public async buyAsset() {
         if (this.isUnlocked) {
             const order = await this.seaport.api.getOrder({
                 side: OrderSide.Sell,
                 asset_contract_address: this.asset.assetContract.address,
                 token_id: this.tokenId
             })
-
-            // The buyer's wallet address, also the taker
-            const accountAddress = this.account
-            await this.seaport.fulfillOrder({order, accountAddress})
+            await this.seaport.fulfillOrder({order, accountAddress: this.account})
         }
     }
 
@@ -170,12 +165,12 @@ export class NftCard extends LitElement {
        >
        <div class="card-inner">
           ${this.loading ?
-            html`loader`
+            html`<loader-element></loader-element>`
             :
             html`
             <nft-card-front
               .horizontal=${this.horizontal}
-              @new-event="${this.eventHandler}"
+              @button-event="${this.eventHandler}"
               .asset=${this.asset}
               .state=${({
                 isOwnedByAccount: this.isOwnedByAccount,
@@ -207,8 +202,11 @@ export class NftCard extends LitElement {
             case 'manage':
                 this.goToOpenSea()
                 break
+            case 'unlock':
+                this.connectWallet()
+                break
             case 'buy':
-                this.buyEvent()
+                this.buyAsset()
                 break
             case 'flip':
                 this.flipCard()
@@ -255,12 +253,8 @@ export class NftCard extends LitElement {
                 this.isOwnedByAccount = this.asset.owner.address.toLowerCase() === this.account.toLowerCase()
             }
         } else {
-            const errorMessage =
-                'You need an Ethereum wallet to interact with this marketplace. ' +
-                'Unlock your wallet, get MetaMask.io or Portis on desktop, or' +
-                ' get Trust Wallet or Coinbase Wallet on mobile.'
-            alert(errorMessage)
-            throw new Error(errorMessage)
+            alert(NO_WEB3_ERROR)
+            throw new Error(NO_WEB3_ERROR)
         }
     }
 

diff --git a/src/pill.ts b/src/pill.ts
@@ -2,9 +2,9 @@
  * Import LitElement base class, html helper function,
  * and TypeScript decorators
  **/
-import {LitElement, html, customElement, property, css} from 'lit-element'
+import { LitElement, html, customElement, property, css } from 'lit-element'
 
-import {styleMap} from 'lit-html/directives/style-map'
+import { styleMap } from 'lit-html/directives/style-map'
 
 /**
  * Use the customElement decorator to define your class as
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const NO_WEB3_ERROR: string = 'You need an Ethereum wallet to interact with this marketplace. Unlock your wallet, get MetaMask.io or Portis on desktop, or get Trust Wallet or Coinbase Wallet on mobile.'