How to get starknet chainId using javascript - starknet

See https://docs.starknet.io/docs/Blocks/transactions/#chain-id
The example is written in python. How do I do the equivalent in javascript?

import { encodeShortString, decodeShortString } from "starknet/dist/utils/shortString";
const SN_LOCALHOST = encodeShortString("SN_LOCALHOST");
const SN_GOERLI = encodeShortString("SN_GOERLI");
const SN_MAIN = encodeShortString("SN_MAIN");
Follow-up:
When I run int.from_bytes(b'SN_MAIN', byteorder="big", signed=False) using python I get:
23448594291968334
When I run encodeShortString('SN_MAIN')? using starknet.js I get:
0x534e5f4d41494e
Why?
Answer: hex(23448594291968334) = 0x534e5f4d41494e

You can grab all chain IDs from Starknet.js
import { StarknetChainId } from "starknet/constants";
const alphaGoerliChainId = StarknetChainId.TESTNET;
const alphaGoerli2ChainId = StarknetChainId.TESTNET2;
const mainnetChainD = StarknetChainId.MAINNET;

From newer versions of starknet library, it's not possible to access to StarknetChainId as mentioned above, but you need to do like following:
import { constants } from 'starknet';
const alphaGoerliChainId = constants.StarknetChainId.TESTNET;
const alphaGoerli2ChainId = constants.StarknetChainId.TESTNET2;
const mainnetChainD = constants.StarknetChainId.MAINNET;

Related

Using composables with OptionsAPI

Our team is converting an app from Vue 2 to 3 and I am working on the final steps.
I am investigating whether we can convert our mixin files to composables. I have yet to find any documentation to support whether you can use composables with optionsAPI.
I have tried a little sample but I am seeing the limitations:
COMPOSABLE file useComposables:
import { ref, computed } from 'vue'
export default () => {
let first = ref('First')
let last = ref('Last')
let mycomputed = computed(() => {
return `${first.value} *** ${last.value}`
})
return {
first, mycomputed
}
}
COMPONENT:
import useComposables from '#/utils/useComposable'
created () {
let { first, mycomputed } = useComposables()
console.log('first', first.value)
console.log('mycomputed', mycomputed.value)
},
<template>
mycomputed {{ mycomputed }}
</template>
So, I see when I try to do interpolation on mycomputed computed variable in the template, the component doesn't have access to the computed variable because it is not in the computed option and doesn't belong to 'this'.
I can't seem to find any documentation to support using composables with options API.
Am I missing something or is this a no-go?
Thanks
OP achieved to solve that by using the following:
setup() {
let { first, mycomputed } = useComposables()
return {
first, mycomputed
}
},

Testing array with Next.js using catch all routes slug

I am using Next.js and Typescript to create a page based on the URL. Using the Next.js catch all route ('[[...slug]]'), I would like to create the page based on how many objects the URL contains.
'/demo' would create a page with generic data
'/demo/category' would create a page with category-level data
'/demo/category/subcategory' would create a page with detailed data based on the subcategory
my file 'pages/demo/[[...slug]].tsx' contains the following
import { useRouter } from "next/router";
import { Fragment } from "react";
import DemoHeader from "../../components/layout/demoheader";
function DemoPage() {
const router = useRouter();
let arrayCount = 0;
let storyData = new Array();
storyData = router.query.slug;
arrayCount = storyData.length;
let tempType = "";
let tempBrand = "";
switch (arrayCount) {
case 0: {
tempType = "generictype";
tempBrand = "genericbrand";
break;
}
case 1:
tempType = storyData[0];
break;
case 2:
tempType = storyData[0];
tempBrand = storyData[1];
break;
}
/* if (!storyData) {
const storyType = "smallbusiness";
const storyBrand = "ountybank";
} else {
const storyType = storyData[0];
const storyBrand = storyData[1];
}
*/
const storyType = tempType;
const storyBrand = tempBrand;
return (
<Fragment>
<DemoHeader storybrand={storyBrand} storytype={storyType} />
<main className="container">
<div className="p-4 p-md-5 mb-4 rounded text-bg-dark">
...
</div>
</main>
</Fragment>
);
}
export default DemoPage;
The above will not work because I can't figure out a way to define storyData as an array, and then assign it to router.query.slug.
Originally, I tested storyData and it worked. However, when I passed those variables to compontents it appeared to redefine the variable to the default in an odd way.
What is the best way to look at the router.query.slug, and create two variables from the url that you can pass into components?
Thanks!

