{"id":76,"date":"2022-03-02T11:48:22","date_gmt":"2022-03-02T11:48:22","guid":{"rendered":"https:\/\/hamtronmedia.com\/dan\/?p=76"},"modified":"2022-03-02T11:48:22","modified_gmt":"2022-03-02T11:48:22","slug":"react-typescript-hashconnect","status":"publish","type":"post","link":"https:\/\/djnh.xyz\/dan\/react-typescript-hashconnect\/","title":{"rendered":"React \/ Typescript \/ Hashconnect"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">My journey learning typescript.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The reason I&#8217;m learning typescript is because I&#8217;m trying to get my app connected to the hashpack wallet for hedera hashgraoh. Wish me luck&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m starting with the Ben Awad Typescript \/ React tutorial, while listening to &#8216;Love Is Blind&#8217; in the background when Ben isnt talking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ll keep my notes here.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app typescript-tut --typescript<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ANNNNNND that didn&#8217;t create a typescript project like I expected. Everything was in JS still. So, I had to uninstall create-react-app -g globally because it&#8217;s not supported anymore?? I don&#8217;t even know if that is the problem, but that&#8217;s what I&#8217;m trying. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, I deleted the project and started a new one with this command as per react docs:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app type-tut --template typescript<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">So far, it seems to have worked by creating files with the .tsx extension.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Down the rabbit hole I go&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">And what a day it&#8217;s been. I need to just take a minute and organize my thoughts. I ended up doing the TraversyMedia typescript tutorial. I&#8217;m going to revisit the awad one for the reducers and refs and stuff.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Did this one twice&#8230;Going to need a third time&#8230;<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"React Typescript Tutorial\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Z5iWr6Srsj8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"TypeScript Crash Course\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/BCg4U1FzODs?start=493&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Did this one at 2x speed. Thought it was going to go deeper&#8230;<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"TypeScript Course for Beginners - Learn TypeScript from Scratch!\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/BwuLxPH8IDs?start=239&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introducing NextJS with TypeScript\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/y0W2TD1EUXE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">After many attempts&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The best starting point I found was by starting the &#8216;with-typescript&#8217; demo from vercel. That puts a repo on your github, and then you clone that, and then modify.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">I finally got the haspack to connect&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After I put out a few messages on the relevant discords. I finally found this repo: <a href=\"https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\">https:\/\/github.com\/rajatK012\/hashconnectWalletConnect<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I modified the vercel app to work with the files from the above repo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Something important was that to connect to the hashpack, it HAS to be a HTTPS connection, not HTTP, because of the websockets.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I need to learn more about web sockets obviously&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">RELEVANT LINKS:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Typescript: <a href=\"https:\/\/www.npmjs.com\/package\/typescript\">https:\/\/www.npmjs.com\/package\/typescript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTTPS: <a href=\"https:\/\/create-react-app.dev\/docs\/using-https-in-development\/\">https:\/\/create-react-app.dev\/docs\/using-https-in-development\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wrap Next app: <a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/custom-app\">https:\/\/nextjs.org\/docs\/advanced-features\/custom-app<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typescript\/Next: <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/typescript\">https:\/\/nextjs.org\/docs\/basic-features\/typescript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Install Typescript: <a href=\"https:\/\/create-react-app.dev\/docs\/adding-typescript\/\">https:\/\/create-react-app.dev\/docs\/adding-typescript\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Git: <a href=\"https:\/\/github.com\/Hashpack\/hashconnect#foundextensionevent\">https:\/\/github.com\/Hashpack\/hashconnect#foundextensionevent<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">NPM HASHCONNECT: <a href=\"https:\/\/www.npmjs.com\/package\/hashconnect#concepts\">https:\/\/www.npmjs.com\/package\/hashconnect#concepts<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hedera BoilerPlate: <a href=\"https:\/\/github.com\/publu\/hedera-reactjs-boilerplate\/blob\/master\/src\/App.tsx\">https:\/\/github.com\/publu\/hedera-reactjs-boilerplate\/blob\/master\/src\/App.tsx<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Git 2: <a href=\"https:\/\/github.com\/Stephegbenga\/hedera-hashconnect\">https:\/\/github.com\/Stephegbenga\/hedera-hashconnect<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HASHConnect that works: <a href=\"https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\">https:\/\/github.com\/rajatK012\/hashconnectWalletConnect<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My closed issue: <a href=\"https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\/issues\/1\">https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\/issues\/1<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Current Git: <a href=\"https:\/\/github.com\/Dan-Druff\/with-typescript\">https:\/\/github.com\/Dan-Druff\/with-typescript<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Useful Typescript:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>let id: number = 5\n\nconsole.log(\"Id : \", id);\n\nlet company: string = 'Hamtronmedia'\nlet isPublished: boolean = true\nlet x: any = 'Hello';\n\nlet age:number\n\nage = 30\n\nlet ids: number&#91;] = &#91;1,2,3,4]\nlet arr: any&#91;] = &#91;1,true,'true']\n\nlet person: &#91;number,string,boolean] = &#91;1,'Dan',true]\n\nlet employee: &#91;number,string]&#91;]\n\nemployee = &#91;\n    &#91;1,'Brad']\n]\n\nlet pid: string | number\npid = 2\npid = '2'\n\n\/\/ Enum\nenum Direction1 {\n    Up = 1,\n    Down,\n    Left,\n    Right\n}\nenum Direction2 {\n    Up = 'Up',\n    Down = 'Down',\n    Left = 'Left',\n    Right = 'Right'\n}\nconsole.log(\"Direction: \", Direction2.Left)\n\/\/ objects\ntype User = {\n    id: number,\n    name: string\n}\nconst user: User = {\n    id:1,\n    name:'John'\n}\n\n\/\/ type assertion\n\nlet cid: any = 1\n\/\/ let customerId = &lt;number&gt;cid\nlet customerId = cid as number \n\n\/\/ functions\n\nfunction addNum(x:number,y:number): number{\n    return x + y\n}\n\nconsole.log(addNum(3,4));\n\n\/\/ voids \n\nfunction log(message: string | number): void {\n    console.log(message);\n}\nlog('Lgging');\nlog(8);\n\n\/\/Interfaces\ninterface UserInterface {\n    readonly id:number\n    name:string\n    age?: number\n}\nconst user1: UserInterface = {\n    id:8,\n    name:'John'\n}\n\ninterface MathFunc {\n    (x: number, y: number): number\n}\n\nconst add: MathFunc = (x:number, y:number):number =&gt; x + y\nconst sub: MathFunc = (x:number, y:number):number =&gt; x - y\n\nconsole.log(\"Adding: \", add(4,3));\nconsole.log(\"SubbingL \", sub(4,3));\n\n\/\/ Classes\ninterface PersonInterface {\n    id:number\n    name:string\n    register(): string\n}\nclass Person implements PersonInterface{\n    id:number\n    name:string\n\n    constructor(id:number,name:string){\n    console.log(123)\n    this.id = id\n    this.name = name\n    }\n    register(){\n        return `${this.name} is now registered`\n    }\n}\nconst brad = new Person(1,'Brad')\nconst mike = new Person(2,'Mike')\nconsole.log(brad.register());\nconsole.log(brad,mike);\n\nclass Employee extends Person {\n    position: string\n    constructor(id: number,name: string,position: string){\n        super(id,name)\n        this.position = position\n    }\n    showPosition(){\n        return `${this.position}`\n    }\n}\nconst emp = new Employee(4,'Shawn','Developer');\nconsole.log(emp.register())\nconsole.log(emp.showPosition())\n\n\/\/ Generics\n\nfunction getArray&lt;T&gt;(items: T&#91;]): T&#91;]{\n    return new Array().concat(items)\n}\n\nlet numArray = getArray&lt;number&gt;(&#91;1,2,3,4])\nlet strArray = getArray&lt;string&gt;(&#91;'brad','jon','jill','koll'])\n\nnumArray.push(55);\nstrArray.push('9')<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Mint NFTs on Hedera with JavaScript pt. 1\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/lp3mwdYEZEk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Smart Contract: <a href=\"https:\/\/hedera.com\/blog\/how-to-deploy-smart-contracts-on-hedera-part-1-a-simple-getter-and-setter-contract\">https:\/\/hedera.com\/blog\/how-to-deploy-smart-contracts-on-hedera-part-1-a-simple-getter-and-setter-contract<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is that tut: <a href=\"https:\/\/hedera.com\/blog\/get-started-with-the-hedera-token-service-part-1-how-to-mint-nfts\">https:\/\/hedera.com\/blog\/get-started-with-the-hedera-token-service-part-1-how-to-mint-nfts<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What next&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Well&#8230;I gotta make dinner, I&#8217;ve been going at this all day, so I guess I should take a break, I feel I have so much to do. Tonight (maybe tomorrow) the goal is to have an NFT show up in my hashpack wallet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Roasted potatas here I come&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">NEXT DAY&#8230;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Today is all about getting hashpack working for me. I learned smart contracts in the ETH world, but it&#8217;s too expensive to actually use. I want this app to be affordable, and crypto to make it easier (not harder) to get into. So hashpack day&#8230;Going to keep notes here:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hedera METADATA: <a href=\"https:\/\/github.com\/hashgraph\/hedera-improvement-proposal\/blob\/master\/HIP\/hip-10.md\">https:\/\/github.com\/hashgraph\/hedera-improvement-proposal\/blob\/master\/HIP\/hip-10.md<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I made a metadata: <a href=\"http:\/\/hamtronmedia.com\/media\/json\/hedera.json\">http:\/\/hamtronmedia.com\/media\/json\/hedera.json<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">MISSION (kinda) ACCOMPLISHED!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I got NFT&#8217;s to appear in the hashpack wallet!! Color me tickled when it happened.  HOWEVER&#8230;the images don&#8217;t show up, there&#8217;s something going wrong with the metadata according to the gomint explorer here: <a href=\"https:\/\/gomint.me\/explore\/NFT\/?tokenId=0.0.30847387&amp;network=testnet\">https:\/\/gomint.me\/explore\/NFT\/?tokenId=0.0.30847387&amp;network=testnet<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ve been at it for a good 10 hours or so.  Been back and forth a few times on discord and currently awaiting some more advice. So, going to consolidate some links again here&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">hedera: <a href=\"https:\/\/docs.hedera.com\/guides\/getting-started\/try-examples\/create-and-transfer-your-first-nft\">https:\/\/docs.hedera.com\/guides\/getting-started\/try-examples\/create-and-transfer-your-first-nft<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">map from erc: <a href=\"https:\/\/hedera.com\/blog\/mapping-hedera-token-service-standards-to-erc20-erc721-erc\">https:\/\/hedera.com\/blog\/mapping-hedera-token-service-standards-to-erc20-erc721-erc<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">token mint: <a href=\"https:\/\/docs.hedera.com\/guides\/docs\/hedera-api\/token-service\/tokenmint\">https:\/\/docs.hedera.com\/guides\/docs\/hedera-api\/token-service\/tokenmint<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ipfs link: <a href=\"https:\/\/ipfs.io\/ipfs\/bafybeibvmxm3c6kbxqfdlg6fnfkfx53yn4vt26gootqpw5ey2tghovjdqm\/meta.json\">https:\/\/ipfs.io\/ipfs\/bafybeibvmxm3c6kbxqfdlg6fnfkfx53yn4vt26gootqpw5ey2tghovjdqm\/meta.json<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">kailer: <a href=\"https:\/\/ipfs.io\/ipfs\/bafybeihpn2rwqud7ud26iyj7lpkjok4ytn2wwcnzmkrrsk4nau2dtnykxi\/pics\/4.png\">https:\/\/ipfs.io\/ipfs\/bafybeihpn2rwqud7ud26iyj7lpkjok4ytn2wwcnzmkrrsk4nau2dtnykxi\/pics\/4.png<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">dev: <a href=\"https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata\">https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">tut: <a href=\"https:\/\/github.com\/ed-marquez\/hedera-sdk-js\/blob\/main\/examples\/hts-nftP1-fee-create-mint-burn-associate-transfer.js\">https:\/\/github.com\/ed-marquez\/hedera-sdk-js\/blob\/main\/examples\/hts-nftP1-fee-create-mint-burn-associate-transfer.js<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">more docs: <a href=\"https:\/\/docs.hedera.com\/guides\/docs\/sdks\/cryptocurrency\/create-an-account#:~:text=setMaxAutomaticTokenAssociations\">https:\/\/docs.hedera.com\/guides\/docs\/sdks\/cryptocurrency\/create-an-account#:~:text=setMaxAutomaticTokenAssociations<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">more: <a href=\"https:\/\/hedera.com\/blog\/get-started-with-the-hedera-token-service-part-1-how-to-mint-nfts#:~:text=and%20transfer%20NFTs.-,Code%20Check,-https\">https:\/\/hedera.com\/blog\/get-started-with-the-hedera-token-service-part-1-how-to-mint-nfts#:~:text=and%20transfer%20NFTs.-,Code%20Check,-https<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">and more: <a href=\"https:\/\/docs.hedera.com\/guides\/resources\/tutorials\/get-started-with-hedera-nfts\">https:\/\/docs.hedera.com\/guides\/resources\/tutorials\/get-started-with-hedera-nfts<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">I got the NFT to show in the explorer!!!!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">link: <a href=\"https:\/\/gomint.me\/explore\/NFT\/?tokenId=0.0.30851925&amp;network=testnet\">https:\/\/gomint.me\/explore\/NFT\/?tokenId=0.0.30851925&amp;network=testnet<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">After a reboot, it works!!<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">So now what? I need to have a foundation of an app that&#8217;s online where everything works at the base level. So, that means converting my aforementioned Vercel Typescript app that talks to hashpack. Need to have Puckface API receive Hashpack wallet address to mint cards to&#8230; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This site needs to sense the wallet, read how many Puckface NFTs it has, grab its json data&#8230;and display the images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">MORE METADATA: <a href=\"https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata\">https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Blender Scripting<\/li><li>JSON Files<\/li><li>Images<\/li><li><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">My 4 links from Ed:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Get tokens by account id: <a href=\"https:\/\/testnet.mirrornode.hedera.com\/api\/v1\/balances?account.id=0.0.17950474\">https:\/\/testnet.mirrornode.hedera.com\/api\/v1\/balances?account.id=0.0.17950474<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Get serials: <a href=\"https:\/\/testnet.mirrornode.hedera.com\/api\/v1\/tokens\/0.0.30854518\/nfts?account.id=0.0.17950474\">https:\/\/testnet.mirrornode.hedera.com\/api\/v1\/tokens\/0.0.30854518\/nfts?account.id=0.0.17950474<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">MirrorNodes1: <a href=\"https:\/\/github.com\/hashgraph\/hedera-mirror-node\/issues\/3081\">https:\/\/github.com\/hashgraph\/hedera-mirror-node\/issues\/3081<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mirror nodes 2: <a href=\"https:\/\/hedera.com\/blog\/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics\">https:\/\/hedera.com\/blog\/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mirror Nodes 3: <a href=\"https:\/\/docs.hedera.com\/guides\/docs\/mirror-node-api\/rest-api\">https:\/\/docs.hedera.com\/guides\/docs\/mirror-node-api\/rest-api<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">I finally have all the pieces.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the issue that put it together for me. <a href=\"https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\/issues\/2\">https:\/\/github.com\/rajatK012\/hashconnectWalletConnect\/issues\/2<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">I fonally figured out how to talk to the hashpack wallet, and now I know how to retriev the data I need.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">All I have to do is put all these puzzle pieces to gether&#8230;Of course I have to work tomorrow. Thats ok, give my eyes a break.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Going to save my links so I can restart my computer. Thanks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typescript partials: <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/utility-types.html\">https:\/\/www.typescriptlang.org\/docs\/handbook\/utility-types.html<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typsecript useContext cheat sheet: <a href=\"https:\/\/react-typescript-cheatsheet.netlify.app\/docs\/basic\/getting-started\/context\/\">https:\/\/react-typescript-cheatsheet.netlify.app\/docs\/basic\/getting-started\/context\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TS object types: <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/objects.html\">https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/objects.html<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mirror nodes (dup) <a href=\"https:\/\/hedera.com\/blog\/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics\">https:\/\/hedera.com\/blog\/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">hedera metadata: <a href=\"https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata\">https:\/\/hedera.com\/blog\/developer-quick-start-nfts-and-metadata<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">BALANCES:<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;testnet.mirrornode.hedera.com\/api\/v1\/balances?account.id=0.0.17950474<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">SERIALS:<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;testnet.mirrornode.hedera.com\/api\/v1\/tokens\/0.0.30854518\/nfts?account.id=0.0.17950474<\/code><\/pre>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">STILL GOING and its April 4th:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JUST WANTED TO SAVE SOME LINKS:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/43881192\/returning-a-promise-in-an-async-function-in-typescript\">Typescript Promises<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Higher Order Components<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/50215364\/can-we-pass-setstate-as-props-from-one-component-to-other-and-change-parent-stat\">Passing SetState Props<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.rea-group.com\/about-us\/news-and-insights\/blog\/functions-as-child-components-and-higher-order-components\/\">Functions as Child Components HigherOrder<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/medium.com\/geekculture\/firebase-auth-with-react-and-typescript-abeebcd7940a\">Firebase \/ Typescript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/3380805\/checkout-old-commit-and-make-it-a-new-commit\">GIT Checkout Head<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.cloudbees.com\/blog\/git-detached-head\">GIT Head 2<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/43064221\/typescript-ts7006-parameter-xxx-implicitly-has-an-any-type\">Implicit Anys<\/a><\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\">Todays Links 6th:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/3745515\/what-is-the-difference-between-substr-and-substring\">One&#8230;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/65713983\/error-typeerror-cannot-read-property-filter-of-undefined-how-do-i-fix-this\">Two&#8230;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/65169431\/how-to-set-the-next-image-component-to-100-height\">Three&#8230;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/32755631\/can-i-prevent-that-chrome-v45-pauses-on-promise-rejections\">Four&#8230;<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/45089866\/specifying-onclick-event-type-with-typescript-and-react-konva\">Five&#8230;<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WELL IT&#8217;s been a while!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A while since I wrote about it at least. But I&#8217;ve been working at it every day. Trying to knock items off a list one at a time. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s was todays links after putting in react-datepicker<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/stackoverflow.com\/questions\/40981982\/javascript-create-date-from-year-month-day\">CREATE DATE<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/reactdatepicker.com\/\">DATEPICKER<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>My journey learning typescript. The reason I&#8217;m learning typescript is because I&#8217;m trying to get my app connected to the hashpack wallet for hedera hashgraoh. Wish me luck&#8230; I&#8217;m starting with the Ben Awad Typescript \/ React tutorial, while listening to &#8216;Love Is Blind&#8217; in the background when Ben isnt talking. I&#8217;ll keep my notes [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":0,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"wp:attachment":[{"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/djnh.xyz\/dan\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}