{"id":21280904,"url":"https://github.com/consensysmesh/kittybrowser","last_synced_at":"2025-07-11T10:33:06.434Z","repository":{"id":42107668,"uuid":"139872652","full_name":"ConsenSysMesh/kittybrowser","owner":"ConsenSysMesh","description":"Coding challenge for front-end dev candidates","archived":false,"fork":false,"pushed_at":"2023-01-26T00:17:44.000Z","size":906,"stargazers_count":14,"open_issues_count":22,"forks_count":20,"subscribers_count":13,"default_branch":"master","last_synced_at":"2023-02-27T00:41:25.039Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConsenSysMesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-05T16:05:38.000Z","updated_at":"2022-01-13T11:54:18.000Z","dependencies_parsed_at":"2023-02-14T12:46:39.270Z","dependency_job_id":null,"html_url":"https://github.com/ConsenSysMesh/kittybrowser","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fkittybrowser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fkittybrowser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fkittybrowser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fkittybrowser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConsenSysMesh","download_url":"https://codeload.github.com/ConsenSysMesh/kittybrowser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225715945,"owners_count":17512908,"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-11-21T10:42:43.435Z","updated_at":"2024-11-21T10:42:44.040Z","avatar_url":"https://github.com/ConsenSysMesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kitty Browser\n\n![](https://i.imgur.com/A7D2gMb.png)\n\n[CryptoKitties](http://cryptokitties.co) is one of the most popular distributed apps on the Ethereum Network. It's a game that allows players to purchase, collect, breed and sell various types of virtual cats.\n\nTo be able to run CryptoKitties on your browser you'll need to install [Metamask](http://metamask.io/) or use a dedicated Ethereum browser like Mist or Parity.\n\nFor this challenge you will create a simple UI that will be able to interact with the Ethereum Blockchain, using web3.js and the [drizzle](https://truffleframework.com/docs/drizzle/getting-started) library. This UI will allow the user to type in a CryptoKitty's ID, and will display information about that Kitty.\n\n# Requirements to complete this challenge\n\n- Use the code provided in this repo as a starting point to build your solution\n- Given the address for the CryptoKitties Smart Contract: `0x06012c8cf97bead5deae237070f9587f8e7a266d` Find its *ABI* (You will need it to complete the challenge)\n- Build a simple UI where the user can type in an ID and display the following information about a Kitty:\n  - Genes\n  - Birth time\n  - Generation\n- Write a unit test that you consider relevant, using the unit test framework of your preference. It should run using `npm run test`\n- You will get extra points if you use `react-testing-library` 🏅\n- You will get extra points if you also display the Kitty's picture. 🏅\n- You will get extra points if you create a \"Fetch random Kitty\" button. 🏅\n- You will get extra points if you use TypeScript 🏅\n- Feel free to customize the styles as you wish or use any extra libraries that you need\n\n\n## The result should look somethig like this:\n\n![kitty browser](https://i.imgur.com/YQdKma5.png)\n\n# Hints\n- You will need to use the `drizzle` instance available on React's context (See components/Browser.js)\n- You will need to explore the smart contract `methods` to find out which one will get you the kitty's info (This operation won't require spending any ether)\n\n# Setting up your dev environment\n\n- Install and setup Metamask in your browser\n- Clone this repo, to be used as a starting point for your solution\n- Install the dependencies and run the development server\n\n# Code Overview\n\nThis repo contains a few components that will be useful for you to complete this project. These components are based on the [drizzle-react](https://github.com/trufflesuite/drizzle-react) examples\n\n### containers/Loading.js\n\nShows a Loading message while drizzle is being initialized or an error message if the browser is not *web3 enabled*\n\n```Javascript\nif (window.web3 === undefined || this.props.web3.status === 'failed') {\n      return(\n        // Display a web3 warning.\n        \u003cdiv className=\"warning\"\u003e\n          \u003cp\u003eThis browser has no connection to the Ethereum network. \u003c/p\u003e\n          \u003cp\u003ePlease use the Chrome/FireFox extension MetaMask, or dedicated Ethereum browsers Mist or Parity.\u003c/p\u003e\n        \u003c/div\u003e\n      );\n    }\n\n    if (this.props.drizzleStatus.initialized) {\n      // Load the dapp.\n      return Children.only(this.props.children);\n    }\n\n    return(\n      // Display a loading indicator.\n      \u003cdiv className=\"loading\"\u003e\n        \u003ch1\u003eLoading dapp...\u003c/h1\u003e\n        \u003cimg src=\"https://www.cryptokitties.co/images/loader.gif\" width=\"120\" alt=\"loading\" /\u003e\n      \u003c/div\u003e\n    );\n```\n\n## App.js\n\nInitializes the `DrizzleProvider` and wraps your app with the `Loading` component.\n\n```Javascript\nclass App extends Component {\n  render() {\n    const drizzleOptions = {\n      contracts: []\n    };\n\n    return (\n      \u003cDrizzleProvider options={drizzleOptions}\u003e\n        \u003cLoading\u003e\n          \u003cBrowser /\u003e\n        \u003c/Loading\u003e\n      \u003c/DrizzleProvider\u003e\n    );\n  }\n}\n```\n\n## components/Browser.js\n\nOnce you have the Smart Contract's ABI, uncomment the lines you need to add the contract to the drizzle store, and start building your solution.\n\n## Questions or comments\n\nFor any questions or comments please contact `Dragos Rizescu \u003cdragos.rizescu@consensys.net\u003e` or `Ruben  Torres \u003cruben.torres@consensys.net\u003e`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Fkittybrowser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconsensysmesh%2Fkittybrowser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Fkittybrowser/lists"}