Skip to content
This repository has been archived by the owner on Sep 15, 2022. It is now read-only.

Commit

Permalink
Update package versions, remove dead code
Browse files Browse the repository at this point in the history
  • Loading branch information
@fafrd
fafrd committed Dec 2, 2021
1 parent 805eb8a commit 8bfbd32
Show file tree
Hide file tree
Showing 9 changed files with 2,721 additions and 1,717 deletions.
43 changes: 22 additions & 21 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,40 +21,41 @@
},
"homepage": "https://github.com/ProjectOpenSea/embeddable-nfts#readme",
"dependencies": {
"lit-element": "^2.2.1",
"lit-html": "^1.1.2",
"lit-element": "^3.0.2",
"lit-html": "^2.0.2",
"opensea-js": "^1.1.0",
"web3": "0.20.6"
"web3": "^1.6.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run build && git add dist"
}
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.8.7",
"@babel/preset-typescript": "^7.8.3",
"@types/node": "^13.9.1",
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"@webcomponents/webcomponentsjs": "^2.4.2",
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-decorators": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-typescript": "^7.16.0",
"@types/node": "^16.11.11",
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"@webcomponents/webcomponentsjs": "^2.6.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^4.2.3",
"prettier": "1.19.1",
"style-loader": "^1.1.3",
"ts-loader": "^6.2.1",
"husky": "^7.0.4",
"prettier": "^2.5.0",
"style-loader": "^3.3.1",
"ts-loader": "^8.2.0",
"tslint": "^6.1.0",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-plugin-prettier": "^2.3.0",
"typescript": "^3.8.3",
"typescript": "^4.5.2",
"web3-core": "^1.6.1",
"web3-typescript-typings": "^0.10.2",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3"
}
}
14 changes: 0 additions & 14 deletions src/constants.ts
View file

This file was deleted.

30 changes: 13 additions & 17 deletions src/nft-card-back.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,35 @@ const RANK_HEIGHT = 40
const RANK_MARGIN = 10
const rankStyle = {
height: RANK_HEIGHT + 'px',
marginBottom: RANK_MARGIN + 'px'
marginBottom: RANK_MARGIN + 'px',
}

const PROP_HEIGHT = 50
const PROP_MARGIN = RANK_MARGIN
const propStyle = {
height: PROP_HEIGHT + 'px',
marginBottom: PROP_MARGIN + 'px'
marginBottom: PROP_MARGIN + 'px',
}

const BOOST_HEIGHT = RANK_HEIGHT
const BOOST_MARGIN = RANK_MARGIN
const BOOST_PADDING = RANK_MARGIN
const boostStyle = {
height: BOOST_HEIGHT + 'px'
height: BOOST_HEIGHT + 'px',
}

const STAT_HEIGHT = PROP_HEIGHT
const STAT_MARGIN = RANK_MARGIN
const statStyle = {
height: RANK_HEIGHT + 'px',
marginBottom: RANK_MARGIN + 'px'
marginBottom: RANK_MARGIN + 'px',
}

const traitHeight = {
prop: PROP_HEIGHT + PROP_MARGIN,
boost: BOOST_HEIGHT + BOOST_MARGIN + BOOST_PADDING,
ranking: RANK_HEIGHT + RANK_MARGIN,
stat: STAT_HEIGHT + STAT_MARGIN
stat: STAT_HEIGHT + STAT_MARGIN,
}

@customElement('nft-card-back')
Expand Down Expand Up @@ -283,7 +283,7 @@ export class NftCardBackTemplate extends LitElement {
const numRemaining = numberOfTraits - numRender
return {
numRender,
numRemaining
numRemaining,
}
}

