TESTNET | NEAR Transaction AzSy1wH15hjFv1LJFYBfHgsCexvoqWoZqUdX47PqbFJf

"header": {

"": "//include common\\nconst widgetSrc = (component) => {\\n if (context.networkId === \\\"mainnet\\\")\\n return `monsters-bos.near/widget/${component}`;\\n else\\n return `monstersdev.testnet/widget/${component}`;\\n}\\nconst ftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-alpha.near\\\" : \\\"dev-1693882284306-75813657022630\\\";\\nconst nftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-nfts.near\\\" : \\\"dev-1697387315613-37447934459971\\\";\\n\\nconst App = styled.div`\\n\\tbutton {\\n\\t\\t\\tbackground-color: #563D7C;\\n\\t\\t\\tborder: none;\\n\\t\\t\\tcolor: #EDEDED;\\n\\t\\t\\tpadding: 10px 20px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tfont-size: 16px;\\n\\t\\t\\tborder-radius: 5px;\\n\\t\\t\\tbox-shadow: 2px 2px 4px #000;\\n\\t\\t\\ttransition: background-color 0.3s ease;\\n\\t}\\n\\n\\tbutton:hover {\\n\\t\\t\\tbackground-color: #8C6BB1;\\n\\t}\\n`;\\n\\n\\n\\nconst Nav = styled.div`\\n display: flex;\\n align-items: center;\\n\\n ul {\\n display: flex;\\n list-style-type: none;\\n margin: 0;\\n padding: 0;\\n .selected {\\n text-decoration:underline;\\n }\\n \\n li {\\n margin: 0 10px;\\n cursor: pointer;\\n }\\n }\\n`;\\n\\nconst Logo = styled.div`\\n font-size: 24px;\\n font-weight: bold;\\n color: #FFD700;\\n\\n margin-right: auto; // Pushes it to the left\\n cursor: pointer;\\n`;\\n\\nconst StyledHeader = styled.div`\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(to right, #120835, #8C6BB1);\\n padding: 10px 50px;\\n box-shadow: 0 2px 10px var(--blackA7);\\n text-shadow: 1px 1px 2px black;\\n a {\\n text-decoration: none;\\n color: #FFD700;\\n transition: color 0.3s;\\n\\n &:hover {\\n color: #FFA500;\\n }\\n }\\n\\n\\n`;\\n\\nconst NavItem = ({ section, label }) => {\\n const navClassName = (section) => {\\n return \\\"\\\";\\n };\\n\\n return (\\n <li onClick={() => selectSection(section)}>\\n <a className={navClassName(section)} href={section}>{label}</a>\\n </li>\\n );\\n};\\n\\nconst Header = () => {\\n return (\\n <StyledHeader>\\n <Logo>\\n <a href=\\\"https://nearmonsters.com\\\">\\n NEAR Monsters\\n </a>\\n </Logo>\\n <Nav>\\n <ul>\\n <NavItem section=\\\"purchase\\\" label=\\\"Purchase ALPHA\\\" />\\n <NavItem section=\\\"openPack\\\" label=\\\"Open\\\" />\\n <NavItem section=\\\"inventory\\\" label=\\\"Inventory\\\" />\\n <li>\\n <Widget\\n src={widgetSrc(\\\"ProfileImage\\\")}\\n props={{\\n profile,\\n accountId,\\n className: \\\"float-start d-inline-block me-2\\\",\\n }}\\n />\\n </li>\\n </ul>\\n </Nav>\\n </StyledHeader>\\n );\\n};\\n\\nreturn <Header />\\n"

},

