Ethereum addresses in Solidity
Jul 21, 22 by Juan Lebrijo about Solidity, Ethereum, blog
ETH addresses are hexadecimal like: 0x123AFD... The same addresses can be owned by a wallet or by Smart contract deployment. So you can send and get balance of both. Basic functions are:
  • address.balance: total weis in account (1 ETH == 10^18 weis).
  • address.transfer(amount): send an amount in weis, raising an exception if error.
  • address.send(amount): returns true if success instead of raising an exception.
Transfer/send costs are 2300 in gas. Global objects in a contract are:
  • msg.sender: Sending address
  • msg.value: weis sent
  • now: current timestamp
Functions or addresses should be marked as PAYABLE to receive ETH.
Quick basic introduction to Ethereum Development
Jul 20, 22 by Juan Lebrijo about blockchain, Ethereum, blog

You need to install Metamask as an extension in your Chrome browser. After that, create a wallet address and change to Ropsten Test Network.

1_k5aYGAd7CvRHO-o230nCPw-12.gif 397 KB

Now go to buy ETH and get it from a Test faucet. Then you can play with it by creating another account and sending ETH between them.

Here the big thing is the TRANSACTION SIGNATURE, how knows the Network that you are really the owner of this transaction? Because of Asymmetric signature, you will sign the transaction with your Private Key, so the node knows you are, because it decrypt with your Public Key. Metamask do all of it for you, also saves your private key.

Now you have ETH to test your wallet, you will code with SOLIDITY.

  • It is a language based on JavaScript designed to target Ethereum Virtual Machine (EVM).
  • Statically typed, supports inheritance, libraries and complex user-defined types. And compiled in Bytecode.
  • You can create SMART CONTRACTS with it.
  • You can find whole guide to this language at https://docs.soliditylang.org/
  • You can use Remix as web editor in your browser, or Truffle installed locally.
  • In order to test your contracts you have several options:
    • Injected Web3: testing over Ropsten Network directly.
    • JavascriptVM: more agile, but it is a Network simulation.
    • Web3 Provider: which mounts an ETH Blockchain in your Laptop, from Genesis Block. Ganache, which belongs to TruffleSuite, can do it really clean.

Enjoy your learning!!

Hotwire: Turbo Frames
Jul 19, 22 by Juan Lebrijo about Hotwire, Turbo, rails, blog

Tubo Frames decompose your page in parts using tag <turbo-frame>, which can be replaced by copies received by the server, just locating and replacing them thanks to identifiers. For example we can manage a message in your list of messages annotating with this tag "_message.html.erb":

<%= turbo_frame_tag @message do %>
......
  <%= link_to @messages, data: { turbo_frame: "_top" } %>
......
<% end %>

In this ERB code frame would be replaced inside the tags, but the link to all messages will be replaced in full body of HTML page. Here is the translation to HTML code:

<turbo-frame id="message_1">
......
  <a href="/messages" data-turbo-frame="_top" />
......
</turbo-frame>

In controller we send only "_message.html.erb" rendered

def show
  @message = Message.find(params[:id])
  render @message
end

Eager-loaded frame: Replaced when "/messages" are loaded. Adding "src: @messages" to your ERB file.

Lazy-loaded frame: Content will be replaced when frame is visible. Add [loading: "lazy"]to ERB tag

Frame targets: manage where to be replaced

  • [target: "_top"]: All links/forms within replace full window.
  • [target: "main"]: All links/forms within replace "main" frame.
  • [data: {turbo_frame: "_seld"}]: In a "_top" frame resets the link to self replacement.

Advance/replace on browser history: By default takes replace strategy, but you can create copies: <turbo-frame data-turbo-action="advance">

Anti-forgery support (CSFF):

  • Auto managed by Rails, adds a <meta> in header with "csrf-token" name attribute.
  • Then all submissions send "X-CSRF-TOKEN" in HTTP header. Except when: data-turbo="false"; which disables turbo in this element.

Several Frame attributes and JavaScript properties:

  • src (Frame.src in JS): path to control the navigation URL.
  • loading (Frame.loading): navigation eager or lazy.
  • disabled (Frame.disabled): Frame disabled for navigating.
  • autoscroll (Frame.autoscroll): Scroll after loading. Values are: end|start|center|nearest.

Check reference, they are very useful on development.