1"use strict";(self.webpackChunkink_docs=self.webpackChunkink_docs||[]).push([[3557],{65404:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var s=t(36672);const i={},o=s.createContext(i);function r(e){const n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(o.Provider,{value:n},e.children)}},77239:(e,n,t)=>{t.d(n,{A:()=>s});const s=t.p+"assets/images/balloons-2-41f9b649aa2cc5da3be74e6b6740865f.svg"},95992:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>r,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"examples/dapps","title":"DApps","description":"Balloons 2 Title Picture","source":"@site/versioned_docs/version-v4/examples/dapps.md","sourceDirName":"examples","slug":"/examples/dapps","permalink":"/docs/v4/examples/dapps","draft":false,"unlisted":false,"editUrl":"https://github.com/use-ink/ink-docs/edit/master/versioned_docs/version-v4/examples/dapps.md","tags":[],"version":"v4","frontMatter":{"title":"DApps","slug":"/examples/dapps","hide_title":true},"sidebar":"reference","previous":{"title":"Smart Contracts","permalink":"/docs/v4/examples/smart-contracts"},"next":{"title":"Kickstart your project!","permalink":"/docs/v4/inkubator-overview"}}');var i=t(23420),o=t(65404);const r={title:"DApps",slug:"/examples/dapps",hide_title:!0},a="DApps",l={},c=[{value:"INK!athon",id:"inkathon",level:2},{value:"link!",id:"link",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Balloons 2 Title Picture",src:t(77239).A+"",width:"1600",height:"500"})}),"\n",(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"dapps",children:"DApps"})}),"\n",(0,i.jsx)(n.p,{children:"We'll point to a couple full-stack dApp examples here.\nThese can serve as inspiration for how to create a frontend for your\nsmart contract."}),"\n",(0,i.jsx)(n.p,{children:"Three popular libraries for building frontends are:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://github.com/polkadot-js/api",children:(0,i.jsx)(n.code,{children:"polkadot-js/api"})})," a low-level TypeScript API."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"https://github.com/scio-labs/use-inkathon",children:"useInkathon"})," a React hooks library."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"inkathon",children:"INK!athon"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://inkathon.xyz/",children:"INK!athon"})," is a full-stack dApp boilerplate project consisting\nof an ink! smart contract and a React frontend using the\n",(0,i.jsx)(n.a,{href:"https://github.com/scio-labs/use-inkathon",children:"useInkathon"})," hooks library."]}),"\n",(0,i.jsx)(n.h2,{id:"link",children:"link!"}),"\n",(0,i.jsx)(n.p,{children:"link! is a URL shortener dApp. It consists of a frontend and an ink! contract."}),"\n",(0,i.jsxs)(n.p,{children:["link! uses ",(0,i.jsx)(n.a,{href:"https://github.com/polkadot-js/api",children:(0,i.jsx)(n.code,{children:"polkadot-js/api"})})," under the hood.\nThe entire source code (contract + frontend) is located here:\n",(0,i.jsx)(n.a,{href:"https://github.com/use-ink/link",children:"https://github.com/use-ink/link"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["You can view an online demo of the dApp here: ",(0,i.jsx)(n.a,{href:"https://tiny.ink",children:"https://tiny.ink"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["To create new short links you need ",(0,i.jsx)(n.code,{children:"ROC"})," tokens from our testnet.\nSee ",(0,i.jsx)(n.a,{href:"/docs/v4/testnet",children:"here"})," for how to get those."]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.