{"id":13421549,"url":"https://github.com/austintgriffith/dapparatus","last_synced_at":"2025-04-06T06:06:40.619Z","repository":{"id":32765276,"uuid":"141851646","full_name":"austintgriffith/dapparatus","owner":"austintgriffith","description":"📦📃Dapparatus: reusable dapp components in react: contract loader, metamask, gas, transaction ui, event parers, etc","archived":false,"fork":false,"pushed_at":"2022-12-08T20:41:59.000Z","size":1865,"stargazers_count":193,"open_issues_count":28,"forks_count":40,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-30T05:07:15.696Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/austintgriffith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-21T23:11:48.000Z","updated_at":"2025-03-08T01:33:44.000Z","dependencies_parsed_at":"2023-01-14T22:15:32.774Z","dependency_job_id":null,"html_url":"https://github.com/austintgriffith/dapparatus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austintgriffith%2Fdapparatus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austintgriffith%2Fdapparatus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austintgriffith%2Fdapparatus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/austintgriffith%2Fdapparatus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/austintgriffith","download_url":"https://codeload.github.com/austintgriffith/dapparatus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441042,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:24.805Z","updated_at":"2025-04-06T06:06:40.598Z","avatar_url":"https://github.com/austintgriffith.png","language":"JavaScript","funding_links":[],"categories":["Software Development","JavaScript","Roadmap"],"sub_categories":["JavaScript"],"readme":"# 📦📃Dapparat.us\n\nAfter building out a handful of Dapps in React, I decided to carve out all the common components and provide them in an NPM package.\n\nShould help get a Dapp up and running quickly so you can focus on your functionality, not wrestling with the blockchain and ethereum network.\n\nWatch the demo video using Dapparatus over in the [Clevis repo](https://github.com/austintgriffith/clevis).\n\nA good example and development walkthrough is\n[nifties-vs-nfties](https://github.com/austintgriffith/nifties-vs-nfties/blob/master/README.md).\n\n## install\n\n```\nnpm install --save dapparatus\n```\n\n## import\n\n```\nimport { Metamask, Gas, ContractLoader, Transactions, Events, Scaler, Blockie, Address, Button } from \"dapparatus\"\n```\n\n## usage\n\n### Dapparatus\n\n```javascript\n\nconst METATX = {\n  endpoint:\"http://0.0.0.0:10001/\",\n  contract:\"0xf5bf6541843D2ba2865e9aeC153F28aaD96F6fbc\",\n  //accountGenerator: \"//account.metatx.io\",\n}\nconst WEB3_PROVIDER = 'http://0.0.0.0:8545'\n\n\n\u003cDapparatus\n  config={{\n    DEBUG:false,\n    requiredNetwork:['Unknown','Private','Rinkeby'],\n    hide:false\n  }}\n  metatx={METATX}\n  newPrivateKey={this.state.newPrivateKey}\n  fallbackWeb3Provider={new Web3.providers.HttpProvider(WEB3_PROVIDER)}\n  onUpdate={(state)=\u003e{\n   console.log(\"metamask state update:\",state)\n   if(state.web3Provider) {\n     state.web3 = new Web3(state.web3Provider)\n     this.setState(state)\n   }\n  }}\n/\u003e\n```\n\n### PrivateKeyCatcher\n\nIf you are using paper wallets or other methods to pass in a private key to dapparatus:\n\n```javascript\n  \u003cPrivateKeyCatcher newPrivateKey={(pk)=\u003e{\n       this.setState({newPrivateKey:pk})\n  }}/\u003e\n```\n\n\n### Metamask\n\nLooks for injected web3 and provides an interface to the rest of the components. Also displays a nice HUD for users to see what account is logged in, what network they are on, and how much Ethereum they have.\n\n```javascript\n\u003cMetamask\n  /*config={{DEBUG: false, requiredNetwork:['Ropsten'], hide:false}}*/\n  onUpdate={(state)=\u003e{\n    console.log(\"metamask state update:\",state)\n    if(state.web3Provider) {\n      state.web3 = new Web3(state.web3Provider)\n      this.setState(state)\n    }\n  }}\n/\u003e\n```\n\n### Gas\n\nKeeps track of the best gas price in gwei and delivers it to other components.\n\n```javascript\n\u003cGas\n  onUpdate={(state)=\u003e{\n    console.log(\"Gas price update:\",state)\n    this.setState(state,()=\u003e{\n      console.log(\"GWEI set:\",this.state)\n    })\n  }}\n/\u003e\n```\n\n### Transactions\n\nDisplays transactions and blocks as progress bars and provides a **tx** function to make calling smart contract functions and sending transactions easier and more transparent to the user.\n\n```javascript\n\u003cTransactions\n  account={account}\n  gwei={gwei}\n  web3={web3}\n  block={block}\n  avgBlockTime={avgBlockTime}\n  etherscan={etherscan}\n  onReady={(state)=\u003e{\n    //loads in tx() function\n    // use to send transactions: tx(contracts.YOURCONTRACT.YOURFUNCTION(),GASLIMIT,TXDATA,TXVALUE,CALLBACK)\n    console.log(\"Transactions component is ready:\",state)\n    this.setState(state)\n  }}\n/\u003e\n```\n\n## ContractLoader\n\nLoads your contracts published from [Clevis](https://github.com/austintgriffith/clevis) into **this.state.contracts**.\n\nNote: Contracts must first be injected into the /src folder by running `clevis test publish` or `clevis test full`.\n\n```javascript\n\u003cContractLoader\n key=\"ContractLoader\"\n config={{DEBUG:true}}\n web3={web3}\n require={path =\u003e {return require(`${__dirname}/${path}`)}}\n onReady={(contracts,customLoader)=\u003e{\n   console.log(\"contracts loaded\",contracts)\n   this.setState({\n     customLoader: customLoader,\n     contracts:contracts,\n   },()=\u003e{\n     console.log(\"Contracts Are Ready:\",this.state.contracts)\n   })\n }}\n/\u003e\n```\n\nYou can then use the customLoader to load dynamic contracts using the ABI from current contracts:\n```javascript\nlet lootTokenContract = this.state.customLoader(\"LootToken\",lootTokenAddress)\n```\n\n### Events\n\nListens for events and parses down the chain. Use an **id** field for unique keys so it will only fire the **onUpdate** function when a new event is detected. Provide a **filter** object to filter indexed fields.\n\n```javascript\n\u003cEvents\n  config={{hide:false}}\n  contract={contracts.Nifties}\n  eventName={\"Create\"}\n  block={block} \u003c-------- current block number!\n  id={\"_id\"}\n  filter={{_owner:account}}\n  onUpdate={(eventData,allEvents)=\u003e{\n    console.log(\"EVENT DATA:\",eventData)\n    this.setState({events:allEvents})\n  }}\n/\u003e\n```\n\n### Address\n\nRenders an address with the blockie (identicon) and the current balance in Eth.\n\n```javascript\n  \u003cAddress\n    {...this.state}\n    address={contracts.SomeContract._address}\n  /\u003e\n```\n\n### Button\n\nRenders a button\n\n```javascript\n    \u003cButton color={\"green\"} size={\"2\"} onClick={()=\u003e{\n        //do some transaction on button click\n        tx(contracts.SomeContract.someFunction(someArgument),(receipt)=\u003e{\n          //when the transaction goes through you'll have a receipt here\n        })\n      }}\u003e\n      Send\n    \u003c/Button\u003e\n```\n\n### Blockie\n\nRenders an identicon for an address\n\n```javascript\n    \u003cBlockie\n      address={someEthereumAddress}\n      config={{size:3}}\n     /\u003e\n```\n\n\n### Scaler\n\nScales components based on a target screen width vs actual screen width. Get your Dapp looking awesome on mobile.\n\n```javascript\n\u003cScaler config={{startZoomAt:1000,origin:\"50px 50px\",adjustedZoom:1.3}}\u003e\n  \u003cimg style={{position:\"absolute\",left:10,top:10,maxHeight:120,margin:10}} src={titleImage}/\u003e\n\u003c/Scaler\u003e\n```\n\n\n### Demo App\n\nEther Jam Jam is a demo app I built that uses Dapparatus for meta transactions:\n\n[![etherjamjam](https://user-images.githubusercontent.com/2653167/46258946-4e6e0280-c48f-11e8-854d-261b9fd7d152.png)](https://youtu.be/cNcSXovVPdg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faustintgriffith%2Fdapparatus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faustintgriffith%2Fdapparatus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faustintgriffith%2Fdapparatus/lists"}