"openPack": {

"": "//include common\\nconst widgetSrc = (component) => {\\n if (context.networkId === \\\"mainnet\\\")\\n return `monsters-bos.near/widget/${component}`;\\n else\\n return `monstersdev.testnet/widget/${component}`;\\n}\\nconst ftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-alpha.near\\\" : \\\"dev-1693882284306-75813657022630\\\";\\nconst nftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-nfts.near\\\" : \\\"dev-1697387315613-37447934459971\\\";\\n\\nconst App = styled.div`\\n\\tbutton {\\n\\t\\t\\tbackground-color: #563D7C;\\n\\t\\t\\tborder: none;\\n\\t\\t\\tcolor: #EDEDED;\\n\\t\\t\\tpadding: 10px 20px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tfont-size: 16px;\\n\\t\\t\\tborder-radius: 5px;\\n\\t\\t\\tbox-shadow: 2px 2px 4px #000;\\n\\t\\t\\ttransition: background-color 0.3s ease;\\n\\t}\\n\\n\\tbutton:hover {\\n\\t\\t\\tbackground-color: #8C6BB1;\\n\\t}\\n`;\\n\\n\\n\\nconst alphaPacksOwned = Near.view(ftContract, \\\"ft_balance_of\\\", {account_id: context.accountId});\\nconst isOpenDisabled = (alphaPacksOwned === 0);\\nconst nftsOwned = Near.view(nftContract, \\\"nft_supply_for_owner\\\", {account_id: context.accountId});\\nconst nfts = Near.view(nftContract, \\\"nft_tokens_for_owner\\\", {account_id: context.accountId, limit:1000});//{from_index: (nftsOwned-5).toString(), limit:5});\\n\\nconst sortedNfts = nfts.sort((a, b) => {\\n const dateA = Big(a.metadata.issued_at.replace(\\\".\\\", \\\"\\\").replace(\\\"Z\\\", \\\"\\\"));\\n const dateB = Big(b.metadata.issued_at.replace(\\\".\\\", \\\"\\\").replace(\\\"Z\\\", \\\"\\\"));\\n return (dateA < dateB) ? 1 : -1;\\n});\\n\\nconst revealNfts = sortedNfts.slice(0, 5);\\n\\nconst lastOpened = Storage.privateGet(\\\"lastOpened\\\");\\nconst allowReveal = (sortedNfts.length > 0) && (!lastOpened || (Big(sortedNfts[0].metadata.issued_at.replace(\\\".\\\", \\\"\\\").replace(\\\"Z\\\", \\\"\\\")) > Big(lastOpened.replace(\\\".\\\", \\\"\\\").replace(\\\"Z\\\", \\\"\\\"))));\\n\\nState.init({error: null, reveal: [false, false, false, false, false]});\\n\\nconst CardList = styled.ul`\\n display: flex;\\n flex-wrap: wrap;\\n gap: 20px; // Provides spacing between each card.\\n justify-content: center; // Centers the cards in the middle.\\n padding: 0;\\n list-style-type: none; // Removes bullet points from the ul.\\n`;\\n\\nconst CardLi = styled.li`\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n padding: 10px;\\n box-sizing: border-box; // Ensures padding doesn\\\'t increase card size.\\n \\n img {\\n cursor: pointer;\\n }\\n`;\\n\\nconst UnrevealedCard = styled.div`\\n border: 3px solid;\\n`\\nconst StyledCard = styled.div`\\n border: 3px solid;\\n\\n ${({ rarity }) => {\\n switch (rarity) {\\n case \\\'Land\\\':\\n return `\\n border-color: #33FF33;\\n box-shadow: 0 0 10px gold;\\n `;\\n case \\\'Rare\\\':\\n return `\\n border-color: gold;\\n box-shadow: 0 0 10px gold;\\n `;\\n case \\\'Uncommon\\\':\\n return \\\'border-color: #3333FF;\\\';\\n default:\\n return \\\'border-color: gray;\\\';\\n }\\n }}\\n`;\\n\\nconst openPack = () => {\\n try {\\n Near.call(ftContract, \\\'open_pack\\\', {}, 300000000000000, 10000000000000000000000);\\n } catch (e) {\\n State.update({error:`Error from NEAR: ${e.message}`});\\n }\\n}\\n\\nconst getCurrentDatetime = () => {\\n //mirror smart contract format\\n const timestampMs = new Date().getTime();\\n const timestampNs = timestampMs * 1_000_000;\\n const timestampS = Math.floor(timestampNs / 1_000_000_000);\\n const remainingNs = timestampNs % 1_000_000_000;\\n const datetimeStr = `${timestampS}.000000000Z`;\\n return datetimeStr;\\n}\\n\\nconst reveal = (index) => {\\n let reveal = state.reveal;\\n reveal[index] = true;\\n State.update({ ...state, reveal: reveal });\\n};\\n\\nconst revealAll = () => {\\n let currentIndex = 0;\\n\\n const loop = () => {\\n if (currentIndex < 5) {\\n reveal(currentIndex);\\n currentIndex++;\\n setTimeout(loop, 500);\\n }\\n };\\n\\n loop();\\n};\\n\\nconst hide = () => {\\n Storage.privateSet(\\\"lastOpened\\\", getCurrentDatetime());\\n}\\n\\nconst RevealableCard = ({ index, nft }) => {\\n const revealCard = (index) => {\\n return () => {reveal(index);}\\n };\\n const rarity = () => {\\n return JSON.parse(nft.metadata.extra).rarity;\\n }\\n\\n const getRarityClass = (rarityValue) => {\\n switch(rarityValue) {\\n case \\\'Land\\\': return \\\'land-effect\\\';\\n case \\\'Rare\\\': return \\\'rare-effect\\\';\\n case \\\'Uncommon\\\': return \\\'uncommon-effect\\\';\\n default: return \\\'common-effect\\\';\\n }\\n };\\n\\n const getEffectClass = () => {\\n if (state.reveal[index]) {\\n return `revealed ${getRarityClass(rarity())}`;\\n }\\n return \\\'\\\';\\n };\\n\\n return (\\n <CardLi>\\n {\\n (!state.reveal[index]) ? (\\n <>\\n <UnrevealedCard rarity={rarity()}>\\n <img onClick={revealCard(index)} src={\\\"https://nearmonsters.s3.us-west-004.backblazeb2.com/alpha/final/back.png\\\"} width={278} height={406}/>\\n </UnrevealedCard>\\n <p>{\\\"Reveal\\\"}</p>\\n </>\\n ) : (\\n <>\\n <StyledCard rarity={rarity()}>\\n <img className={getEffectClass()} src={nft.metadata.media} width={278} height={406}/>\\n </StyledCard>\\n <p>{rarity()}</p>\\n </>\\n )\\n }\\n </CardLi>\\n );\\n};\\n\\nreturn (\\n <App>\\n <Widget src={widgetSrc(\\\"header\\\")}/>\\n <div class=\\\"container border border-info p-3\\\">\\n <h3 class=\\\"text-center\\\">\\n {state.error && <p className=\\\"error\\\">{state.error}</p>}\\n <div>\\n <div>\\n <span class=\\\"text-decoration-underline\\\">{alphaPacksOwned}</span> packs owned\\n <button onClick={openPack} disabled={isOpenDisabled}>Open</button>\\n <a href={\\\"purchase\\\"}>Buy More</a>\\n </div>\\n </div>\\n </h3>\\n {allowReveal &&\\n <div><p>Your pack is ready!</p>\\n {state.reveal.every((x) => x) && <button onClick={hide}>Hide</button>}\\n {state.reveal.some((x) => !x) && <button onClick={revealAll}>Reveal All</button>}\\n <CardList>\\n {revealNfts.map((nft, index) => (\\n <RevealableCard nft={nft} index={index} />\\n ))}\\n </CardList>\\n </div>\\n }\\n </div>\\n </App>\\n)\\n"

},