Expand Down Expand Up @@ -321,9 +321,7 @@ export class NftCardBackTemplate extends LitElement {
<div class="trait_boost-value">
<p>+${value}</p>
</div>
<div class="trait_boost-name">
${formatTraitType(trait_type)}
</div>
<div class="trait_boost-name">${formatTraitType(trait_type)}</div>
</div>
`
)}
Expand Down Expand Up @@ -359,13 +357,11 @@ export class NftCardBackTemplate extends LitElement {
<p class="attribute-title">Stats</p>
</div>
${stats.slice(0, numRender).map(
stat =>
(stat) =>
html`
<div class="stat" style=${styleMap(statStyle)}>
<div class="stat-value">${stat.value}</div>
<div class="stat-name">
${formatTraitType(stat.trait_type)}
</div>
<div class="stat-name">${formatTraitType(stat.trait_type)}</div>
</div>
`
)}
Expand Down Expand Up @@ -476,7 +472,7 @@ export class NftCardBackTemplate extends LitElement {
<div
class="card-back-inner ${classMap({
'is-vertical': !this.horizontal
'is-vertical': !this.horizontal,
})}"
>
<div class="attribute-container attribute-properties">
Expand Down Expand Up @@ -515,7 +511,7 @@ export class NftCardBackTemplate extends LitElement {
props: [],
stats: [],
rankings: [],
boosts: []
boosts: [],
}
const { traits: assetTraits, collectionTraits } = traitData

Expand All @@ -527,9 +523,9 @@ export class NftCardBackTemplate extends LitElement {
this.traits[type + 's'].push({
value: trait.value,
...(type === TraitType.Ranking
? { max: (collectionTraits[name].max as unknown) as number }
? { max: collectionTraits[name].max as unknown as number }
: {}),
trait_type: trait.trait_type
trait_type: trait.trait_type,
})
}
}
Expand Down
76 changes: 10 additions & 66 deletions src/nft-card-front.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,16 @@ import {
Network,
OpenSeaAsset,
OpenSeaCollection,
OpenSeaFungibleToken
OpenSeaFungibleToken,
} from 'opensea-js/lib/types'
/* lit-element classes */
import './info-button'
import { toBaseDenomination } from './utils'
import { ButtonType, PriceType, State } from './types'
import { BTN_TEXT } from './constants'
import { PriceType, State } from './types'

@customElement('nft-card-front')
export class NftCardFrontTemplate extends LitElement {
@property({ type: Object }) public asset?: OpenSeaAsset
@property({ type: Boolean }) public isOwnedByAccount!: boolean
@property({ type: String }) public account!: string
@property({ type: Boolean }) public horizontal!: boolean
@property({ type: Object }) public state!: State

Expand Down Expand Up @@ -155,7 +152,7 @@ export class NftCardFrontTemplate extends LitElement {
const cardDisplayStyle = collection.displayData.card_display_style
return {
padding: cardDisplayStyle === 'padded' ? '10px' : '',
'background-size': `${cardDisplayStyle}`
'background-size': `${cardDisplayStyle}`,
}
}

Expand Down Expand Up @@ -217,7 +214,7 @@ export class NftCardFrontTemplate extends LitElement {
<a
class="asset-link"
href="http://${network === Network.Rinkeby
? 'rinkeby.'
? 'testnets.'
: ''}opensea.io/assets/${collection.slug}"
target="_blank"
>
Expand Down Expand Up @@ -245,9 +242,7 @@ export class NftCardFrontTemplate extends LitElement {
>
</div>
${this.getAssetPriceTemplate()}
<div class="asset-action-buy">
${this.getButtonTemplate()}
</div>
<div class="asset-action-buy">${this.getButtonTemplate()}</div>
</div>
</div>
`
Expand All @@ -260,8 +255,8 @@ export class NftCardFrontTemplate extends LitElement {
public eventHandler(_event: any, type: string) {
const buttonEvent = new CustomEvent('button-event', {
detail: {
type
}
type,
},
})
this.dispatchEvent(buttonEvent)
}
Expand All @@ -274,9 +269,7 @@ export class NftCardFrontTemplate extends LitElement {
return html`
<div class="asset-detail-price asset-detail-price-${priceType}">
${priceType === PriceType.Previous
? html`
<div class="previous-value">Prev.&nbsp;</div>
`
? html` <div class="previous-value">Prev.&nbsp;</div> `
: null}
${paymentToken.imageUrl
? html`<img src="${paymentToken.imageUrl}" alt="" ></img>`
Expand Down Expand Up @@ -305,7 +298,7 @@ export class NftCardFrontTemplate extends LitElement {
class="asset-image"
style=${styleMap({
'background-image': `url(${imageUrl})`,
...NftCardFrontTemplate.getAssetImageStyles(collection)
...NftCardFrontTemplate.getAssetImageStyles(collection),
})}
></div>
</a>
Expand All @@ -316,58 +309,9 @@ export class NftCardFrontTemplate extends LitElement {
private getButtonTemplate() {
return html`
<button @click="${(e: any) => this.eventHandler(e, 'view')}">
${BTN_TEXT[ButtonType.Buy]}
buy this item ❯
</button>
`
}

// @ts-ignore
private _getButtonTemplate() {
let btnType: ButtonType

if (this.state.hasWeb3) {
if (this.state.isUnlocked) {
if (this.state.isMatchingNetwork) {
if (this.state.isOwnedByAccount) {
// The account owns asset
btnType = ButtonType.Manage
} else {
// Asset is for sale and not owned by currently selected account
btnType = ButtonType.Buy
}
} else {
// Network does not match or connected to unsupported network
btnType = ButtonType.SwitchNetwork // "switchNetwork" + this.state.network
}
} else {
// Wallet is locked or access not granted
btnType = ButtonType.Unlock
}
} else {
// 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
? {
'background-color': 'rgb(183, 183, 183)',
cursor: 'not-allowed'
}
: null

return html`
<button
style=${btnStyle ? styleMap(btnStyle) : ''}
@click="${(e: any) => this.eventHandler(e, btnType)}"
>
${btnText}
</button>
`
}
}
Loading

0 comments on commit 8bfbd32

Please sign in to comment.