My journey learning typescript.
The reason I’m learning typescript is because I’m trying to get my app connected to the hashpack wallet for hedera hashgraoh. Wish me luck…
I’m starting with the Ben Awad Typescript / React tutorial, while listening to ‘Love Is Blind’ in the background when Ben isnt talking.
I’ll keep my notes here.
npx create-react-app typescript-tut --typescriptANNNNNND that didn’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’s not supported anymore?? I don’t even know if that is the problem, but that’s what I’m trying.
So, I deleted the project and started a new one with this command as per react docs:
npx create-react-app type-tut --template typescriptSo far, it seems to have worked by creating files with the .tsx extension.
Down the rabbit hole I go…
And what a day it’s been. I need to just take a minute and organize my thoughts. I ended up doing the TraversyMedia typescript tutorial. I’m going to revisit the awad one for the reducers and refs and stuff.
Did this one twice…Going to need a third time…
Did this one at 2x speed. Thought it was going to go deeper…
After many attempts…
The best starting point I found was by starting the ‘with-typescript’ demo from vercel. That puts a repo on your github, and then you clone that, and then modify.
I finally got the haspack to connect…
After I put out a few messages on the relevant discords. I finally found this repo: https://github.com/rajatK012/hashconnectWalletConnect
I modified the vercel app to work with the files from the above repo.
Something important was that to connect to the hashpack, it HAS to be a HTTPS connection, not HTTP, because of the websockets.
I need to learn more about web sockets obviously…
RELEVANT LINKS:
Typescript: https://www.npmjs.com/package/typescript
HTTPS: https://create-react-app.dev/docs/using-https-in-development/
Wrap Next app: https://nextjs.org/docs/advanced-features/custom-app
Typescript/Next: https://nextjs.org/docs/basic-features/typescript
Install Typescript: https://create-react-app.dev/docs/adding-typescript/
Git: https://github.com/Hashpack/hashconnect#foundextensionevent
NPM HASHCONNECT: https://www.npmjs.com/package/hashconnect#concepts
Hedera BoilerPlate: https://github.com/publu/hedera-reactjs-boilerplate/blob/master/src/App.tsx
Git 2: https://github.com/Stephegbenga/hedera-hashconnect
HASHConnect that works: https://github.com/rajatK012/hashconnectWalletConnect
My closed issue: https://github.com/rajatK012/hashconnectWalletConnect/issues/1
Current Git: https://github.com/Dan-Druff/with-typescript
Useful Typescript:
let id: number = 5
console.log("Id : ", id);
let company: string = 'Hamtronmedia'
let isPublished: boolean = true
let x: any = 'Hello';
let age:number
age = 30
let ids: number[] = [1,2,3,4]
let arr: any[] = [1,true,'true']
let person: [number,string,boolean] = [1,'Dan',true]
let employee: [number,string][]
employee = [
[1,'Brad']
]
let pid: string | number
pid = 2
pid = '2'
// Enum
enum Direction1 {
Up = 1,
Down,
Left,
Right
}
enum Direction2 {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
console.log("Direction: ", Direction2.Left)
// objects
type User = {
id: number,
name: string
}
const user: User = {
id:1,
name:'John'
}
// type assertion
let cid: any = 1
// let customerId = <number>cid
let customerId = cid as number
// functions
function addNum(x:number,y:number): number{
return x + y
}
console.log(addNum(3,4));
// voids
function log(message: string | number): void {
console.log(message);
}
log('Lgging');
log(8);
//Interfaces
interface UserInterface {
readonly id:number
name:string
age?: number
}
const user1: UserInterface = {
id:8,
name:'John'
}
interface MathFunc {
(x: number, y: number): number
}
const add: MathFunc = (x:number, y:number):number => x + y
const sub: MathFunc = (x:number, y:number):number => x - y
console.log("Adding: ", add(4,3));
console.log("SubbingL ", sub(4,3));
// Classes
interface PersonInterface {
id:number
name:string
register(): string
}
class Person implements PersonInterface{
id:number
name:string
constructor(id:number,name:string){
console.log(123)
this.id = id
this.name = name
}
register(){
return `${this.name} is now registered`
}
}
const brad = new Person(1,'Brad')
const mike = new Person(2,'Mike')
console.log(brad.register());
console.log(brad,mike);
class Employee extends Person {
position: string
constructor(id: number,name: string,position: string){
super(id,name)
this.position = position
}
showPosition(){
return `${this.position}`
}
}
const emp = new Employee(4,'Shawn','Developer');
console.log(emp.register())
console.log(emp.showPosition())
// Generics
function getArray<T>(items: T[]): T[]{
return new Array().concat(items)
}
let numArray = getArray<number>([1,2,3,4])
let strArray = getArray<string>(['brad','jon','jill','koll'])
numArray.push(55);
strArray.push('9')Smart Contract: https://hedera.com/blog/how-to-deploy-smart-contracts-on-hedera-part-1-a-simple-getter-and-setter-contract
This is that tut: https://hedera.com/blog/get-started-with-the-hedera-token-service-part-1-how-to-mint-nfts
What next…
Well…I gotta make dinner, I’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.
Roasted potatas here I come…
NEXT DAY…
Today is all about getting hashpack working for me. I learned smart contracts in the ETH world, but it’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…Going to keep notes here:
Hedera METADATA: https://github.com/hashgraph/hedera-improvement-proposal/blob/master/HIP/hip-10.md
I made a metadata: http://hamtronmedia.com/media/json/hedera.json
MISSION (kinda) ACCOMPLISHED!
I got NFT’s to appear in the hashpack wallet!! Color me tickled when it happened. HOWEVER…the images don’t show up, there’s something going wrong with the metadata according to the gomint explorer here: https://gomint.me/explore/NFT/?tokenId=0.0.30847387&network=testnet
I’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…
hedera: https://docs.hedera.com/guides/getting-started/try-examples/create-and-transfer-your-first-nft
map from erc: https://hedera.com/blog/mapping-hedera-token-service-standards-to-erc20-erc721-erc
token mint: https://docs.hedera.com/guides/docs/hedera-api/token-service/tokenmint
ipfs link: https://ipfs.io/ipfs/bafybeibvmxm3c6kbxqfdlg6fnfkfx53yn4vt26gootqpw5ey2tghovjdqm/meta.json
kailer: https://ipfs.io/ipfs/bafybeihpn2rwqud7ud26iyj7lpkjok4ytn2wwcnzmkrrsk4nau2dtnykxi/pics/4.png
dev: https://hedera.com/blog/developer-quick-start-nfts-and-metadata
and more: https://docs.hedera.com/guides/resources/tutorials/get-started-with-hedera-nfts
I got the NFT to show in the explorer!!!!
link: https://gomint.me/explore/NFT/?tokenId=0.0.30851925&network=testnet
After a reboot, it works!!
So now what? I need to have a foundation of an app that’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…
This site needs to sense the wallet, read how many Puckface NFTs it has, grab its json data…and display the images.
MORE METADATA: https://hedera.com/blog/developer-quick-start-nfts-and-metadata
- Blender Scripting
- JSON Files
- Images
My 4 links from Ed:
Get tokens by account id: https://testnet.mirrornode.hedera.com/api/v1/balances?account.id=0.0.17950474
Get serials: https://testnet.mirrornode.hedera.com/api/v1/tokens/0.0.30854518/nfts?account.id=0.0.17950474
MirrorNodes1: https://github.com/hashgraph/hedera-mirror-node/issues/3081
Mirror nodes 2: https://hedera.com/blog/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics
Mirror Nodes 3: https://docs.hedera.com/guides/docs/mirror-node-api/rest-api
I finally have all the pieces.
Here’s the issue that put it together for me. https://github.com/rajatK012/hashconnectWalletConnect/issues/2
I fonally figured out how to talk to the hashpack wallet, and now I know how to retriev the data I need.
All I have to do is put all these puzzle pieces to gether…Of course I have to work tomorrow. Thats ok, give my eyes a break.
Going to save my links so I can restart my computer. Thanks.
Typescript partials: https://www.typescriptlang.org/docs/handbook/utility-types.html
Typsecript useContext cheat sheet: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/
TS object types: https://www.typescriptlang.org/docs/handbook/2/objects.html
Mirror nodes (dup) https://hedera.com/blog/how-to-look-up-transaction-history-on-hedera-using-mirror-nodes-back-to-the-basics
hedera metadata: https://hedera.com/blog/developer-quick-start-nfts-and-metadata
BALANCES:
https://testnet.mirrornode.hedera.com/api/v1/balances?account.id=0.0.17950474SERIALS:
https://testnet.mirrornode.hedera.com/api/v1/tokens/0.0.30854518/nfts?account.id=0.0.17950474STILL GOING and its April 4th:
JUST WANTED TO SAVE SOME LINKS:
Functions as Child Components HigherOrder
Todays Links 6th:
WELL IT’s been a while!
A while since I wrote about it at least. But I’ve been working at it every day. Trying to knock items off a list one at a time.
Here’s was todays links after putting in react-datepicker
Leave a Reply