"purchase": {

"": "//include common\\nconst widgetSrc = (component) => {\\n if (context.networkId === \\\"mainnet\\\")\\n return `monsters-bos.near/widget/${component}`;\\n else\\n return `monstersdev.testnet/widget/${component}`;\\n}\\nconst ftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-alpha.near\\\" : \\\"dev-1693882284306-75813657022630\\\";\\nconst nftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-nfts.near\\\" : \\\"dev-1697387315613-37447934459971\\\";\\n\\nconst App = styled.div`\\n\\tbutton {\\n\\t\\t\\tbackground-color: #563D7C;\\n\\t\\t\\tborder: none;\\n\\t\\t\\tcolor: #EDEDED;\\n\\t\\t\\tpadding: 10px 20px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tfont-size: 16px;\\n\\t\\t\\tborder-radius: 5px;\\n\\t\\t\\tbox-shadow: 2px 2px 4px #000;\\n\\t\\t\\ttransition: background-color 0.3s ease;\\n\\t}\\n\\n\\tbutton:hover {\\n\\t\\t\\tbackground-color: #8C6BB1;\\n\\t}\\n`;\\n\\n\\nconst alphaPacksRemaining = Near.view(ftContract, \\\"ft_balance_of\\\", {account_id: ftContract});\\nconst alphaPacksOwned = Near.view(ftContract, \\\"ft_balance_of\\\", {account_id: context.accountId});\\nconst ONE_NEAR = Big(\\\"1e24\\\");\\nconst openPacksLink = \\\"https://test.near.org/monstersdev.testnet/widget/openPack\\\";\\nconst error = (context.accountId ? null : \\\"You must log in!\\\");\\nconst storageBalance = Near.view(ftContract, \\\"storage_balance_of\\\", {account_id: context.accountId});\\nconst isRegistered = (storageBalance !== null);\\nState.init({packsToBuy: null, estimatedCost: 0, error: error});\\n\\nconst register = () => {\\n try {\\n // Perform smart contract call to buy packs\\n Near.call(ftContract, \\\'storage_deposit\\\', {}, Big(\\\"300000000000000\\\"), ONE_NEAR/Big(100));\\n } catch (e) {\\n State.update({error:`Error from NEAR: ${e.message}`});\\n }\\n}\\n\\nconst AlphaPurchase = ({ maxBuy, ftContract }) => {\\n const handleInputChange = (e) => {\\n let value = parseInt(e.target.value, 10);\\n if (isNaN(value)) {\\n State.update({error:null, packsToBuy: null, estimatedCost: 0});\\n return;\\n }\\n if (value <= 0) {\\n State.update({error:\\\'Cannot buy less than 1 pack.\\\'});\\n return;\\n }\\n if (value > maxBuy) {\\n State.update({error:\\\'Cannot buy less than 1 pack.\\\'});\\n return;\\n }\\n State.update({error:null, packsToBuy: value, estimatedCost: (value * 4)});\\n };\\n\\n const handleSubmit = () => {\\n try {\\n // Perform smart contract call to buy packs\\n Near.call(ftContract, \\\'purchase\\\', {}, Big(\\\"300000000000000\\\"), state.packsToBuy*4*ONE_NEAR+300000000000000);\\n State.update({error:null});\\n } catch (e) {\\n State.update({error:`Error from NEAR: ${e.message}`});\\n }\\n };\\n\\n return (\\n <div>\\n {state.error && <p className=\\\"error\\\">{state.error}</p>}\\n <label htmlFor=\\\"packsToBuy\\\">Number of Packs: </label>\\n <input\\n id=\\\"packsToBuy\\\"\\n type=\\\"number\\\"\\n value={state.packsToBuy}\\n onChange={handleInputChange}\\n />\\n <button onClick={handleSubmit} disabled={state.error !== null}>Buy Packs</button>\\n <p>Estimated Cost: {state.estimatedCost} NEAR</p>\\n </div>\\n );\\n};\\n\\nreturn (\\n <App>\\n <Widget src={widgetSrc(\\\"header\\\")}/>\\n <div class=\\\"container border border-info p-3\\\">\\n <h3 class=\\\"text-center\\\">\\n <div>\\n <span class=\\\"text-decoration-underline\\\">{alphaPacksRemaining}</span> ALPHA packs remaining\\n </div>\\n <div>\\n <span class=\\\"text-decoration-underline\\\">{alphaPacksOwned}</span> packs owned\\n </div>\\n </h3>\\n {\\n isRegistered ? (\\n <>\\n <img src=\\\"https://github.com/martyn/near-monsters/blob/master/logo.jpeg?raw=true\\\" width={256}/>\\n <AlphaPurchase maxBuy={alphaPacksRemaining} ftContract={ftContract}/>\\n <a href={openPacksLink}>Open Packs</a>\\n </>\\n ) : (\\n <>\\n <img src=\\\"https://github.com/martyn/near-monsters/blob/master/logo.jpeg?raw=true\\\" width={256}/>\\n <button onClick={register}>Register</button>\\n </>\\n )\\n }\\n </div>\\n </App>\\n);\\n"

},

