wax posts - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others."
    }), "\n", _jsx(_components.p, {
      children: "To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM."
    }), "\n", _jsx(_components.p, {
      children: "There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead."
    }), "\n", _jsx(_components.p, {
      children: "I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  WAX --> Dfuse\n Dfuse --> Listener(Dark Emblem Listener Service)\n  Listener --> Redis\n  Redis --> API(Dark Emblem API)\n  API --> Dapp\n  WAXEndpoint(WAX Endpoint) --> Dapp"
    }), "\n", _jsx(_components.p, {
      children: "One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests."
    }), "\n", _jsx(Mermaid, {
      chart: "sequenceDiagram\n  Dapp->>+3rdPartyAuthenticator: Request sign in\n  3rdPartyAuthenticator->>+Dapp: Wallet name\n  Dapp->>+DarkEmblemAPI: Request nonce\n  DarkEmblemAPI->>+Dapp: Send nonce\n  Dapp->>+3rdPartyAuthenticator: Sign nonce\n  3rdPartyAuthenticator->>+Dapp: Signed nonce\n  Dapp->>+DarkEmblemAPI: Send signed nonce\n  DarkEmblemAPI->>+Dapp: JWT"
    }), "\n", _jsx(_components.p, {
      children: "Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card."
    }), "\n", _jsx(_components.p, {
      children: "Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster."
    }), "\n", _jsx(_components.p, {
      children: "Dapp Schemas and Atomic Assets"
    }), "\n", _jsx(Mermaid, {
      chart: "classDiagram\n  class Card {\n    name: string\n  img: string\n  traits: number[]\n  matronid: number\n  sireid: number\n  rank: number\n  packid: string\n  cardtype: string\n  website: string\n  twitter: string\n  mintedat: number\n  rarity: string\n  cooldown: number\n  xp: number\n  }\n  class Raid {\n  asset_id: number\n  owner: name\n  staked_at: number\n  raid_id: number\n  }\n  class Staked {\n  asset_id: number\n  owner: name\n  staked_at: number\n  raid_id: number\n  }\n"
    }), "\n", _jsx(_components.p, {
      children: "The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts."
    }), "\n", _jsx(_components.h2, {
      children: "Additional reading"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.darkemblem.com/blog/post/2023-04-02-new-site-released",
          children: "Dark Emblem Blog Announcement"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://capsulecat.com/blog/04-02-2023-dark-emblem-update/",
          children: "Capsule Cat Announcement"
        })
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p>Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others.</p>
<p>To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM.</p>
<p>There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead.</p>
<p>I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  WAX --&gt; Dfuse
 Dfuse --&gt; Listener(Dark Emblem Listener Service)
  Listener --&gt; Redis
  Redis --&gt; API(Dark Emblem API)
  API --&gt; Dapp
  WAXEndpoint(WAX Endpoint) --&gt; Dapp">graph LR
  WAX --&gt; Dfuse
 Dfuse --&gt; Listener(Dark Emblem Listener Service)
  Listener --&gt; Redis
  Redis --&gt; API(Dark Emblem API)
  API --&gt; Dapp
  WAXEndpoint(WAX Endpoint) --&gt; Dapp</div></div>
<p>One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests.</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="sequenceDiagram
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Wallet name
  Dapp-&gt;&gt;+DarkEmblemAPI: Request nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: Send nonce
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Signed nonce
  Dapp-&gt;&gt;+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: JWT">sequenceDiagram
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Wallet name
  Dapp-&gt;&gt;+DarkEmblemAPI: Request nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: Send nonce
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Signed nonce
  Dapp-&gt;&gt;+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: JWT</div></div>
<p>Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card.</p>
<p>Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster.</p>
<p>Dapp Schemas and Atomic Assets</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
">classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
</div></div>
<p>The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts.</p>
<h2>Additional reading</h2>
<ul>
<li><a href="https://www.darkemblem.com/blog/post/2023-04-02-new-site-released">Dark Emblem Blog Announcement</a></li>
<li><a href="https://capsulecat.com/blog/04-02-2023-dark-emblem-update/">Capsule Cat Announcement</a></li>
</ul>


Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others.

To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM.

There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead.

I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:

```mermaid
graph LR
  WAX --> Dfuse
 Dfuse --> Listener(Dark Emblem Listener Service)
  Listener --> Redis
  Redis --> API(Dark Emblem API)
  API --> Dapp
  WAXEndpoint(WAX Endpoint) --> Dapp
```

One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests.

```mermaid
sequenceDiagram
  Dapp->>+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator->>+Dapp: Wallet name
  Dapp->>+DarkEmblemAPI: Request nonce
  DarkEmblemAPI->>+Dapp: Send nonce
  Dapp->>+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator->>+Dapp: Signed nonce
  Dapp->>+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI->>+Dapp: JWT
```

Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card.

Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster.

Dapp Schemas and Atomic Assets

```mermaid
classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }

```

The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts.

## Additional reading

* [Dark Emblem Blog Announcement](https://www.darkemblem.com/blog/post/2023-04-02-new-site-released)
* [Capsule Cat Announcement](https://capsulecat.com/blog/04-02-2023-dark-emblem-update/)


Dark Emblem Rewrite