Topos Developer Portal

Features overview

This file demonstrates the usage of various components within the Platform. All the components can include any markdown and be nested with each others.

Basic Markdown

Lists

Simple unordered list:

  • Item 1
  • Item 2
  • Item 3

Simple ordered list:

  1. Item 1
  2. Item 2
  3. Item 3

List with sub-items:

  • Item 1
    • Sub-item 1
    • Sub-item 2
  • Item 2
    • Sub-item 2-1
    • Sub-item 2-2
  • Item 3

Images

Regular image

Opens in a new tab

Illustration

Zoom image

With small prop:

Illustration

Extended components

HighlightBox

Tip

Dorothy followed her through many of the beautiful rooms in her castle.

Dorothy followed her through many of the beautiful rooms in her castle.

Dorothy followed her through many of the beautiful rooms in her castle.

Info

Dorothy followed her through many of the beautiful rooms in her castle.

Youtube Video

Toggle Section

Accordion

Tabs

Tab 1 content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet ligula sed dolor tincidunt, vel pulvinar risus faucibus. Donec in sodales turpis, faucibus aliquet quam. Sed faucibus ac arcu et sollicitudin. Nam mauris nisl, pulvinar at tempus vel, molestie quis est. Maecenas efficitur, neque sed varius cursus, magna ligula facilisis ex, non gravida eros lacus sed odio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquet ligula sed dolor tincidunt, vel pulvinar risus faucibus. Donec in sodales turpis, faucibus aliquet quam. Sed faucibus ac arcu et sollicitudin. Nam mauris nisl, pulvinar at tempus vel, molestie quis est. Maecenas efficitur, neque sed varius cursus, magna ligula facilisis ex, non gravida eros lacus sed odio.

Code

import * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'black', // Type error on property
  textAlign: 'grey', // Type error on value
};
-    return {
-      placeholderText: "Drag and drop a file here",
-      hashed: "",
-      flight: false,
-    };
+    return {};
 
import * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
-    return {
-      placeholderText: "Drag and drop a file here",
-      hashed: "",
-      flight: false,
-    };
+    return {};
 
import * as CSS from 'csstype';

const style: CSS.Properties = {
  colour: 'white', // Type error on property
  textAlign: 'middle', // Type error on value
};
-    return {
-      placeholderText: "Drag and drop a file here",
-      hashed: "",
-      flight: false,
-    };
+    return {};
src/test.py
for line in fileinput.input(inplace=1):
    line = re.sub(r"\s\\#([0-9]+)", r" [\\#\1](https://github.com/topos-protocol/dev-portal/\1)", line.rstrip())
    print(line)
View source
typescript
Loading https://github.com/topos-protocol/topos-playground/blob/main/src/main.ts...
https://github.com/topos-protocol/topos-playground/blob/main/src/main.ts
bash
$ topos-zkevm-demo execute
> demo
> hardhat run scripts/demo.ts




Contract deployed at: 0x512d5c545fa66BaaA187020381876e1E368b5A08


Deployment transaction: 0x602540bfd101d1b02b160fe1fd84cfdb8b0fa35687fc5adc56592b931174c204


Ketchup transaction: 0x785102ca9881b284588452cd90685d2c713cf61f6e4f3fcc8451bb6f2a571130 (inserted in block 4)


Mustard transaction: 0x5d98aba30400f5f0cc9c0f2d34f9f4280ec1fca88b177b3c2251ad1ea31a9af3 (inserted in block 4)
import { SpH3, SpButton } from "@tendermint/vue";

export default {
  components: {
    SpH3,
    SpButton,
  },
  data() {
    return {
      placeholderText: "Drag and drop a file here",
      hashed: "",
      flight: false,
    };
  },
  methods: {
    hash(e) {},
    async submit() {},
  }
}
export default {
  components: {
    SpH3,
    SpButton,
  },
  data() {
    return {
      placeholderText: "Drag and drop a file here",
      hashed: "",
      flight: false,
    };
  },
  methods: {
    hash(e) {},
    async submit() {},
  }
}
export default {
  components: {
    SpH3,
    SpButton,
  },
  data() {
    return {
      placeholderText: "Drag and drop a file here",
      hashed: "",
      flight: false,
    };
  },
  methods: {
    hash(e) {},
    async submit() {},
  }
}
export default {
  components: {
    SpH3,
    SpButton,
  },
  data() {
    return {
      placeholderText: "Drag and drop a file here",
      hashed: "",
      flight: false,
    };
  },
  methods: {
    hash(e) {},
    async submit() {},
  }
}
export default {
  components: {
    SpH3,
    SpButton,
  },
  data() {
    return {
      placeholderText: "Drag and drop a file here",
      hashed: "",
      flight: false,
    };
  },
  methods: {
    hash(e) {},
    async submit() {},
  }
}

Steps

1

First step

npm i
2

Second step

npm run dev
3

Title markdown

Lorem ipsum dolor sit amet

Quiz

1.
How do you define blockchain? Which of the following statements are correct?
2.
In the context of blockchain, what is the most fundamental definition of a transaction?
3.
Choose all applicable properties of a Hash.
4.
Which of the following statements about the basic problem blockchain is attempting to solve is true?
5.
Alice wants to send a message to Bob, which is for Bob's eyes only. What is the right way to encrypt and decrypt?
6.
What is the double-spend problem within Bitcoin?
7.
As a non-hierarchical approach, how does Blockchain overcome the potential failures of a “classical” network?
Your score
0
%
You scored 7/7.
Click on the solution button to find out the correct answer for any of the questions you may have missed.
1 of 7
Illustration Illustration 2 Lorem ipsum dolor sit amet Illustration 4 Illustration 5
1 of 0

Card

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Grid

Can be of 2 or 3 columns on desktop view Will fill the grid if the count is not divisible by the columns set as props.

2 columns

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

3 Columns

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis dui eu massa semper, sit amet venenatis sapien placerat.

Graphs, Flow charts

You can define some graph in the markdown, using the syntax from mermaidjs

Graph

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

LateX (KateX)

Inline

This is an inline a2+b2=c2a^2 + b^2 = c^2 (equation)

Display mode

a2+b2=c2a^2 + b^2 = c^2
© 2024 All rights reserved zk FoundationBuild ad62d477↦2024-04-26T15:32:17.725Z