Sequelize assocations

I'm new to sequelize and have been exploring associations. I am using mysql 5.6 and sequelize ^4.42.0. I'm trying to create two simple tables : PRJS & TASKS and insert some data into these tables.
Through the following code snippet, I am trying to insert data into the "PRJS" as well as "Tasks" table in one go.
But it just inserts the data into PRJS table although both the tables get created.
const http = require("http");
const express = require("express");
const Sequelize = require("sequelize");
const router = require("./routes/api-routes");
const sequelize = require("./config/db");
const Prj = sequelize.define('prj', {
id :{
type:Sequelize.INTEGER,
autoIncrement:true,
primaryKey:true
},
title: Sequelize.STRING,
description: Sequelize.TEXT
});
const Task = sequelize.define('task', {
details: Sequelize.STRING,
});
Prj.hasMany(Task);
Task.belongsTo(Prj);
Prj.create(
{
title:"a",
description:"asdfasfasd",
tasks:[{
details:"asfasdfasd"
}],
include:[Task]
}
);
Following are the contents of the db.js file that I imported in the code above:
const Sequelize = require("sequelize");
const sequelize = new Sequelize("test_db","test","123456",{
dialect:"mysql",
host:"localhost",
port:3306
});
module.exports = sequelize;
Any help is much appreciated.
Thanks,
Lahiri
Use 'as' when you create association.
Prj.hasMany(Task, { as: 'Tasks' });
Task.belongsTo(Prj);
The Include should look like this:
Prj.create(
{
title:"a",
description:"asdfasfasd",
tasks:[{
details:"asfasdfasd"
}],
{
include: [{
model: Task,
as: 'Tasks'
}]
}
}
);
Try and write please what happens as a result.

How can I dynamic set a value into a property?

How to set a property to value that should be resolve.. like this one..
const getDataFromServer = (id) => ({id: * 2})
R.set(payloadProp, getDataFromServer)({id: 4}); // WRONG, is setting to a function instend to resolve a function with `{id: 4}`
const fetch = (id) => {
return { num: id * 2 }
};
const idProp = R.lensProp('id');
const getDataFromServer = R.pipe(R.view(idProp), fetch);
const payloadProp = R.lensProp('payload');
const setPayloadFromFetch = R.set(payloadProp, getDataFromServer); // NOT WORK, return payload as function
const obj = { id: 1, payload: { message: 'request' } }
const ret = setPayloadFromFetch(obj);
console.log(ret);
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
The problem is that R.set takes a value, not a function, for its second parameter. And you can't switch to R.over, which does take function but calls it with the current value at that lens, not the full data object supplied to the outer function.
The simplest way to solve this is simply to pass the object in both places:
const setPayloadFromFetch = obj => R.set(payloadProp, getDataFromServer(obj), obj);
But if you're intent on making this point-free, lift is your friend:
const setPayloadFromFetch = R.lift(R.set(payloadProp))(getDataFromServer, identity);
although you could also use R.ap, which would be very nice except that R.set takes its parameters in the wrong order for it, and so you have to use R.flip
const setPayloadFromFetch = R.ap(R.flip(R.set(payloadProp)), getDataFromServer);
You can see all these in the Ramda REPL.

Laravel Elixir: Use wildcard without combining

I have a folder, in resources/assets/sass that have 2 files 1.scss and 2.scss
I would want to do:
elixir(function (mix) {
.sass('*.scss', './public/css/');
});
And for that to generate 1.css and 2.css
I actually have more than 2 files and that's why I don't want to write them one by one. Any way to accomplish this? Thanks
Since you can write any JavaScript in the Gulpfile, you can use the 'glob' module to get the filenames, like this:
var elixir = require('laravel-elixir');
var glob = require('glob');
var path = require('path');
elixir(function (mix) {
for (let file of glob.sync('resources/assets/sass/*.scss')) {
mix.sass(path.basename(file), './public/css/');
}
});
It can be more advanced if needed - e.g. I'm using it with versioning and custom paths (and ES2015 syntax):
const elixir = require('laravel-elixir');
const glob = require('glob');
const path = require('path');
elixir(mix =>
{
let build_files = [];
for (let theme of glob.sync('resources/assets/sass/themes/*/')) {
theme = path.basename(theme);
mix.sass(`themes/${theme}/app.scss`, `public/css/${theme}/app.css`);
build_files.push(`css/${theme}/app.css`);
}
mix.version(build_files);
});

Resources