"inventory": {

"": "//include common\\nconst widgetSrc = (component) => {\\n if (context.networkId === \\\"mainnet\\\")\\n return `monsters-bos.near/widget/${component}`;\\n else\\n return `monstersdev.testnet/widget/${component}`;\\n}\\nconst ftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-alpha.near\\\" : \\\"dev-1693882284306-75813657022630\\\";\\nconst nftContract = (context.networkId === \\\"mainnet\\\") ? \\\"monsters-nfts.near\\\" : \\\"dev-1697387315613-37447934459971\\\";\\n\\nconst App = styled.div`\\n\\tbutton {\\n\\t\\t\\tbackground-color: #563D7C;\\n\\t\\t\\tborder: none;\\n\\t\\t\\tcolor: #EDEDED;\\n\\t\\t\\tpadding: 10px 20px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tfont-size: 16px;\\n\\t\\t\\tborder-radius: 5px;\\n\\t\\t\\tbox-shadow: 2px 2px 4px #000;\\n\\t\\t\\ttransition: background-color 0.3s ease;\\n\\t}\\n\\n\\tbutton:hover {\\n\\t\\t\\tbackground-color: #8C6BB1;\\n\\t}\\n`;\\n\\n\\nconst fullSetList = Near.view(nftContract, \\\"full_set_listing\\\", {});\\nconst nftsOwned = Near.view(nftContract, \\\"nft_tokens_for_owner\\\", {account_id: context.accountId, limit:50000});\\nconst ownedCount = nftsOwned.reduce((acc, nft) => {\\n const tokenId = nft.token_id.split(\\\':\\\')[0];\\n acc[tokenId] = (acc[tokenId] || 0) + 1;\\n return acc;\\n}, {});\\n\\nconst Container = styled.div`\\n display: flex;\\n flex-direction: row;\\n`;\\n\\nconst FilterPane = styled.div`\\n width: 20%;\\n padding: 20px;\\n border-right: 1px solid #ccc;\\n`;\\n\\nconst CardGrid = styled.div`\\n width: 80%;\\n display: grid;\\n grid-template-columns: repeat(3, 1fr);\\n gap: 16px;\\n padding: 20px;\\n`;\\n\\nconst Card = styled.div`\\n border: 1px solid #ccc;\\n padding: 16px;\\n text-align: center;\\n`;\\n\\nconst CardName = styled.label`\\n display: block;\\n margin-bottom: 8px;\\n`;\\n\\nconst CardImage = styled.img`\\n width: 278px;\\n height: auto;\\n`;\\n\\nState.init({error: null, owned: \\\"all\\\", rarity: \\\"all\\\", sort_by: \\\"id\\\"});\\nfunction setOwnedFilter(value) {\\n State.update({ ...state, owned: value });\\n}\\nfunction setRarityFilter(value) {\\n State.update({ ...state, rarity: value });\\n}\\nfunction setSortBy(value) {\\n State.update({ ...state, sort_by: value });\\n}\\nfunction sortByCriteria(cardA, cardB) {\\n if(state.sort_by === \\\"id\\\") {\\n return cardA.id.localeCompare(cardB.id);\\n } else if(state.sort_by === \\\"name\\\") {\\n return cardA.name.localeCompare(cardB.name);\\n } else if(state.sort_by === \\\"issued_at\\\") {\\n //TODO lookup in owned\\n return false;\\n }\\n\\n}\\nreturn (\\n <App>\\n <Widget src={widgetSrc(\\\"header\\\")}/>\\n <Container>\\n <FilterPane>\\n <div>\\n <label>Owned:</label>\\n <select onChange={(e) => setOwnedFilter(e.target.value)} value={state.ownedFilter}>\\n <option value=\\\"all\\\">All</option>\\n <option value=\\\"owned\\\">Owned Only</option>\\n <option value=\\\"missing\\\">Missing Only</option>\\n </select>\\n </div>\\n \\n <div>\\n <label>Rarity:</label>\\n <select onChange={(e) => setRarityFilter(e.target.value)} value={rarityFilter}>\\n <option value=\\\"all\\\">All</option>\\n <option value=\\\"Common\\\">Common</option>\\n <option value=\\\"Uncommon\\\">Uncommon</option>\\n <option value=\\\"Rare\\\">Rare</option>\\n <option value=\\\"Land\\\">Land</option>\\n </select>\\n </div>\\n <div>\\n <label>Sort by:</label>\\n <select onChange={(e) => setSortBy(e.target.value)} value={sortBy}>\\n <option value=\\\"id\\\">Card ID</option>\\n <option value=\\\"name\\\">Name</option>\\n </select>\\n </div>\\n\\n </FilterPane>\\n <CardGrid>\\n {fullSetList.sort(sortByCriteria).map((item, index) => (\\n (((state.owned == \\\"owned\\\" && (ownedCount[item.id] || 0) > 0) || (state.owned == \\\"missing\\\" && !ownedCount[item.id]) ||state.owned == \\\"all\\\") &&\\n ((state.rarity == item.rarity) || state.rarity == \\\"all\\\")\\n ) &&\\n <Card key={index}>\\n <CardName>{item.name} - {item.rarity}</CardName>\\n <CardImage src={item.url} />\\n <div>Copies Owned: {ownedCount[item.id] || 0}</div>\\n </Card>\\n ))}\\n </CardGrid>\\n </Container>\\n <div>\\n <span class=\\\"text-decoration-underline\\\">{nftsOwned.length}</span> NEAR Monster NFTs collected\\n </div>\\n </App>\\n);\\n"

}

Transaction Details

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs:

Receipt:

Status:

Block:

Timestamp:

From:

To:

Value:

Burnt Gas:

Burnt Tokens:

Actions:

Result:

Logs: