diff --git a/.changeset/brave-hats-worry.md b/.changeset/brave-hats-worry.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/brave-hats-worry.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.changeset/late-files-occur.md b/.changeset/late-files-occur.md new file mode 100644 index 0000000000..f06d00729e --- /dev/null +++ b/.changeset/late-files-occur.md @@ -0,0 +1,5 @@ +--- +'@kadena/react-ui': none +--- + +Refactor Accordion component diff --git a/.changeset/many-beds-carry.md b/.changeset/many-beds-carry.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/many-beds-carry.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/docs/public/assets/blog/2020/0_-arUE20ABJc23du3.png b/packages/apps/docs/public/assets/blog/2020/0_-arUE20ABJc23du3.png new file mode 100644 index 0000000000..73f8303dfe Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_-arUE20ABJc23du3.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_3kQFU-u_qHldK0IT.png b/packages/apps/docs/public/assets/blog/2020/0_3kQFU-u_qHldK0IT.png new file mode 100644 index 0000000000..4e6139b8b7 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_3kQFU-u_qHldK0IT.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_5MX44J7kCEENMVjd.png b/packages/apps/docs/public/assets/blog/2020/0_5MX44J7kCEENMVjd.png new file mode 100644 index 0000000000..80c86883df Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_5MX44J7kCEENMVjd.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_8hYOc8ju0R8OPc8f.png b/packages/apps/docs/public/assets/blog/2020/0_8hYOc8ju0R8OPc8f.png new file mode 100644 index 0000000000..ffd6010c4b Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_8hYOc8ju0R8OPc8f.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_ELVmXi7NYzjTxc9E.png b/packages/apps/docs/public/assets/blog/2020/0_ELVmXi7NYzjTxc9E.png new file mode 100644 index 0000000000..f407123c55 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_ELVmXi7NYzjTxc9E.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_EZcDpU5FDACgd87b.png b/packages/apps/docs/public/assets/blog/2020/0_EZcDpU5FDACgd87b.png new file mode 100644 index 0000000000..3b2d2e1bf4 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_EZcDpU5FDACgd87b.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_H8T8ghbQ66xH3Q9o.png b/packages/apps/docs/public/assets/blog/2020/0_H8T8ghbQ66xH3Q9o.png new file mode 100644 index 0000000000..420b677480 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_H8T8ghbQ66xH3Q9o.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_JMFvtK6HaHFfiAnP.png b/packages/apps/docs/public/assets/blog/2020/0_JMFvtK6HaHFfiAnP.png new file mode 100644 index 0000000000..5505767f79 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_JMFvtK6HaHFfiAnP.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_ODJdGqiCscwQODRm.png b/packages/apps/docs/public/assets/blog/2020/0_ODJdGqiCscwQODRm.png new file mode 100644 index 0000000000..29dbf64ef4 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_ODJdGqiCscwQODRm.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_Q-Fd5-wZL4Sg4VoS.png b/packages/apps/docs/public/assets/blog/2020/0_Q-Fd5-wZL4Sg4VoS.png new file mode 100644 index 0000000000..b8f1cb0afb Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_Q-Fd5-wZL4Sg4VoS.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_hn1GJqWb3Eol0oAJ.png b/packages/apps/docs/public/assets/blog/2020/0_hn1GJqWb3Eol0oAJ.png new file mode 100644 index 0000000000..cf35d59bb9 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_hn1GJqWb3Eol0oAJ.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_tl-c2db-uvN8MOXf.png b/packages/apps/docs/public/assets/blog/2020/0_tl-c2db-uvN8MOXf.png new file mode 100644 index 0000000000..3c410e1cc1 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_tl-c2db-uvN8MOXf.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/0_vHk5WHLUQ_aE89VJ.png b/packages/apps/docs/public/assets/blog/2020/0_vHk5WHLUQ_aE89VJ.png new file mode 100644 index 0000000000..5cfff4d66a Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/0_vHk5WHLUQ_aE89VJ.png differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_2BA8I4luclrVgk57_6Nb1Q.webp b/packages/apps/docs/public/assets/blog/2020/1_2BA8I4luclrVgk57_6Nb1Q.webp new file mode 100644 index 0000000000..f44d37c3bc Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_2BA8I4luclrVgk57_6Nb1Q.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_3uPPdFwBaIUCvpuc2-XavA.webp b/packages/apps/docs/public/assets/blog/2020/1_3uPPdFwBaIUCvpuc2-XavA.webp new file mode 100644 index 0000000000..98bc283c4f Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_3uPPdFwBaIUCvpuc2-XavA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_40MoCSBHaDVFNJCgIcrGqQ.webp b/packages/apps/docs/public/assets/blog/2020/1_40MoCSBHaDVFNJCgIcrGqQ.webp new file mode 100644 index 0000000000..bc48cb7845 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_40MoCSBHaDVFNJCgIcrGqQ.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_4DCX4tcoFGCSYqE4K_wy5Q.webp b/packages/apps/docs/public/assets/blog/2020/1_4DCX4tcoFGCSYqE4K_wy5Q.webp new file mode 100644 index 0000000000..b98cf2d115 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_4DCX4tcoFGCSYqE4K_wy5Q.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_AChuT728AgSZfZcFMqanbA.webp b/packages/apps/docs/public/assets/blog/2020/1_AChuT728AgSZfZcFMqanbA.webp new file mode 100644 index 0000000000..55ff025ea7 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_AChuT728AgSZfZcFMqanbA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_BWXDWnNDfpa6zTljd7rguQ.webp b/packages/apps/docs/public/assets/blog/2020/1_BWXDWnNDfpa6zTljd7rguQ.webp new file mode 100644 index 0000000000..8283939dc3 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_BWXDWnNDfpa6zTljd7rguQ.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_CdW37ppe1kqXvhBE3n9O2A.webp b/packages/apps/docs/public/assets/blog/2020/1_CdW37ppe1kqXvhBE3n9O2A.webp new file mode 100644 index 0000000000..0f3e9c0e2b Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_CdW37ppe1kqXvhBE3n9O2A.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_DPaqrSYvWQpdKUexyUcgTw.webp b/packages/apps/docs/public/assets/blog/2020/1_DPaqrSYvWQpdKUexyUcgTw.webp new file mode 100644 index 0000000000..86e10810c3 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_DPaqrSYvWQpdKUexyUcgTw.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_GhtdwmlGhXExzdmPvGuQ4Q.webp b/packages/apps/docs/public/assets/blog/2020/1_GhtdwmlGhXExzdmPvGuQ4Q.webp new file mode 100644 index 0000000000..5b08f8c861 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_GhtdwmlGhXExzdmPvGuQ4Q.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_HJDBr9jX5Ajucwmynt15eg.webp b/packages/apps/docs/public/assets/blog/2020/1_HJDBr9jX5Ajucwmynt15eg.webp new file mode 100644 index 0000000000..340a7cc314 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_HJDBr9jX5Ajucwmynt15eg.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_JGCxne8duh-sQwsqv43p6g.webp b/packages/apps/docs/public/assets/blog/2020/1_JGCxne8duh-sQwsqv43p6g.webp new file mode 100644 index 0000000000..49832ff6a9 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_JGCxne8duh-sQwsqv43p6g.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_JfE77s3CWXoDbh4o9F2-gA.webp b/packages/apps/docs/public/assets/blog/2020/1_JfE77s3CWXoDbh4o9F2-gA.webp new file mode 100644 index 0000000000..51df86984c Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_JfE77s3CWXoDbh4o9F2-gA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_LQouI-FC-8Pmkxs2-5UG7w.webp b/packages/apps/docs/public/assets/blog/2020/1_LQouI-FC-8Pmkxs2-5UG7w.webp new file mode 100644 index 0000000000..38c65e66c9 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_LQouI-FC-8Pmkxs2-5UG7w.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_NQHVZvgxYDdMjrIgC80PXg.webp b/packages/apps/docs/public/assets/blog/2020/1_NQHVZvgxYDdMjrIgC80PXg.webp new file mode 100644 index 0000000000..7da310ad37 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_NQHVZvgxYDdMjrIgC80PXg.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_NfLprkEnhzsul2fPmC_SjA.webp b/packages/apps/docs/public/assets/blog/2020/1_NfLprkEnhzsul2fPmC_SjA.webp new file mode 100644 index 0000000000..199f33d89c Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_NfLprkEnhzsul2fPmC_SjA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_OQo0NHsWnN7VHBlslwthNA.webp b/packages/apps/docs/public/assets/blog/2020/1_OQo0NHsWnN7VHBlslwthNA.webp new file mode 100644 index 0000000000..25ad9363ae Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_OQo0NHsWnN7VHBlslwthNA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_Q1h18cmTzAA4S4BAk5bXFg.webp b/packages/apps/docs/public/assets/blog/2020/1_Q1h18cmTzAA4S4BAk5bXFg.webp new file mode 100644 index 0000000000..fbcf367c62 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_Q1h18cmTzAA4S4BAk5bXFg.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_TC6Pmg3mMESvs7C1cZFsrA.webp b/packages/apps/docs/public/assets/blog/2020/1_TC6Pmg3mMESvs7C1cZFsrA.webp new file mode 100644 index 0000000000..252e59a4a5 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_TC6Pmg3mMESvs7C1cZFsrA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_U-4RpLd3IniJwys-r9Aqlw.webp b/packages/apps/docs/public/assets/blog/2020/1_U-4RpLd3IniJwys-r9Aqlw.webp new file mode 100644 index 0000000000..83570542c3 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_U-4RpLd3IniJwys-r9Aqlw.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_VzDmro2_e8CPGbUG0qyD-w.webp b/packages/apps/docs/public/assets/blog/2020/1_VzDmro2_e8CPGbUG0qyD-w.webp new file mode 100644 index 0000000000..8652a56302 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_VzDmro2_e8CPGbUG0qyD-w.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1__Usm8O2pFFohsQ6nvuTauA.webp b/packages/apps/docs/public/assets/blog/2020/1__Usm8O2pFFohsQ6nvuTauA.webp new file mode 100644 index 0000000000..c591184965 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1__Usm8O2pFFohsQ6nvuTauA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1__tid1PJH0R_WwpxL0Jvcww.webp b/packages/apps/docs/public/assets/blog/2020/1__tid1PJH0R_WwpxL0Jvcww.webp new file mode 100644 index 0000000000..4b4ca3d51a Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1__tid1PJH0R_WwpxL0Jvcww.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_b97oiC8M_ePx83B-PW0Cfg.webp b/packages/apps/docs/public/assets/blog/2020/1_b97oiC8M_ePx83B-PW0Cfg.webp new file mode 100644 index 0000000000..f6b57c5f59 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_b97oiC8M_ePx83B-PW0Cfg.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_fXHXkuEYUiXhSPd8lIf-UA.webp b/packages/apps/docs/public/assets/blog/2020/1_fXHXkuEYUiXhSPd8lIf-UA.webp new file mode 100644 index 0000000000..3704563c9d Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_fXHXkuEYUiXhSPd8lIf-UA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_fynn5el1Ya3Q6F-TbBTFGg.webp b/packages/apps/docs/public/assets/blog/2020/1_fynn5el1Ya3Q6F-TbBTFGg.webp new file mode 100644 index 0000000000..49ee69cefd Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_fynn5el1Ya3Q6F-TbBTFGg.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_gx_qreTbIj3PIoY0_4KtRw.webp b/packages/apps/docs/public/assets/blog/2020/1_gx_qreTbIj3PIoY0_4KtRw.webp new file mode 100644 index 0000000000..c4189cb105 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_gx_qreTbIj3PIoY0_4KtRw.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_h-gQ8SjBId21Xhp8IZebMQ.webp b/packages/apps/docs/public/assets/blog/2020/1_h-gQ8SjBId21Xhp8IZebMQ.webp new file mode 100644 index 0000000000..dcca3f1a3f Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_h-gQ8SjBId21Xhp8IZebMQ.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_p6WZuf2vAj5qzBUbg0fiWA.webp b/packages/apps/docs/public/assets/blog/2020/1_p6WZuf2vAj5qzBUbg0fiWA.webp new file mode 100644 index 0000000000..0719c6a3a9 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_p6WZuf2vAj5qzBUbg0fiWA.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_qrxABmn5R_6xGQpz3djmQQ.webp b/packages/apps/docs/public/assets/blog/2020/1_qrxABmn5R_6xGQpz3djmQQ.webp new file mode 100644 index 0000000000..30f7f37725 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_qrxABmn5R_6xGQpz3djmQQ.webp differ diff --git a/packages/apps/docs/public/assets/blog/2020/1_yl4w71ccQB02X08t389QDg.webp b/packages/apps/docs/public/assets/blog/2020/1_yl4w71ccQB02X08t389QDg.webp new file mode 100644 index 0000000000..ccf7ded7c7 Binary files /dev/null and b/packages/apps/docs/public/assets/blog/2020/1_yl4w71ccQB02X08t389QDg.webp differ diff --git a/packages/apps/docs/src/components/Layout/Blog/ArticleMetadataItem.tsx b/packages/apps/docs/src/components/Layout/Blog/ArticleMetadataItem.tsx new file mode 100644 index 0000000000..1ec2b3bc20 --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Blog/ArticleMetadataItem.tsx @@ -0,0 +1,7 @@ +import { articleMetaDataItemClass } from './styles.css'; + +import React, { FC, PropsWithChildren } from 'react'; + +export const ArticleMetadataItem: FC = ({ children }) => ( + {children} +); diff --git a/packages/apps/docs/src/components/Layout/Blog/Blog.css.ts b/packages/apps/docs/src/components/Layout/Blog/Blog.css.ts deleted file mode 100644 index 5e9cadfcef..0000000000 --- a/packages/apps/docs/src/components/Layout/Blog/Blog.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { sprinkles, vars } from '@kadena/react-ui/theme'; - -import { style } from '@vanilla-extract/css'; - -export const bottomWrapperClass = style([ - sprinkles({ - width: '100%', - paddingTop: '$20', - marginTop: '$20', - }), - { - borderTop: `1px solid ${vars.colors.$borderDefault}`, - }, -]); - -export const articleTopMetadataClass = style([ - sprinkles({ - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - width: '100%', - marginBottom: '$5', - paddingX: 0, - paddingY: '$5', - }), - { - borderBottom: `1px solid ${vars.colors.$borderDefault}`, - opacity: '0.6', - }, -]); diff --git a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx index 4b04c68762..4fbeeb9a9c 100644 --- a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx +++ b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx @@ -1,5 +1,6 @@ import { Grid, Stack } from '@kadena/react-ui'; +import { baseGridClass } from '../basestyles.css'; import { articleClass, contentClass, @@ -9,12 +10,16 @@ import { import { Template } from '../components/Template'; import { globalClass } from '../global.css'; -import { articleTopMetadataClass, bottomWrapperClass } from './Blog.css'; -import { ArticleMetadataItem, PageGrid } from './styles'; +import { ArticleMetadataItem } from './ArticleMetadataItem'; +import { + articleTopMetadataClass, + bottomWrapperClass, + pageGridClass, +} from './styles.css'; import { IPageProps } from '@/types/Layout'; import { formatDateDistance } from '@/utils/dates'; -import classNames from 'classnames'; +import classnames from 'classnames'; import React, { FC } from 'react'; export const Blog: FC = ({ @@ -26,20 +31,21 @@ export const Blog: FC = ({ const readingTimeLabel = readingTimeInMinutes && readingTimeInMinutes > 1 ? 'minutes' : 'minute'; - const contentClassNames = classNames( + const contentClassNames = classnames( contentClass, contentClassVariants[frontmatter.layout] ?? '', ); + const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass); + return ( - +
- +
); }; diff --git a/packages/apps/docs/src/components/Layout/Blog/styles.css.ts b/packages/apps/docs/src/components/Layout/Blog/styles.css.ts new file mode 100644 index 0000000000..089e344be9 --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Blog/styles.css.ts @@ -0,0 +1,73 @@ +import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; + +import { style } from '@vanilla-extract/css'; + +export const bottomWrapperClass = style([ + sprinkles({ + width: '100%', + paddingTop: '$20', + marginTop: '$20', + }), + { + borderTop: `1px solid ${vars.colors.$borderDefault}`, + }, +]); + +export const articleTopMetadataClass = style([ + sprinkles({ + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + width: '100%', + marginBottom: '$5', + paddingX: 0, + paddingY: '$5', + }), + { + borderBottom: `1px solid ${vars.colors.$borderDefault}`, + opacity: '0.6', + }, +]); + +export const pageGridClass = style({ + gridTemplateColumns: 'auto auto', + gridTemplateAreas: ` + "header header" + "pageheader pageheader" + "content" + "footer footer" + `, + + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: '0% 5% auto 5%', + + gridTemplateAreas: ` + "header header header header" + "pageheader pageheader pageheader pageheader" + ". content . ." + "footer footer footer footer" + `, + }, + + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)', + gridTemplateAreas: ` + "header header header header" + "pageheader pageheader pageheader pageheader" + ". content ." + "footer footer footer footer" + `, + }, + }, +}); + +export const articleMetaDataItemClass = style({ + selectors: { + '&:not(:first-of-type)::before': { + content: '"•"', + height: '100%', + margin: vars.sizes.$3, + }, + }, +}); diff --git a/packages/apps/docs/src/components/Layout/Blog/styles.ts b/packages/apps/docs/src/components/Layout/Blog/styles.ts deleted file mode 100644 index 1f4844c044..0000000000 --- a/packages/apps/docs/src/components/Layout/Blog/styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import { BasePageGrid } from '../components/styles'; - -export const ArticleMetadataItem: StyledComponent<'span'> = styled('span', { - '::before': { - content: '"•"', - height: '100%', - margin: '$3', - }, -}); - -export const PageGrid: StyledComponent = styled( - BasePageGrid, - { - gridTemplateColumns: 'auto auto', - gridTemplateAreas: ` - "header header" - "pageheader pageheader" - "content" - "footer footer" - `, - - '@md': { - gridTemplateColumns: '0% 5% auto 5%', - - gridTemplateAreas: ` - "header header header header" - "pageheader pageheader pageheader pageheader" - ". content . ." - "footer footer footer footer" - `, - }, - '@2xl': { - gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)', - gridTemplateAreas: ` - "header header header header" - "pageheader pageheader pageheader pageheader" - ". content ." - "footer footer footer footer" - `, - }, - }, -); diff --git a/packages/apps/docs/src/components/Layout/Full/Full.tsx b/packages/apps/docs/src/components/Layout/Full/Full.tsx index ba5616dab1..6d35d5ed3f 100644 --- a/packages/apps/docs/src/components/Layout/Full/Full.tsx +++ b/packages/apps/docs/src/components/Layout/Full/Full.tsx @@ -1,6 +1,6 @@ import { Heading } from '@kadena/react-ui'; -import { basebackgroundClass } from '../basestyles.css'; +import { basebackgroundClass, baseGridClass } from '../basestyles.css'; import { articleClass, contentClass, @@ -9,15 +9,14 @@ import { import { Template } from '../components/Template'; import { globalClass } from '../global.css'; +import { AsideList, ListItem } from './components/Aside'; import { - Aside, - AsideList, - ListItem, - StickyAside, - StickyAsideWrapper, -} from './components/Aside'; -import { PageGrid } from './styles'; -import { asidebackgroundClass } from './styles.css'; + asidebackgroundClass, + asideClass, + pageGridClass, + stickyAsideClass, + stickyAsideWrapperClass, +} from './styles.css'; import { BottomPageSection } from '@/components/BottomPageSection'; import { Breadcrumbs } from '@/components/Breadcrumbs'; @@ -84,8 +83,10 @@ export const Full: FC = ({ asidebackgroundClass, ); + const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass); + return ( - +
- +
); }; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx index 401dd6d836..f9b7b09dfe 100644 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx @@ -1,5 +1,11 @@ -import { AsideItem, AsideItemLink } from './AsideStyles'; +import { + asideItemClass, + asideItemLinkActiveVariants, + asideItemLinkClass, +} from './styles.css'; +import classNames from 'classnames'; +import Link from 'next/link'; import React, { FC, MouseEventHandler, ReactNode } from 'react'; interface IProps { @@ -17,12 +23,17 @@ export const AsideLink: FC = ({ isActive, onClick, }) => { + const linkClass = classNames( + asideItemLinkClass, + asideItemLinkActiveVariants[isActive ? 'true' : 'false'], + ); + return ( - - +
  • + {label} - + {children} - +
    • ); }; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx new file mode 100644 index 0000000000..e0525d2f9a --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx @@ -0,0 +1,22 @@ +import { asideListClass, asideListInnerVariants } from './styles.css'; + +import classNames from 'classnames'; +import React, { FC, ReactNode } from 'react'; + +interface IProps { + children: ReactNode; + inner?: boolean; + ref?: React.MutableRefObject; +} + +export const AsideList: FC = ({ children, inner = false, ref }) => { + const classes = classNames( + asideListClass, + asideListInnerVariants[inner ? 'true' : 'false'], + ); + return ( +
      + {children} +
    + ); +}; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts deleted file mode 100644 index ed61dbab29..0000000000 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/AsideStyles.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import Link from 'next/link'; - -export const Aside: StyledComponent< - 'aside', - { - layout?: 'code' | 'default'; - isOpen?: boolean | 'true' | 'false' | undefined; - } -> = styled('aside', { - display: 'none', - gridArea: 'aside', - height: '100%', - width: '100%', - gridColumn: '4 / span 2', - gridRow: '2 / span 2', - - zIndex: '$sideMenu', - padding: '0 $4', - position: 'absolute', - transform: 'translateX(100vw)', - - '@md': { - display: 'block', - transform: 'translateX(0)', - }, - compoundVariants: [ - { - isOpen: true, - layout: 'code', - css: { - display: 'block', - transform: 'translateX(0)', - width: '100%', - }, - }, - ], - variants: { - layout: { - code: { - '@md': { - backgroundColor: 'initial', - }, - '@2xl': { - maxWidth: '$$asideMenuWidthCode', - }, - }, - default: {}, - }, - isOpen: { - true: {}, - false: {}, - }, - }, -}); - -export const AsideItem: StyledComponent<'li'> = styled('li', { - lineHeight: '$base', -}); - -export const AsideItemLink: StyledComponent< - typeof Link, - { isActive?: boolean | 'true' | 'false' } -> = styled(Link, { - textDecoration: 'none', - '&:hover': { - textDecoration: 'underline', - }, - - defaultVariants: { - isActive: false, - }, - variants: { - isActive: { - true: { - color: '$neutral6', - textDecoration: 'underline', - }, - false: { - color: '$primaryHighContrast', - }, - }, - }, -}); - -export const AsideList: StyledComponent< - 'ul', - { inner?: boolean | 'true' | 'false' | undefined } -> = styled('ul', { - listStyle: 'initial', - listStylePosition: 'outside', - margin: 0, - padding: '0', - - '& li::marker': { - color: '$primaryHighContrast', - fontWeight: '$bold', - display: 'inline-block', - width: '$4', - margin: '0 $1', - }, - - variants: { - inner: { - true: { - paddingLeft: '$4', - }, - false: {}, - }, - }, -}); - -export const StickyAsideWrapper: StyledComponent<'div'> = styled('div', { - position: 'sticky', - display: 'flex', - top: '$10', - paddingLeft: '$4', -}); - -export const StickyAside: StyledComponent<'div'> = styled('div', { - paddingTop: '$10', - height: 'calc(100vh - $20)', - overflowY: 'scroll', -}); diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts index 6237bd8f29..428b7df070 100644 --- a/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/index.ts @@ -1,3 +1,3 @@ export * from './AsideLink'; -export * from './AsideStyles'; +export * from './AsideList'; export * from './ListItem'; diff --git a/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts new file mode 100644 index 0000000000..771a544c4b --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Full/components/Aside/styles.css.ts @@ -0,0 +1,61 @@ +import { sprinkles, vars } from '@kadena/react-ui/theme'; + +import { style, styleVariants } from '@vanilla-extract/css'; + +export const asideItemLinkClass = style([ + sprinkles({ + textDecoration: 'none', + }), + { + selectors: { + '&:hover': { + textDecoration: 'underline', + }, + }, + }, +]); + +export const asideItemLinkActiveVariants = styleVariants({ + true: { + color: vars.colors.$neutral6, + textDecoration: 'underline', + }, + false: { + color: vars.colors.$primaryHighContrast, + }, +}); + +export const asideItemClass = style([ + sprinkles({ + lineHeight: '$base', + }), + { + selectors: { + '&::marker': { + color: vars.colors.$primaryHighContrast, + fontWeight: vars.fontWeights.$bold, + display: 'inline-block', + width: vars.sizes.$4, + margin: `0 ${vars.sizes.$1}`, + }, + }, + }, +]); + +export const asideListClass = style([ + sprinkles({ + margin: 0, + padding: 0, + }), + { + listStyle: 'initial', + listStylePosition: 'outside', + }, +]); + +export const asideListInnerVariants = styleVariants({ + true: { + paddingLeft: vars.sizes.$4, + }, + false: {}, +}); diff --git a/packages/apps/docs/src/components/Layout/Full/styles.css.ts b/packages/apps/docs/src/components/Layout/Full/styles.css.ts index 12e89cf262..309b1fe7f9 100644 --- a/packages/apps/docs/src/components/Layout/Full/styles.css.ts +++ b/packages/apps/docs/src/components/Layout/Full/styles.css.ts @@ -1,13 +1,14 @@ import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; -import { $$pageWidth } from '../global.css'; +import { + $$asideMenuWidthLGDefault, + $$asideMenuWidthMDDefault, +} from '../basestyles.css'; +import { $$leftSideWidth, $$pageWidth, $$sideMenu } from '../global.css'; import { createVar, style } from '@vanilla-extract/css'; export const $$shadowWidth = createVar(); -export const $$asideMenuWidthCode = createVar(); -export const $$asideMenuWidthMDDefault = createVar(); -export const $$asideMenuWidthLGDefault = createVar(); export const asidebackgroundClass = style([ sprinkles({ @@ -17,9 +18,6 @@ export const asidebackgroundClass = style([ { vars: { [$$shadowWidth]: vars.sizes.$25, - [$$asideMenuWidthCode]: '400px', - [$$asideMenuWidthMDDefault]: '200px', - [$$asideMenuWidthLGDefault]: '300px', }, selectors: { @@ -59,3 +57,58 @@ export const asidebackgroundClass = style([ }, }, ]); + +export const pageGridClass = style({ + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthMDDefault})) ${$$asideMenuWidthMDDefault} 1%`, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `auto ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthLGDefault})) ${$$asideMenuWidthLGDefault} auto`, + }, + }, +}); + +export const stickyAsideWrapperClass = style([ + sprinkles({ + position: 'sticky', + display: 'flex', + top: '$10', + paddingLeft: '$4', + }), +]); + +export const stickyAsideClass = style([ + sprinkles({ + paddingTop: '$10', + }), + { + overflowY: 'scroll', + height: 'calc(100vh - $20)', + }, +]); + +export const asideClass = style([ + sprinkles({ + display: 'none', + position: 'absolute', + height: '100%', + width: '100%', + paddingY: 0, + paddingX: '$4', + }), + { + gridArea: 'aside', + gridColumn: '4 / span 2', + gridRow: '2 / span 2', + zIndex: $$sideMenu, + transform: 'translateX(100vw)', + + '@media': { + [`screen and ${breakpoints.md}`]: { + display: 'block', + transform: 'translateX(0)', + }, + }, + }, +]); diff --git a/packages/apps/docs/src/components/Layout/Full/styles.ts b/packages/apps/docs/src/components/Layout/Full/styles.ts deleted file mode 100644 index 5550c52d53..0000000000 --- a/packages/apps/docs/src/components/Layout/Full/styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import { BasePageGrid } from '../components/styles'; - -export const PageGrid: StyledComponent = styled( - BasePageGrid, - { - '@md': { - gridTemplateColumns: - '1% $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth - $$asideMenuWidthMDDefault)) $$asideMenuWidthMDDefault 1%', - }, - '@2xl': { - gridTemplateColumns: - 'auto $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth - $$asideMenuWidthLGDefault)) $$asideMenuWidthLGDefault auto', - }, - }, -); diff --git a/packages/apps/docs/src/components/Layout/Home/Home.tsx b/packages/apps/docs/src/components/Layout/Home/Home.tsx index 650ff39b07..d0859bd180 100644 --- a/packages/apps/docs/src/components/Layout/Home/Home.tsx +++ b/packages/apps/docs/src/components/Layout/Home/Home.tsx @@ -1,18 +1,20 @@ -import { BasePageGrid } from '../components/styles'; +import { baseGridClass } from '../basestyles.css'; import { Template } from '../components/Template'; import { globalClass } from './../global.css'; import { IPageProps } from '@/types/Layout'; +import classnames from 'classnames'; import React, { FC } from 'react'; export const Home: FC = ({ children, leftMenuTree }) => { + const gridClassNames = classnames(globalClass, baseGridClass); return ( - +
    - +
    ); }; diff --git a/packages/apps/docs/src/components/Layout/Home/styles.css.ts b/packages/apps/docs/src/components/Layout/Home/styles.css.ts new file mode 100644 index 0000000000..81fab7330b --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Home/styles.css.ts @@ -0,0 +1,93 @@ +import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; + +import { $$asideMenuWidthCode } from '../basestyles.css'; +import { + $$backgroundOverlayColor, + $$leftSideWidth, + $$pageWidth, +} from '../global.css'; + +import { createVar, style } from '@vanilla-extract/css'; + +export const $$shadowWidth = createVar(); + +export const codebackgroundClass = style([ + sprinkles({}), + + { + vars: { + [$$shadowWidth]: vars.sizes.$20, + }, + selectors: { + '&::before': { + display: 'none', + content: '', + position: 'absolute', + pointerEvents: 'none', + inset: 0, + backgroundColor: vars.colors.$background, + backgroundImage: 'url("/assets/bg-vertical.png")', + backgroundRepeat: 'no-repeat', + backgroundPositionY: '-100px', + backgroundPositionX: '-100px', + '@media': { + [`screen and ${breakpoints.md}`]: { + backgroundColor: 'transparent', + backgroundPositionX: `calc(100vw - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`, + }, + [`screen and ${breakpoints.lg}`]: { + backgroundPositionX: `calc(100vw - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`, + }, + [`screen and ${breakpoints.xl}`]: { + display: 'block', + }, + [`screen and ${breakpoints.xxl}`]: { + backgroundPositionX: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2 ) - (${$$asideMenuWidthCode} + ${$$shadowWidth}))`, + }, + }, + }, + '&::after': { + backgroundColor: 'transparent', + '@media': { + [`screen and ${breakpoints.md}`]: { + left: `calc(100vw - (${$$asideMenuWidthCode} + ${vars.sizes.$4}))`, + }, + [`screen and ${breakpoints.lg}`]: { + left: `calc(100vw - (${$$asideMenuWidthCode} + ${vars.sizes.$4} + ${vars.sizes.$4}))`, + }, + [`screen and ${breakpoints.xl}`]: { + backgroundColor: $$backgroundOverlayColor, + }, + [`screen and ${breakpoints.xxl}`]: { + left: `calc(${$$pageWidth} + ((100vw - ${$$pageWidth}) /2) - (${$$asideMenuWidthCode} + ${vars.sizes.$6} ))`, + }, + }, + }, + }, + }, +]); + +export const pageGridClass = style({ + gridTemplateColumns: 'auto auto', + gridTemplateAreas: ` + "header header" + "pageheader pageheader" + "content content" + "footer footer" + `, + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`, + + gridTemplateAreas: ` + "header header header header" + "pageheader pageheader pageheader pageheader" + ". menu content ." + "footer footer footer footer" + `, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`, + }, + }, +}); diff --git a/packages/apps/docs/src/components/Layout/Landing/Landing.tsx b/packages/apps/docs/src/components/Layout/Landing/Landing.tsx index 49da0f0497..8e70b79b61 100644 --- a/packages/apps/docs/src/components/Layout/Landing/Landing.tsx +++ b/packages/apps/docs/src/components/Layout/Landing/Landing.tsx @@ -1,3 +1,4 @@ +import { baseGridClass } from '../basestyles.css'; import { articleClass, contentClass, @@ -7,11 +8,11 @@ import { import { Template } from '../components/Template'; import { globalClass } from '../global.css'; -import { PageGrid } from './styles'; +import { pageGridClass } from './styles.css'; import { NotFound } from '@/components/NotFound'; import { IBasePageProps } from '@/types/Layout'; -import classNames from 'classnames'; +import classnames from 'classnames'; import React, { FC } from 'react'; export const Landing: FC = ({ @@ -19,8 +20,10 @@ export const Landing: FC = ({ frontmatter, leftMenuTree, }) => { + const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass); + return ( - +
    - +
    ); }; diff --git a/packages/apps/docs/src/components/Layout/Landing/styles.css.ts b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts new file mode 100644 index 0000000000..3ed3392387 --- /dev/null +++ b/packages/apps/docs/src/components/Layout/Landing/styles.css.ts @@ -0,0 +1,30 @@ +import { breakpoints } from '@kadena/react-ui/theme'; + +import { $$leftSideWidth, $$pageWidth } from '../global.css'; + +import { style } from '@vanilla-extract/css'; + +export const pageGridClass = style({ + gridTemplateColumns: 'auto auto', + gridTemplateAreas: ` + "header header" + "pageheader pageheader" + "content content" + "footer footer" + `, + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`, + + gridTemplateAreas: ` + "header header header header" + "pageheader pageheader pageheader pageheader" + ". menu content ." + "footer footer footer footer" + `, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`, + }, + }, +}); diff --git a/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx b/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx index f78fed0f67..584cc3237a 100644 --- a/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx +++ b/packages/apps/docs/src/components/Layout/Redocly/Redocly.tsx @@ -1,4 +1,4 @@ -import { basebackgroundClass } from '../basestyles.css'; +import { basebackgroundClass, baseGridClass } from '../basestyles.css'; import { articleClass, contentClass, @@ -7,8 +7,7 @@ import { import { Template } from '../components/Template'; import { globalClass } from '../global.css'; -import { PageGrid } from './styles'; -import { codebackgroundClass } from './styles.css'; +import { codebackgroundClass, pageGridClass } from './styles.css'; import { BottomPageSection } from '@/components/BottomPageSection'; import { Breadcrumbs } from '@/components/Breadcrumbs'; @@ -59,8 +58,11 @@ export const Redocly: FC = ({ basebackgroundClass, codebackgroundClass, ); + + const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass); + return ( - +
    - +
    ); }; diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts index 9039deaf2c..81fab7330b 100644 --- a/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts +++ b/packages/apps/docs/src/components/Layout/Redocly/styles.css.ts @@ -1,11 +1,15 @@ import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme'; -import { $$backgroundOverlayColor, $$pageWidth } from '../global.css'; +import { $$asideMenuWidthCode } from '../basestyles.css'; +import { + $$backgroundOverlayColor, + $$leftSideWidth, + $$pageWidth, +} from '../global.css'; import { createVar, style } from '@vanilla-extract/css'; export const $$shadowWidth = createVar(); -export const $$asideMenuWidthCode = createVar(); export const codebackgroundClass = style([ sprinkles({}), @@ -13,7 +17,6 @@ export const codebackgroundClass = style([ { vars: { [$$shadowWidth]: vars.sizes.$20, - [$$asideMenuWidthCode]: '400px', }, selectors: { '&::before': { @@ -63,3 +66,28 @@ export const codebackgroundClass = style([ }, }, ]); + +export const pageGridClass = style({ + gridTemplateColumns: 'auto auto', + gridTemplateAreas: ` + "header header" + "pageheader pageheader" + "content content" + "footer footer" + `, + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) 1%`, + + gridTemplateAreas: ` + "header header header header" + "pageheader pageheader pageheader pageheader" + ". menu content ." + "footer footer footer footer" + `, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `minmax(1%, auto) ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth})) minmax(1%, auto)`, + }, + }, +}); diff --git a/packages/apps/docs/src/components/Layout/Redocly/styles.ts b/packages/apps/docs/src/components/Layout/Redocly/styles.ts deleted file mode 100644 index 18f0eece66..0000000000 --- a/packages/apps/docs/src/components/Layout/Redocly/styles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { styled, StyledComponent } from '@kadena/react-components'; - -import { BasePageGrid } from '../components/styles'; - -export const PageGrid: StyledComponent = styled( - BasePageGrid, - { - gridTemplateColumns: 'auto auto', - gridTemplateAreas: ` - "header header" - "pageheader pageheader" - "content content" - "footer footer" - `, - - '@md': { - gridTemplateColumns: - '1% $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth)) 1%', - - gridTemplateAreas: ` - "header header header header" - "pageheader pageheader pageheader pageheader" - ". menu content ." - "footer footer footer footer" - `, - }, - '@2xl': { - gridTemplateColumns: - 'minmax(1%, auto) $leftSideWidth minmax(auto, calc($pageWidth - $leftSideWidth)) minmax(1%, auto)', - }, - }, -); diff --git a/packages/apps/docs/src/components/Layout/basestyles.css.ts b/packages/apps/docs/src/components/Layout/basestyles.css.ts index 7c545a6071..b1ed7dd0ac 100644 --- a/packages/apps/docs/src/components/Layout/basestyles.css.ts +++ b/packages/apps/docs/src/components/Layout/basestyles.css.ts @@ -1,8 +1,12 @@ import { breakpoints, sprinkles } from '@kadena/react-ui/theme'; -import { $$backgroundOverlayColor } from './global.css'; +import { + $$backgroundOverlayColor, + $$leftSideWidth, + $$pageWidth, +} from './global.css'; -import { style } from '@vanilla-extract/css'; +import { createVar, style } from '@vanilla-extract/css'; export const basebackgroundClass = style([ sprinkles({ @@ -33,3 +37,49 @@ export const basebackgroundClass = style([ }, }, ]); + +export const $$asideMenuWidthCode = createVar(); +export const $$asideMenuWidthMDDefault = createVar(); +export const $$asideMenuWidthLGDefault = createVar(); + +export const baseGridClass = style([ + sprinkles({ + display: 'grid', + position: 'relative', + marginY: 0, + marginX: 'auto', + }), + { + vars: { + [$$asideMenuWidthMDDefault]: '200px', + [$$asideMenuWidthLGDefault]: '300px', + [$$asideMenuWidthCode]: '400px', + }, + + gridTemplateRows: '0 auto 1fr auto', + gridTemplateColumns: 'auto auto', + gridTemplateAreas: ` + "header header" + "pageheader pageheader" + "content content" + "footer footer" + `, + + minHeight: '100vh', + + '@media': { + [`screen and ${breakpoints.md}`]: { + gridTemplateColumns: `1% ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthMDDefault})) ${$$asideMenuWidthMDDefault} 1%`, + gridTemplateAreas: ` + "header header header header header" + "pageheader pageheader pageheader pageheader pageheader" + ". menu content aside ." + "footer footer footer footer footer" + `, + }, + [`screen and ${breakpoints.xxl}`]: { + gridTemplateColumns: `auto ${$$leftSideWidth} minmax(auto, calc(${$$pageWidth} - ${$$leftSideWidth} - ${$$asideMenuWidthLGDefault})) ${$$asideMenuWidthLGDefault} auto`, + }, + }, + }, +]); diff --git a/packages/apps/docs/src/components/Layout/components/Header/AsideToggle.tsx b/packages/apps/docs/src/components/Layout/components/Header/AsideToggle.tsx deleted file mode 100644 index 198eb880cf..0000000000 --- a/packages/apps/docs/src/components/Layout/components/Header/AsideToggle.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { SystemIcons } from '@kadena/react-components'; - -import { HamburgerButton } from './styles'; - -import React, { FC } from 'react'; - -interface IProps { - toggleAside: () => void; - isAsideOpen: boolean; -} - -export const AsideToggle: FC = ({ toggleAside, isAsideOpen }) => { - return ( - - ); -}; diff --git a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx index c61396d566..4d6bb9f812 100644 --- a/packages/apps/docs/src/components/Layout/components/Header/Header.tsx +++ b/packages/apps/docs/src/components/Layout/components/Header/Header.tsx @@ -12,7 +12,6 @@ import { } from '../styles'; import { DocsLogo } from '..'; -import { AsideToggle } from './AsideToggle'; import { HamburgerMenuToggle } from './HamburgerMenuToggle'; import { NavItemActiveBackground } from './NavItemActiveBackground'; import { SearchButton } from './SearchButton'; @@ -27,7 +26,6 @@ import { useHeaderAnimation } from './useHeaderAnimation'; import { useMenu } from '@/hooks'; import { IMenuItem, LayoutType } from '@/types/Layout'; -import { isOneOfLayoutType } from '@/utils'; import Link from 'next/link'; import React, { FC } from 'react'; @@ -38,7 +36,7 @@ interface IProps { export const Header: FC = ({ menuItems, layout = 'full' }) => { const { hasPath, listRef, backgroundRef } = useHeaderAnimation(); - const { toggleMenu, isMenuOpen, toggleAside, isAsideOpen } = useMenu(); + const { toggleMenu, isMenuOpen } = useMenu(); return ( @@ -91,9 +89,6 @@ export const Header: FC = ({ menuItems, layout = 'full' }) => { toggleMenu={toggleMenu} isMenuOpen={isMenuOpen} /> - {isOneOfLayoutType(layout, 'code') && ( - - )} diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/a-first-look-on-integrating-with-rosetta-2020-06-17.md b/packages/apps/docs/src/pages/docs/blogchain/2020/a-first-look-on-integrating-with-rosetta-2020-06-17.md new file mode 100644 index 0000000000..9ce64b21b3 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/a-first-look-on-integrating-with-rosetta-2020-06-17.md @@ -0,0 +1,153 @@ +--- +title: A First Look on Integrating With Rosetta, Launched by Coinbase +description: + Kadena is a live, full-service smart contract platform and the world’s first + scalable, sharded, layer-1 Proof of Work public blockchain. Here at Kadena, + we’ve finished the initial cut of our integration with Rosetta, a new + open-source technical framework that has just been launched by Coinbase. As + one of the first projects to work on Rosetta, we’re taking this opportunity to + share what we learned from the experience. +menu: A First Look on Integrating With Rosetta, Launched by Coinbase +label: A First Look on Integrating With Rosetta, Launched by Coinbase +publishDate: 2020-06-17 +author: Linda Ortega +layout: blog +--- + +![](/assets/blog/2020/1_b97oiC8M_ePx83B-PW0Cfg.webp) + +# A First Look on Integrating With Rosetta, Launched by Coinbase + +_Kadena is a live, full-service smart contract platform and the world’s first +scalable, sharded, layer-1 Proof of Work public blockchain._ + +Here at Kadena, we’ve finished the initial cut of our integration with Rosetta, +a new open-source technical framework that has just been launched by Coinbase. +As one of the first projects to work on [Rosetta](https://www.rosetta-api.org), +we’re taking this opportunity to share what we learned from the experience. The +Rosetta project is quite new, and our team wanted to leave some bread crumbs for +those who may follow us in looking to make a similar integration happen with one +of the world’s most popular and respected exchanges. You can find Kadena’s +Haskell-based implementation of Rosetta +[here](https://github.com/kadena-io/rosetta). + +Rosetta is a standardized API for interacting with financial data on +blockchains. The goal of Rosetta is to allow blockchain projects to complete the +lion’s share of the integration work necessary to connect to an exchange, +allowing a smoother exchange listing process for both issuers and exchanges. + +Similar to the way that the +[Stratum Mining Protocol](https://en.bitcoin.it/wiki/Stratum_mining_protocol) +allowed for standardization of pooled mining, Rosetta is aimed at creating a +common set of well-understood calls and responses from blockchain nodes that can +be used by anyone adhering to the API standard. + +## Choose Your Own Integration Adventure + +One of the most appealing facets of how Coinbase has developed Rosetta is that +we could choose our own path for figuring out how to satisfy the spec. Kadena’s +software for the Chainweb protocol is written in Haskell, and we decided that +rather than make a new and separate package for Rosetta, we would expand our +existing node package +([Chainweb Node](https://github.com/kadena-io/chainweb-node)) to fully support +Rosetta. This way, an exchange that expects information from our blockchain in +the shape of Rosetta calls can run a regular Chainweb full node and know they +will receive data to spec. In the future, Rosetta may graduate to being a +separate process from the node, but for now, this approach simplifies deployment +tremendously. + +The [Rosetta spec](https://djr6hkgq2tjcs.cloudfront.net/docs/Introduction.html) +has a rigid, standardized JSON structure as part of its API definitions, so +using a strongly-typed language like Haskell made it simple for us to natively +represent the data and ensure that we would always return the correct format of +payload. + +## Lost in Translation + +One of the more challenging opportunities we faced with Rosetta was the +interpretation of the documentation, rather than implementation. Because Rosetta +is aimed at being blockchain-agnostic, we often had to translate between varying +styles of terminology, which either didn’t seem to apply to Kadena or used +different labels than we expected. + +Kadena uses an account-based model for tracking tokens rather than a UTXO-based +model like Bitcoin. Also, unlike Ethereum for example, Kadena has abstraction +between the name of an account and the keys associated with an account. +Functionally, this feature allows users on Kadena to protect their accounts with +what we call “guards.” Guards can be everything from a function to a “keyset” (a +list of multiple keys) or even a single key. Guards can represent multiple +signatures required, or may have time expirations and conditions. For more +information on Kadena’s guard system, see +[this article](https://medium.com/kadena-io/beginners-guide-to-kadena-accounts-keysets-fb7f32104291). + +Naturally, Rosetta doesn’t have specific provisions in the spec for Kadena’s +account-keyset-guard paradigm, so sometimes we had to get creative in turning +the words in the documentation into what we thought the intent was before +determining how we would integrate with Rosetta given our unique architecture. + +For example, Rosetta uses the +[AccountIdentifier](https://djr6hkgq2tjcs.cloudfront.net/docs/models/AccountIdentifier.html) +model in order to associate the account of a user on an exchange to the +equivalent account on the blockchain. It has three properties, “address”, +“sub_account”, and “metadata.” + +![](/assets/blog/2020/0_tl-c2db-uvN8MOXf.png) + +For Kadena, “address” is a username, which we call an account name. The +instructions for “metadata” therefore suggest that, since we’re using a username +model, we would provide in metadata an Object blob that contains all public keys +associated with the address field. (Note that the spec presumes that the address +“owns” a public key, but Kadena doesn’t have a paradigm in which an address has +exclusive control of a key. For Kadena, a user can sign many different accounts +with the same key, keysets, key guards, etc.) + +This “metadata” field caused us a bit of a conundrum. Not only is it possible to +have multiple keysets associated with an address and many addresses associated +with the same keysets, but under the “guard” paradigm, you can also have +multiple different time locks or other functions protecting an account. + +In the end, we solved this issue in the most verbose way possible — in the +AccountIdentifier metadata object, we return a blob of all keysets and guards +associated with the account and assume that the requestor knows enough about the +Kadena guard paradigm to know what they’re getting. + +## Exposing Hidden Operations + +The heaviest lifting we had to do in implementing Rosetta was fleshing out the +Block request. The expectation with the +[Block request](https://djr6hkgq2tjcs.cloudfront.net/docs/BlockApi.html) is that +it will return every single balance-changing operation in a block. At first +glance that expectation seems trivial, but for a blockchain transaction, the +number of balance-changing operations start to explode quite quickly. + +Consider a smart contract in which you want to execute a simple operation, like +adding the numbers 1 and 2. There is only one transaction here: the smart +contract containing “(+ 1 2)”. No transfer of tokens occurs, but because of gas +fees, the response to the Block request gets represented as three separate +operations: 1) The sender’s account is debited tokens to execute the +transaction, 2) The miner is credited the gas fee, and 3) The sender is credited +for any unused gas fee since gas is estimated on the front end and reconciled on +the back end of every transaction. + +Now imagine the complexity involved in a “transfer-create” transaction, in which +the sender is creating a new account and transferring funds to that new account +all in one transaction — the level of complexity is quite high. The interface +also needs to account for not only the operations made using the pre-made smart +contracts included in Kadena’s Coin Contract, but also any arbitrary smart +contracts written by users with the Pact smart contract language. + +## One Key for Many Doors + +For our team, implementing Rosetta was a useful way to examine our existing data +endpoints from the perspective of an exchange — the Rosetta spec is a proxy for +knowing what exchanges care about when they ask for data from a blockchain. We +discovered that data that we had thought would be useful wasn’t being requested +at all and saw that we were limited in several areas that we hadn’t anticipated. +Implementing Rosetta felt like a health check for our API, and our Chainweb Node +endpoints definitely came out tighter with the work completed. + +It will be interesting to see which other projects and exchanges adopt Rosetta +over time, how their experiences mirror and differ from ours, and how the spec +will evolve. As an industry, we’ve generally placed a premium on innovation and +divergence, but Rosetta seems like an opportunity for all of us to benefit from +some standardization that may result in greater adoption. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/announcing-kadena-technical-grants.2020-11-25.md b/packages/apps/docs/src/pages/docs/blogchain/2020/announcing-kadena-technical-grants.2020-11-25.md new file mode 100644 index 0000000000..c9d74d00bf --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/announcing-kadena-technical-grants.2020-11-25.md @@ -0,0 +1,89 @@ +--- +title: Announcing Kadena Technical Grants +description: + Kadena has launched Technical Grants, a structured model designed to reward + blockchain developers for contributing their talent to the world’s fastest + layer-1 PoW network. +menu: Announcing Kadena Technical Grants +label: Announcing Kadena Technical Grants +publishDate: 2020-11-25 +author: Taylor Rolfe +layout: blog +--- + +![](/assets/blog/2020/1_h-gQ8SjBId21Xhp8IZebMQ.webp) + +# Announcing Kadena Technical Grants + +Kadena has launched Technical Grants, a structured model designed to reward +blockchain developers for contributing their talent to the world’s fastest +layer-1 PoW network. + +## Empowered Innovation + +The goal of Technical Grants is to accelerate the growth of the Kadena ecosystem +by funding software development that provides novel use cases and user-friendly +tooling. + +It takes a thriving and diverse community to deliver the pipeline of solutions +necessary to realize the full potential of this emerging digital economy. We +believe Kadena’s hybrid blockchain provides the best framework. If you share +this vision, we encourage you to apply for grant funding. + +### [GO TO KADENA TECHNICAL GRANTS](https://github.com/kadena-io/technical-grants) + +## Grant Opportunities + +Kadena welcomes all high-quality, open-source applications. While we are +receptive to many ideas for funding, priority is given to teams who pursue +grants that fall within a defined focus area. + +The Technical Grants are focused on funding software development in key +categories: + +- DeFi + +- Blockchain interoperability + +- Developer tools + +- Analytics services + +- Wallet development + +- dApps / smart contracts + +Visit our [grants page](https://github.com/kadena-io/technical-grants) for a +current list of Prompted Grants. + +## Apply & Deliver + +Kadena’s Technical Grant process is divided into 2 phases; Grant Application and +Grant Delivery. Here is a high-level summary of the process: + +**Grant Application** + +1. Determine focus area + +2. Submit application + +3. Review and decision + +4. Mutual agreement + +**Grant Delivery** + +5. Milestone progress reporting + +6. Completion and reward distribution + +Read the information at +[https://github.com/kadena-io/technical-grants](https://github.com/kadena-io/technical-grants) +for a complete description of application guidelines and process details. + +## Get Rewarded in KDA + +Kadena is pleased to invest in its community, where ideas are celebrated and +results are rewarded. Connect with the team and community on +[Discord](https://discord.io/kadena) to ask questions, explore resources, and +find collaborators. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/beginners-guide-to-kadena-accounts-keysets-2020-01-14.md b/packages/apps/docs/src/pages/docs/blogchain/2020/beginners-guide-to-kadena-accounts-keysets-2020-01-14.md new file mode 100644 index 0000000000..d1f2159119 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/beginners-guide-to-kadena-accounts-keysets-2020-01-14.md @@ -0,0 +1,257 @@ +--- +title: Beginner’s Guide to Kadena Accounts + Keysets +description: + When getting started with the Kadena public blockchain, the first thing you’ll + want to do is create an account so you can start transacting with other users. + This article will break down exactly what keys are, what an account is, the + myriad ways to create one, and how to add your account to several existing + tools. +menu: Beginner’s Guide to Kadena Accounts + Keysets +label: Beginner’s Guide to Kadena Accounts + Keysets +publishDate: 2020-01-14 +author: Emily Pillmore +layout: blog +--- + +![](/assets/blog/2020/1_JfE77s3CWXoDbh4o9F2-gA.webp) + +# Beginner’s Guide to Kadena Accounts + Keysets + +## Beginner’s Guide to Kadena: Accounts + Keysets + +When getting started with the +[Kadena public blockchain](https://www.kadena.io/kadena), the first thing you’ll +want to do is create an account so you can start transacting with other users. +This article will break down exactly what keys are, what an account is, the +myriad ways to create one, and how to add your account to several existing +tools. First, we’ll do an extremely high-level tour of public-key cryptography. + +## What Are Keys? + +Keys are everywhere in blockchain land. You might at least be aware that to +begin transacting in any network, you have to generate a public/private +_key-pair._ Using this pair of keys, you generally share the public one and keep +the private one secret, using the private key exclusively for signing +transactions. If this is foreign to you, I suggest you take a look at this +lovely +[StackOverflow summary](https://stackoverflow.com/questions/454048/what-is-the-difference-between-encrypting-and-signing-in-asymmetric-encryption) +of the metaphor. A key-pair is +[easy to generate](https://kadena-community.github.io/kadena-transfer-js/), and +looks a little like this: + +```shell +public: 4bf1a0b622650367effca85dd6da35a937bc75fdbbdba04ff7d9338262135e98 +secret: 0e809ea42eccb4a90caebeef015dd9ef71a8d1cdfcfabfecb446320dd3bfe7d2 +``` + +Now, the fun part about public/private key-pairs is that a key-pair has the +property that the secret key can “prove” you are the owner of the public key +through a sophisticated dance (the underlying algorithm), and also has the +incredible property that any given key-pair is almost universally guaranteed to +be unique. No one will ever be able to produce an exact copy of either key by +any reasonable means other than theft. I say “almost,” because there’s still a +[probabilistically minute chance](https://security.stackexchange.com/questions/2943/what-are-the-chances-to-generate-the-same-ssh-key) +that someone may end up generating the same key-pair as you, but the time it +would take for that to happen is several trillion years from now, sometime +around the +[Heat Death of the Universe](https://en.wikipedia.org/wiki/Heat_death_of_the_universe) +— roughly the same probability as your computer spontaneously catching fire +during the generation process. + +In many blockchains, because of the global uniqueness of key-pairs, accounts are +modeled as simply public/private key-pairs or a variation on the theme with +additional data like a nonce. This is great and makes things simple, but it runs +into problems very quickly from a philosophical standpoint. Consider the +following question: what do key-pairs represent? Is it an individual? A couple? +A throuple? A polycule? A board of directors? If it’s more than one person, what +governs usage policy? Certainly, if a married couple decides to open up a joint +bank account, it’d be terrible if one could drain the account and leave the +other penniless and without recourse. Indeed, joint accounts require +multiple-signature signing to release funds. In the same vein, a board of +directors would vote, and a majority of votes would determine what to do with +the funds of a company. Let’s call this idea _governance predicate_. + +The metaphor works fantastically well for single-person, single-key-pair +accounts, but breaks down in blockchains like Ethereum when a many-to-many +relationship and finer-grained multiple-signature governance is needed. Much of +the Ethereum ecosystem, for instance, is geared towards finding clever ways to +shove the many-to-many idea into a many-to-one box, which ends up being costlier +than it needs to be, and frankly, begs a better design. Oddly enough, Bitcoin +handles multi-signature accounts just fine. + +This brings us to the notion of Keysets in Kadena. + +## What Is a Keyset? + +Kadena natively supports multiple keys governing the same account (multi-sig), +so +[keysets](https://pact-language.readthedocs.io/en/stable/pact-reference.html#keysets-and-authorization) +are, to some degree, exactly what they sound like: a set of keys. In addition to +a set of keys, every keyset contains something called a ‘predicate function’ +that determines which keys are allowed to make choices for the account when it +comes to transactions (do all keys need to be present? only one? two? etc.). +Summarily, keysets look like the following as JSON data: + +```shell + { + "keys": ["pubkey1", "pubkey2",...,"pubkeyN"], + "pred": "some governance function" + } +``` + +When signing a transaction, the list of private keys supplied as signing key +pairs will be checked against the keyset and predicate to ensure that not only +are all keys that need to be present accounted for but that the predicate is +satisfied. + +**Predicate Functions** + +There are 3 out-of-the-box predicate functions that are available: + +- `keys-all`: This predicate will require that all key pairs governing the + account are in scope when signing a transaction. + +- `keys-any`: This predicate requires that at least one key pair governing the + account is in scope when signing a transaction. + +- `keys-2`: This predicate requires that at least two key pairs governing the + account are in scope when signing a transaction. + +Smart contract authors are free to write their own predicate functions if they +need more fine-grained functionality, but that is beyond the scope of this +article. Feel free to read up more on predicates in the Pact +[readthedocs](https://pact-language.readthedocs.io/en/stable/pact-reference.html#keysets-and-authorization). + +**When Are Two Keysets the Same?** + +Two keysets are the same when all of their keysets match, and they have the same +predicate function guarding the keys. This means that if you have an account +defined in the coin contract as the following data: + +```shell + key: "Emily" -> value: { 0.0, { ["fcca3bc5..."], "keys-all" }} +``` + +And someone attempts to transfer-create (see: +[getting started with transfers](https://medium.com/kadena-io/kadena-public-blockchain-getting-started-with-transfers-153bf87d6824)) +to your account (which checks the keyset against the one supplied by the sender) +with the following data: + +```shell + (transfer-create 1.0 "Emily" { ["fcca3bc5..."], "keys-any" }) +``` + +Then this will fail because the keyset governing the account is wrong, and the +blockchain will see the transaction as someone using the wrong keys to try and +access an account. If you imagine a board of directors sitting around and all of +them have to be present to make a vote, but some bozo comes in trying to say +only 1 of them needs to be there and the rest can go home, that person would be +laughed out of the room! The same goes for keysets. Make sure the keys match +**exactly**. + +## What Is an Account? + +[Kadena](https://www.kadena.io/) is unique in the fact that there is no global +notion of what an account is. Even the +[KDA token](https://minerstat.com/coin/KDA) exists as a smart contract in the +network! It turns out that in the Kadena blockchain, every smart contract can +define their own tables and interact with them in a robust way, defining their +own data structures, called +[\*schema](https://pact-language.readthedocs.io/en/stable/pact-reference.html#defschema). +These schemas\* are used inside the contract to define the table structure, and +therefore the way the contract will store data. It just so happens that this is +exactly what the KDA coin contract does — it defines a table called coin-table +along with a schema called `coin-schema` , which defines the general model for +interacting with tokens. The schema is rather simple — row keys are account +names, and the data it points to are a balance and a set of keys governing the +account. Visually, it looks like this: + +```shell + key: Account Name -> value: { Balance, Keyset } +``` + +In practice, many people are used to the model that blockchains like Ethereum or +Bitcoin use, where public keys are considered an “address,” and there is an +associated balance. This is very similar to what Kadena has. In fact, if you +make your account name your public key, then it looks roughly the same: + +```shell + key: "f1f6f54914f33..." -> value: { 0.0, ["f1f6f54914f33..."] } +``` + +But if you really want to get fancy, then you can have a custom name as your +account name: + +```shell + key: "2Chainz" -> value: { 0.0, ["f1f6f54914f33..."] } +``` + +It doesn’t really matter — you just have to remember it! Practically, this is +why people just go with a public key as their account name — it’s right there in +the keys. As more sophisticated technology comes out supporting the Kadena +ecosystem, and as wallet technology gets better and better, tracking this sort +of thing will be taken care of automatically. + +## Creating Accounts + +Account creation happens in the blockchain in a few ways: + +- When mining to an account and a keyset, when you win a block, the reward will + create your account automatically using the keyset and account you specified. + By default, if you just submit your public key as the argument to your keyset, + then a singleton keyset will be constructed and your predicate will be set to + `keys-all`. + +- [`coin.create-account`](https://github.com/kadena-io/chainweb-node/blob/c9aaff7719b7a40d0deb900393379c6b8540e4bf/pact/coin-contract/v2/coin.pact#L228) + which allows someone to create a zero-balance new account (note that this + costs gas, which would have to be paid by a different account, which is + possible with Kadena). + +- Someone used + [`transfer-create`](https://medium.com/kadena-io/kadena-public-blockchain-getting-started-with-transfers-153bf87d6824) + or + [`transfer-crosschain`](https://medium.com/kadena-io/kadena-public-blockchain-getting-started-with-transfers-153bf87d6824) + to transfer coins to an account that did not exist (those functions + spontaneously create an account and deposit the transfer amount into it if the + account doesn’t exist). + +Just creating a public key pair is not the same as creating an account in the +blockchain, but it does guarantee that you have a unique account name. +Cryptographically, public keys are almost guaranteed to be uniquely generated, +so people often conflate the two. + +## Chainweaver Accounts + +Along with its blockchain, Kadena released a wallet for Mac, called +[Chainweaver](https://www.kadena.io/chainweaver), and this wallet allows you to +create accounts easily with the click of a button. We’ve done a full write-up of +how to create accounts, keys, and make use of the wallet’s numerous features +[here.](https://medium.com/kadena-io/do-anything-on-the-kadena-blockchain-with-a-single-tool-cf22986a81af) + +## **Conclusion** + +There you have it: this has been a tour of accounts! This is one of the more +fundamental aspects of interacting with the Kadena blockchain, and I’m glad you +took the time to read about it. We’ve made some great improvements to the way +people interact with blockchains, supporting native multi-sig and custom smart +contract table design, and we are happy to take on board any feedback you can +give. + +We also welcome help from the community for documenting these tools and +constructing new ones along the way. We are always happy to rep +community-blessed tools if they are better than our own. We welcome anyone to +contribute to the +[Kadena Community projects repository](https://github.com/kadena-community) with +your own project or add to existing ones. So far, the community projects have +yielded both a great terminal wallet with +[Bag of Holding](https://github.com/kadena-community/bag-of-holding), and a +[blazing fast GPU miner](https://github.com/kadena-community/bigolchungus) +courtesy of Alex Khonovalov, Edmund Noble, and myriad other insanely smart +community members. + +Thanks to everyone who contributed, and please feel free to raise your questions +to me in [Discord](https://discord.io/kadena) — my handle is one of @topos, +[@pitopos](https://twitter.com/pitopos), or +[@emilypi](https://github.com/emilypi) depending on where I am on the internet. +I’m perpetually glued to my screen, so I’ll usually answer if you find me. In +the event I’m sleeping, there may be a delay. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/do-anything-on-the-kadena-blockchain-with-a-single-tool-2020-02-21.md b/packages/apps/docs/src/pages/docs/blogchain/2020/do-anything-on-the-kadena-blockchain-with-a-single-tool-2020-02-21.md new file mode 100644 index 0000000000..10188083d5 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/do-anything-on-the-kadena-blockchain-with-a-single-tool-2020-02-21.md @@ -0,0 +1,147 @@ +--- +title: Do Anything on the Kadena Blockchain with a Single Tool +description: + Chainweaver is more than a crypto wallet, it is a full blockchain interface + providing its users with unmatched control over their network activity. +menu: Do Anything on the Kadena Blockchain with a Single Tool +label: Do Anything on the Kadena Blockchain with a Single Tool +publishDate: 2020-02-21 +author: Taylor Rolfe +layout: blog +--- + +![](/assets/blog/2020/1_DPaqrSYvWQpdKUexyUcgTw.webp) + +# Do Anything on the Kadena Blockchain with a Single Tool + +### Chainweaver is more than a crypto wallet, it is a full blockchain interface providing its users with unmatched control over their network activity. + +**February 21, 2020 **—Today, Kadena announced the release of Chainweaver, the +official cryptocurrency and smart contract wallet for the Kadena public +blockchain. This production release offers versions that can be run on MacOS, +Linux, and Windows (as a virtual appliance). + +[DOWNLOAD CHAINWEAVER](https://www.kadena.io/chainweaver) + +The open-source desktop application aims to drive adoption through improved user +experience. With that goal in mind, today’s release incorporates many +community-driven feature enhancements that were collected during an open beta +period. + +**While many blockchains require a suite of tools to perform various tasks, +Kadena’s Chainweaver is designed as a one-stop-shop for interacting with the +blockchain. Some of the powerful features offered by Chainweaver include unique +account configurations, custom transfer controls, a smart contract workbench, +and enhanced security standards.** + +## **Keys and Accounts** + +In the Kadena ecosystem, users have unique controls to configure accounts to +meet their specific requirements. For example, keys and accounts are +differentiated; keys sign transactions, and accounts may be governed by one or +multiple keys. This nuance accommodates many practical use cases that require +multiple signatures for an account. + +In the Keys screen, users can generate a key by clicking on the “+ Generate Key” +button. + +![](/assets/blog/2020/0_8hYOc8ju0R8OPc8f.png) + +In the Accounts screen, users can add an account by clicking on the “+ Add +Account” button. A user can either enter a name for an account that they want to +watch or a name for an account that they want to create. + +If the account already exists on the Kadena blockchain, the account will be +added to the dashboard and its balance will be displayed. + +If the account does not already exist on the Kadena blockchain, the user may +choose to create the account. In doing so, the user may name their account after +some public key (as is common in many other blockchains), or they may choose a +more memorable account name. Again, users may choose for their account to be +governed by one or multiple keys, and they may specify how many of their +account’s keys must be present to authorize a transaction. + +![](/assets/blog/2020/0_ODJdGqiCscwQODRm.png) + +## **Transfer Configurations** + +The send & receive functionality is available in the Accounts screen by clicking +on the “Send” or “Receive” buttons. + +![](/assets/blog/2020/0_Q-Fd5-wZL4Sg4VoS.png) + +When it comes to transferring assets of value, users have visible control in +executing operations. Before submitting any transfers, users may toggle a number +of transaction settings including gas price, transaction speed, and time to +live. + +![](/assets/blog/2020/0_EZcDpU5FDACgd87b.png) + +Kadena is a blockchain network comprised of +[multiple chains braided together](https://www.youtube.com/watch?v=hYvXxFbsN6I). +Chainweaver can perform cross-chain transfers, which it auto-detects when +someone selects a different chain for the receiving of coins. + +![](/assets/blog/2020/0_5MX44J7kCEENMVjd.png) + +## **Smart Contract Workbench** + +A distinguishing component of Chainweaver comes in its native smart contract +development environment. Users can write, test, and deploy contracts written in +Pact, Kadena’s domain-specific smart contract language. The live editor returns +error messages and supports Formal Verification. + +Utilize the Module Explorer to view or call any deployed contract. Evaluate +sample contracts to learn simple Pact commands. Supplement your learning with +documentation and videos found within the +[Pact developer tutorial series](https://pactlang.org/). + +![](/assets/blog/2020/0_hn1GJqWb3Eol0oAJ.png) + +Chainweaver also exposes a novel signing API, allowing users to easily interact +with dApps without having to first navigate through a dApp browser. + +![](/assets/blog/2020/0_ELVmXi7NYzjTxc9E.png) + +## **Enhanced Security Standards** + +User safety remains front-and-center while building a crypto custody tool like +Chainweaver. At every step, Chainweaver employs high-security standards to keep +users safe from attackers and even from themselves (i.e. inadvertent errors). + +During the wallet set up, users are required to record and verify a recovery +phrase derived from similar protocols used in Bitcoin. Key pairs are generated +in a deterministic way (i.e. HD wallet), aiding the recovery of multiple keys +from a master seed. + +![](/assets/blog/2020/0_-arUE20ABJc23du3.png) + +When performing sensitive operations, Chainweaver frequently displays feedback +to show the user state changes along the way. Before calling a function or +authorizing a sign request, Chainweaver returns raw commands to reveal the code +behind the operation. Furthermore, Chainweaver displays transaction previews so +that the user may view the anticipated transaction impact or any potential +errors before authorizing the operation. + +![](/assets/blog/2020/0_H8T8ghbQ66xH3Q9o.png) + +Once a transaction has been submitted, Chainweaver displays the transaction’s +status so that the user can see whether their transaction has been successfully +mined in a block. + +![](/assets/blog/2020/0_JMFvtK6HaHFfiAnP.png) + +If a user would like to first practice an operation in a risk-free environment, +they can easily toggle the active network to Testnet. More advanced users may +even configure their own networks by inputting the desired nodes’ addresses. + +![](/assets/blog/2020/0_3kQFU-u_qHldK0IT.png) + +Users can get free Testnet coins and play games using Chainweaver by going to +Kadena’s [Testnet Portal](http://testnet.chainweb.com/). + +Detailed support instructions and further descriptions of Chainweaver’s features +are available in the +[Chainweaver User Guide](https://kadena-io.github.io/kadena-docs/Chainweaver-Support/#installing-the-chainweaver-software). + +[DOWNLOAD CHAINWEAVER](https://www.kadena.io/chainweaver) diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/experience-hybrid-blockchain-2020-05-01.md b/packages/apps/docs/src/pages/docs/blogchain/2020/experience-hybrid-blockchain-2020-05-01.md new file mode 100644 index 0000000000..eee78f3c84 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/experience-hybrid-blockchain-2020-05-01.md @@ -0,0 +1,200 @@ +--- +title: Experience Hybrid Blockchain +description: + This article summarizes the concept of a hybrid blockchain, describes a simple + use case scenario, and then walks through the scenario with a demonstration. + Follow along at http://hybrid.chainweb.com/ to experience Kadena’s hybrid + blockchain yourself. +menu: Experience Hybrid Blockchain +label: Experience Hybrid Blockchain +publishDate: 2020-05-01 +author: TTaylor Rolfe +layout: blog +--- + +![](/assets/blog/2020/1_2BA8I4luclrVgk57_6Nb1Q.webp) + +# Experience Hybrid Blockchain + +## A Demo & Walkthrough + +This article summarizes the concept of a hybrid blockchain, describes a simple +use case scenario, and then walks through the scenario with a demonstration. +Follow along at [http://hybrid.chainweb.com/](http://hybrid.chainweb.com/) to +experience Kadena’s hybrid blockchain yourself. + +## How does a Hybrid Blockchain Work? + +A hybrid blockchain application allows public and private blockchain networks to +share data between them (“interoperate”) through smart contracts deployed on +each network, respectively. The smart contracts from both networks communicate +through a bridge. + +In practice, a hybrid blockchain transaction is composed of three parts. For +example: + +1. A user posts new data to a smart contract on Kadena’s public chain + +2. Once mined, this transaction is recognized by a piece of middleware that + acts as a bridge between the two networks + +3. The bridge calls the corresponding smart contract on the private chain to + execute a task + +- Data sharing can be bi-directional, starting on either the private or public + side and moving to the other. + +![](/assets/blog/2020/1_fXHXkuEYUiXhSPd8lIf-UA.webp) + +## Use Case: Hybrid Blockchain Enabling Real-time, Secure Transaction Settlement + +**Traditional banking (current state)** + +Transferring funds between bank accounts takes moments to approve but days to +settle in the United States, leaving the recipient unable to access pending +funds. Transaction settlement involves numerous intermediaries operating only +during traditional business hours. + +**Hybrid blockchain solution** + +In this example, using smart contracts in a hybrid application allows customers +to convert crypto assets on the public network into a stablecoin, which can move +between public and private blockchain networks. On the public side, participants +experience the usual ~1 minute transaction settlement on the Kadena +Proof-of-Work network, an easily-verifiable and secure payment system. On the +private side, participants benefit from instant transaction settlement and +reduced operational complexity. + +_Note: This is a simplified use case designed to illustrate how data moves +across a hybrid blockchain. To read more industry use cases and discover the +real-world benefits enabled by hybrid blockchain, +see[ Hybrid Blockchain 101](https://medium.com/kadena-io/hybrid-blockchain-101-714827d0e77b) +and the +[Smart Contract Sharing Economy](https://medium.com/kadena-io/blockchain-future-smart-contract-sharing-economy-134a318fef55)._ + +## Hybrid Demo & Walkthrough + +**Requirements** + +The demo requires that users install (1) Chainweaver and have a (2) Testnet +account with some funds: + +1. Download the crypto wallet [Chainweaver](https://www.kadena.io/chainweaver) + to generate a key pair. + +2. Visit the [Coin Faucet](https://faucet.testnet.chainweb.com/) and select + “Create Account” (creating an account this way automatically funds the + account with 10 KDA on Testnet). + +**Glossary** + +- “Kadena (KDA)” is the native cryptocurrency for the Kadena Public network. + +- “StablecoinX (SCX)” is a stablecoin which trades 1:1 with KDA on the public + network. + +- “SCX InstantPay” is the token used for instant transaction settlement on the + private network. + +**Walkthrough** + +Follow along with the full demo video, or by using the walkthrough instructions +below. + +[Experience Hybrid Blockchain](https://www.youtube.com/watch?v=ZXE8AjjGhSA) + +1. Visit [http://hybrid.chainweb.com/](http://hybrid.chainweb.com/) and enter + your account name + +2. With Chainweaver open, select “Buy SCX.” This will prompt a signing request + within Chainweaver. + +Sign the transaction by filling out the dialog screens: + +- “Configuration” tab: No action needed. Press “Next.” + +- “Sign” tab: Use the public key associated with your account to grant the `gas` + and `transfer` capabilities. Press “Next.” + +- “Preview” tab: In the Raw Response section, you should see `”Write succeeded.” + Press “Submit.” + +Then allow ~1 minute for the transaction to clear. Select “Refresh Balances” to +confirm success. + +3. Transfer SCX from the public network to get SCX InstantPay on the private + network + +Sign the transaction using Chainweaver (as before), allow ~1 minute for the +transaction to clear, then select “Refresh Balances” to confirm success. + +4. Transfer SCX InstantPay coins to any existing SCX InstantPay account + +Sign the transaction using the demo’s private network in Chainweaver. + +- “Configuration” tab: Private network transactions do not require any gas, so + you may ignore the gas configuration settings. Press “Next”. + +- “Sign” tab: The Grant Capabilities sub-section may be left blank. In the + Unrestricted Signing Keys sub-section, check the box beside the signing + account’s public key. Press “Next”. + +- “Preview” tab: In the Raw Response section, you should see ”Write succeeded” + (in some cases you might see “Couldn’t get a response from the node” but you + may still proceed). Press “Submit”. + +_Note: In order to execute transactions on the private network, you must first +change the active network within Chainweaver from “Testnet” to a custom network +consisting of the private network’s nodes._ + +_For the demonstration, let’s call this private network “Kuro.”_ + +_Here’s how to add a custom network to Chainweaver:_ + +- _In Chainweaver, select the Settings option from the left-side menu, then + select Network_ + +- _Within the Edit Networks section, enter the new network name “Kuro,” then + press “Create”_ + +- _In the network list, find this new network and press the arrow button to + expand the network’s node list. Add 4 nodes to the network: + 34.204.71.247:9002, 54.166.153.21:9000, 54.146.43.204:9001, 54.164.36.85:9003_ + +- _Finish by selecting “Ok” to close the Network Settings dialog screen_ + +5. Transfer SCX InstantPay coins on the private network back into SCX coins on + the public network + +Sign the transaction using the demo’s private network in Chainweaver. Your SCX +InstantPay balance will immediately go down, and your SCX balance will go up in +~1 minute once the transaction is mined in a block. + +6. Sell SCX to return funds back into KDA + +Toggle the active network within Chainweaver back to “Testnet.” + +Sign the transaction using Chainweaver, then allow ~1 minute for the transaction +to clear. Select “Refresh Balances” to confirm success. + +**Demo Documentation** + +To take a closer look at the technical implementation of this Hybrid Demo, you +can view the open-source GitHub repository +[here](https://github.com/fmelp/hybrid-dapp), the public chain hybrid exchange +smart contract +[here](https://github.com/fmelp/hybrid-dapp/blob/master/pact/chainweb/hybrid-exchange.pact), +and the private chain token smart contract +[here](https://github.com/fmelp/hybrid-dapp/blob/master/pact/kuro/hybrid-token.pact). + +## Closing Thoughts + +A hybrid blockchain application takes advantage of both the efficiency and +availability of a public network, and the security and fast finality of a +private network. With hybrid apps, we can start to create secure digital +marketplaces, and businesses can launch safe, private blockchain-based solutions +that also have the ease of access and scalability of a massively-parallel +Proof-of-Work blockchain. This new landscape allows for unprecedented levels of +business cooperation through safe and verified data sharing across private and +public networks. Only hybrid blockchain can capture both the decentralization of +public networks and the security controls of private networks. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/high-gas-prices-peril-or-promise-for-defi-2020-09-02.md b/packages/apps/docs/src/pages/docs/blogchain/2020/high-gas-prices-peril-or-promise-for-defi-2020-09-02.md new file mode 100644 index 0000000000..5bfaf9f524 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/high-gas-prices-peril-or-promise-for-defi-2020-09-02.md @@ -0,0 +1,110 @@ +--- +title: High gas prices peril or promise for DeFi? +description: + On September 1, Ethereum set a new record for high gas prices, with a single + DeFi transaction costing over $10 in fees. High fees are the result of + congestion, as users pay ever higher fees to ensure their transaction gets + into a block. Gas on Ethereum can be seen as “block space rent” and many are + saying the rent is too damn high. +menu: High gas prices peril or promise for DeFi? +label: High gas prices peril or promise for DeFi? +publishDate: 2020-09-02 +author: Stuart Popejoy +layout: blog +--- + +![](/assets/blog/2020/1_fynn5el1Ya3Q6F-TbBTFGg.webp) + +# High gas prices: peril or promise for DeFi? + +_As DeFi takes off, the price of gas on Ethereum threatens its future. Or does +it?_ + +On September 1, +[Ethereum set a new record for high gas prices](https://www.coindesk.com/ethereum-fees-record-highs-defi-expensive-tether), +with a single DeFi transaction costing over $10 in fees. High fees are the +result of congestion, as users pay ever higher fees to ensure their transaction +gets into a block. Gas on Ethereum can be seen as “block space rent” and many +are saying the rent is too damn high. + +That depends on who you ask, though. Even a $10 fee is a small fraction of many +DeFi trades, as speculators are by definition those who have “money to burn.” +For the moment at least, DeFi is a market that exists on Ethereum. If you have +profitable trades to make on DeFi, then gas is simply another cost of doing +business, since there is no other way to make the trade. + +This is why high gas prices don’t cause Ethereum leaders and boosters to lose +sleep: the very fact of high gas prices only serves to amplify the message that +Ethereum is the only game in town. It’s certainly true for DeFi today, but it +can also translate to the perception of Ethereum as the only platform for smart +contracts. Why go anywhere else when gas prices prove that the party is at +Vitalik’s house? + +Gas prices go up as Ethereum gets more congested, and while the current rate is +eye-poppingly high, congestion on Ethereum is nothing new. In late 2017, +CryptoKitties was a collectibles game new to Ethereum that exploded in +popularity and instantly caused the entire network to slow to a crawl. +Non-CryptoKitties transactions such as +[entire ICOs](https://www.coindesk.com/ethereums-cryptokitties-blockchain-deluge-sparks-ico-delay) +went from minutes to hours and even* days* for completion. + +For dApp developers and projects this was, and still is, extremely worrisome. If +gas prices are block rent, _immediacy _— the ability to transact in some +predictable amount of time — is an arbitrary popularity contest. If you are the +developer of an application that provides a time-sensitive service to a minority +of Ethereum users, you can find yourself waiting behind a deluge of transactions +to serve the latest craze, simply because it is attracting more users than your +app. It doesn’t matter that those users represent an entirely different market: +your app will still lose based on numbers alone. + +This is compounded by the fact that not all applications are designed to net +their users hundreds or thousands of dollars with every transaction, like the +transactions of your average DeFi speculator. For a non-DeFi application, high +gas prices exact an arbitrary drain on their ability to deliver value. Like high +rents on commercial real estate, it can drive these efforts “out of business” if +the mere cost of executing a transaction exceeds whatever revenue could ever be +made in that transaction. High gas prices make blockchain a “playground of the +wealthy.” + +While Ethereum’s high gas prices seem to only cement Ethereum’s network value, +it also inescapably damages Ethereum’s utility as a smart contract platform for +delivering decentralized and world-changing applications to the larger +population. Instead, expensive gas fees serve to limit the market to rich +speculators. This is not to disparage DeFi, as decentralized finance itself +opens up markets to non-traditional participants. That said, the promise of +smart contracts on a decentralized platform goes well beyond financial +engineering. + +Also, it is worth noting that major DeFi participants are actively planning +moves onto other platforms, with USDT (Tether) just announcing another +alternative platform partner. So while Ethereum is the main game in town, many +projects are seeing the writing on the wall that something has to change as +Ethereum is clearly bursting at its seams. Why now? If this problem dates back +to CryptoKitties, where any application is at the mercy of the most popular dApp +destroying the network’s ability to function properly, what has changed? + +For a long time, Ethereum has been pointing to a future where the blockchain +changes to Proof of Stake. In the last few years, the focus has been on Ethereum +2.0, which intends to deliver a sharded solution to solve congestion problems. +The combination of Proof of Stake and sharding sounds perfect, and has served to +reassure Ethereum projects that the current congestion problems and high gas +prices will soon be a thing of the past. + +The problem is that Ethereum has proven themselves incapable of shipping +promised improvements on any kind of reliable schedule, with a production +Ethereum 2.0 sharded network always staying 1 or 2 years away. 2020 has been the +year that faith in Ethereum 2.0 finally cracked, creating opportunities for +alternative platforms that can actually deliver a scalable solution. Now, +leading projects are actively working with blockchain platforms like Cosmos, +Polkadot and Kadena to build “exit ramps” off Ethereum, even as DeFi hits new +highs. + +For DeFi, the future looks bright. Even as high gas prices lead to questions +about the promise of blockchain, DeFi is forcing the ecosystem to consider new +participants who can deliver where Ethereum 2.0 has failed. There are scalable +blockchain platforms today that offer solutions where high traffic doesn’t mean +high gas prices, where an application that is popular with one set of users +doesn’t threaten the viability of another that is delivering critical services +to a minority. We are at the start of a major transition in smart contract +blockchains. What lies ahead is a future where blockchain technology moves +beyond speculation to solve real problems. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2020/index.tsx new file mode 100644 index 0000000000..eb29f81b8a --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/index.tsx @@ -0,0 +1,38 @@ +import { Heading, Stack } from '@kadena/react-ui'; + +import { + checkSubTreeForActive, + getPathName, +} from '@/utils/staticGeneration/checkSubTreeForActive.mjs'; +import { GetStaticProps } from 'next'; +import React, { FC } from 'react'; + +const Home: FC = () => { + return ( + +
    + BlogChain 2020 +
    +     + ); +}; + +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + leftMenuTree: checkSubTreeForActive(getPathName(__filename)), + frontmatter: { + title: 'BlogChain 2020', + menu: '2020', + subTitle: '2020', + label: '2020', + order: 3, + description: 'articles..articles...articles 2020', + layout: 'landing', + icon: 'BlogChain', + }, + }, + }; +}; + +export default Home; diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-building-defi-bridge-to-celo-and-joining-alliance-for-prosperity-also-announcing-bounty-2020-12-15.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-building-defi-bridge-to-celo-and-joining-alliance-for-prosperity-also-announcing-bounty-2020-12-15.md new file mode 100644 index 0000000000..2a2e1048b6 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-building-defi-bridge-to-celo-and-joining-alliance-for-prosperity-also-announcing-bounty-2020-12-15.md @@ -0,0 +1,100 @@ +--- +title: + Kadena Building DeFi Bridge to Celo and Joining Alliance for Prosperity, also + Announcing Bounty Program for Kadenaswap DEX +description: + Kadena, the first blockchain technology company to come out of J.P. Morgan’s + Blockchain Center for Excellence, and Celo, an open platform that makes + financial tools accessible to anyone with a mobile phone, are announcing a + partnership. As part of the collaboration, Kadena is joining the Alliance for + Prosperity. The partnership will see both Celo’s cUSD stablecoin and Kadena’s + KDA token interoperate on both platforms via a trustless bridge relay, + increasing utilization for both tokens. +menu: + Kadena Building DeFi Bridge to Celo and Joining Alliance for Prosperity, also + Announcing Bounty Program for Kadenaswap DEX +label: + Kadena Building DeFi Bridge to Celo and Joining Alliance for Prosperity, also + Announcing Bounty Program for Kadenaswap DEX +publishDate: 2020-12-15 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_BWXDWnNDfpa6zTljd7rguQ.webp) + +# Kadena Building DeFi Bridge to Celo and Joining Alliance for Prosperity, also Announcing Bounty Program for Kadenaswap DEX + +_The partnership will allow Celo’s cUSD stablecoin and Kadena’s KDA token to +interoperate across both networks via a trustless bridge relay_ + +**New York, N.Y**. — **December 15, 2020** — Kadena, the first blockchain +technology company to come out of J.P. Morgan’s Blockchain Center for +Excellence, and Celo, an open platform that makes financial tools accessible to +anyone with a mobile phone, are announcing a partnership. As part of the +collaboration, Kadena is joining the Alliance for Prosperity. The partnership +will see both Celo’s cUSD stablecoin and Kadena’s KDA token interoperate on both +platforms via a trustless bridge relay, increasing utilization for both tokens. +And, later this month, Kadena is launching a bounty program on mainnet for its +upcoming DEX called Kadenaswap. + +The Celo Foundation and Kadena are teaming up to provide better market access to +token holders. This development with Celo builds upon Kadena’s recent +partnership with Terra to add the LUNA stablecoin to Kadenswap, as well as +Kadena’s integrations with Cosmos and Polkadot. In addition to bringing more +markets to holders of cUSD, the bridge also paves the way for KDA to participate +in collateralization of the Celo stablecoin, which would benefit KDA token +holders. + +“We’re excited to be working with Celo and the Alliance for Prosperity,” said +Kadena Co-founder Stuart Popejoy. “Our affinity with Celo comes from sharing a +forward-looking approach towards cryptocurrency economies. Both projects support +tokens that solve for current deficiencies in the Ethereum-based market while +preserving security and decentralization. The Celo-Kadena bridge brings more +value to the DeFi market while, building upon the addition of LUNA to +Kadenaswap, also providing more ways for token holders to transact.” + +“The Celo Foundation is very excited by the long term potential of the +Celo-Kadena bridge and the increased collaboration between the two communities,” +said Celo Co-founder Marek Olszewski. “The cUSD stablecoin represents one of +just a few algorithmic and permissionless stablecoins available today and we’re +excited to see the asset bridged to Kadena and other networks where it can be +composed with a greater number of DeFi applications. As one of the few networks +with programmable Blake2s support (arriving in the Donut hardfork), we’re +thrilled that Celo will be able to natively verify the Kadena light client +protocol on chain, allowing the bridge to operate in a fully trustless manner.” + +As progress gets underway with the Celo partnership, the Kadenaswap +multi-protocol DEX moves forward. Kadenaswap will reach a major milestone later +this month with the “Bountyswap” release. With Bountyswap, participants are +incentivized to find bugs in Kadenaswap by fully-funded test pairs on mainnet, +with Kadena funding up to 100,000 KDA in each pair. If participants can hack the +network to “steal” KDA, they keep the proceeds. In contrast to a standard bug +bounty program, the honeypot structure allows for potentially larger rewards to +“white hat” hackers. Successful completion of the bounty program on mainnet is +an important step towards the full launch of cryptocurrency market pairs on +Kadenaswap on January 29, 2021. + +**About Kadena** + +Kadena provides the world’s fastest hybrid blockchain platform, consisting of +the only sharded and scalable layer-1 PoW public network, the Kuro permissioned +blockchain, and the Pact smart contract language. Kadena solves the scaling +challenges of Bitcoin and the security issues of Ethereum. Kadena’s founders +created J.P. Morgan’s first blockchain and worked at the U.S. Securities and +Exchange Commission. Kadena is live with partners including USCF (a $3 billion +fund) and leading DeFi projects. For more information, visit +[www.kadena.io](http://www.kadena.io/) or follow +[@kadena_io](http://twitter.com/kadena_io) on Twitter. + +**About Celo** + +Celo is an open blockchain platform that makes financial tools accessible to +anyone with a mobile phone. The novel proof of stake network enables +mobile-first access to DeFi and dapps. Celo’s ultralight client is over 700,000x +lighter than other networks and enables any smartphone, even with limited +internet connectivity, to quickly and easily sync with the network. Its open +source technology can be leveraged to build an ecosystem of powerful mobile +applications, ranging from easier cash transfer programs to peer-to-peer +lending, international remittances to digital assets and wallets. Visit celo.org +for more information and receive updates about Celo in your inbox news.celo.org. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-collaborates-with-chainlink-in-industrys-first-hybrid-blockchain-oracle-integration-2020-05-19.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-collaborates-with-chainlink-in-industrys-first-hybrid-blockchain-oracle-integration-2020-05-19.md new file mode 100644 index 0000000000..2efa49061d --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-collaborates-with-chainlink-in-industrys-first-hybrid-blockchain-oracle-integration-2020-05-19.md @@ -0,0 +1,142 @@ +--- +title: + Kadena Collaborates with Chainlink in Industry’s First Hybrid Blockchain + Oracle Integration +description: + Scalable layer-1 PoW public network, developed by former JP Morgan blockchain + team, will deploy Chainlink’s oracles for tamper-proof on-chain data feeds + Chainlink and Kadena are working together to integrate Chainlink’s + market-leading decentralized oracle network to Kadena’s scalable layer-1 Proof + of Work public blockchain. This will be an industry first in deploying oracles + to a public/private hybrid blockchain platform. +menu: + Kadena Collaborates with Chainlink in Industry’s First Hybrid Blockchain + Oracle Integration +label: + Kadena Collaborates with Chainlink in Industry’s First Hybrid Blockchain + Oracle Integration +publishDate: 2020-05-19 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_JGCxne8duh-sQwsqv43p6g.webp) + +# Kadena Collaborates with Chainlink in Industry’s First Hybrid Blockchain Oracle Integration + +_Scalable layer-1 PoW public network, developed by former JP Morgan blockchain +team, will deploy Chainlink’s oracles for tamper-proof on-chain data feeds_ + +Chainlink and Kadena are working together to integrate Chainlink’s +market-leading decentralized oracle network to Kadena’s scalable layer-1 Proof +of Work public blockchain. This will be an industry first in deploying oracles +to a public/private hybrid blockchain platform. Enterprises and entrepreneurs in +the Kadena ecosystem can utilize Chainlink oracles to create end-to-end Pact +smart contracts using Chainlink’s large collection of pre-made inputs and +outputs. Kadena developers can benefit from Chainlink’s high-quality data by +building [Price Reference Contracts](https://feeds.chain.link/) for market +prices and leveraging its external adapter technology for off-chain access to +credentialed APIs and legacy systems. Chainlink also provides strong security +and reliability guarantees via decentralization, wherein multiple independent +oracles and data sources can be aggregated together to protect against any +single point of failure or a sole arbiter of truth. + +Having completed its mainnet launch at the start of 2020, Kadena is eager to +make Chainlink oracles available to production-ready smart contracts. All +parties involved will feel a greater degree of security and reliability with +smart contract transactions that consume accurate, real-time data feeds. +Chainlink has extensive expertise in developing oracle solutions, as evident by +their ongoing work with technology leaders such as +[Google](https://cloud.google.com/blog/products/data-analytics/building-hybrid-blockchain-cloud-applications-with-ethereum-and-google-cloud), +[Oracle](https://www.forbes.com/sites/darrynpollock/2019/07/30/oracle-building-a-virtuous-cycle-of-innovation-with-start-ups-through-chainlink-and-blockchain/#34cfc294ffcc), +and +[Polkadot](https://polkadot.network/chainlink-reaches-milestone-with-polkadot/). +Kadena previously announced an +[agreement with Web3 Foundation](https://medium.com/kadena-io/kadena-to-explore-implementation-of-pact-for-polkadot-ecosystem-be2253d84a6c) +to examine how its Pact smart contract language can get implemented on Polkadot. +For blockchain technology to go mainstream, it is important that credible +projects commit to cooperating on interoperability between ecosystems. + +Kadena has already identified use cases where the live data accuracy of +Chainlink’s oracles will service key functionality for on-chain applications. +The initial implementation will likely be a KDA price oracle feed, available to +dApp developers and exchanges. When Kadena’s KDA token gets a major listing, +currently projected for the second or third quarter of this year, reliable +fiat-denominated price feeds for KDA will become important for enterprises +wanting to pay for gas in traditional currencies. Dependable and instantaneous +market data will also be a requirement for launching many decentralized and +traditional finance applications, such as with Kadena’s ongoing +[collaboration with $3 billion asset manager USCF](https://medium.com/kadena-io/uscf-collaborates-with-kadena-on-use-of-blockchain-in-the-investment-space-f8b16f7a38bb). +Furthermore, Kadena can provide a critical tool for addressing the COVID-19 +pandemic by using Chainlink oracles to validate coronavirus testing kits and +test results. Over time, Kadena and Chainlink look forward to sharing additional +information about the industry’s first integration of leading oracles with a +hybrid blockchain. + +“Terminals provide an essential service in asset management with real-time +market data. As USCF works with Kadena to identify opportunities to leverage +blockchain for investments, we see merit in having credible oracles provide +consolidated data feeds on-chain. Kadena’s latest news is another step forward +in showing the full value of hybrid blockchain,” said Nicholas Gerber, CEO of +Concierge, USCF’s parent company. + +Chainlink’s highly reliable network of independent and verified node operators +will perform decentralized computations to improve the accuracy of external data +before being committed to the blockchain. Kadena will leverage its scalability +and low gas fees to increase the frequency and accuracy of external data +available on the network, thus creating a cost-efficient and high-quality +platform for DeFi and other decentralized applications. + +![](/assets/blog/2020/0_vHk5WHLUQ_aE89VJ.png) + +“We’re excited to augment the value created through Kadena’s unique hybrid +blockchain by bringing secure and reliable data feeds on-chain via Chainlink +decentralized oracle networks. With this access to high-quality credential API +data via Chainlink oracles, the Kadena ecosystem can begin developing +next-generation smart contracts that depend on real-world data,” said Sergey +Nazarov, Chainlink Co-Founder. + +“When Sergey and I met to talk through the integration between Chainlink and +Kadena, we were both immediately excited about what we can accomplish together,” +said Stuart Popejoy, Kadena Co-Founder. “Kadena’s Pact smart contract language +is becoming the standard with its powerful features such as allowing for +multi-sig transactions and formal verification. Combined with the Kadena public +blockchain’s scalability, throughput, and low gas costs, we’re enabling +high-quality financial market data in a way previously unseen on crypto +platforms. Chainlink’s decentralized oracle network adds further security and +value to developing and executing smart contracts.” + +_To learn more about developing on Kadena’s blockchain, contact our team on +[Discord](https://discordapp.com/invite/bsUcWmX), visit +[GitHub](https://github.com/kadena-io), or subscribe +to[ our newsletter](http://eepurl.com/dk-Sbz). To learn more about developing on +Chainlink, contact their team on [Discord](http://discord.io/kadena) or visit +their [developer documentation](https://docs.chain.link)._ + +**About Chainlink** [Chainlink](https://chain.link/) is a decentralized oracle +network that enables smart contracts to securely access off-chain data feeds, +web APIs, and traditional bank payments. It is well known for providing highly +secure and reliable oracles to large enterprises +([Google](https://cloud.google.com/blog/products/data-analytics/building-hybrid-blockchain-cloud-applications-with-ethereum-and-google-cloud), +[Oracle](https://www.forbes.com/sites/darrynpollock/2019/07/30/oracle-building-a-virtuous-cycle-of-innovation-with-start-ups-through-chainlink-and-blockchain/#34cfc294ffcc), +and [SWIFT](https://create.smartcontract.com/sibos17)) and leading smart +contract development teams such as +[Polkadot/Substrate](https://medium.com/web3foundation/web3-foundation-and-chainlink-announce-collaboration-df55ed462a3a),[ Synthetix](https://blog.synthetix.io/synthetix-and-chainlink/), +[Loopring](https://medium.com/loopring-protocol/chainlink-and-loopring-collaborate-on-oracles-for-zkrollup-dex-protocol-c1c8094afc27),[ Aave](https://medium.com/aave/the-aave-oracle-network-powered-by-chainlink-is-now-live-45bb8a5a8c4e), +[OpenLaw](https://medium.com/@OpenLawOfficial/openlaw-teams-with-chainlink-to-bring-real-world-info-to-smart-contracts-4e7a3dac80a8),[ Conflux](https://medium.com/@Confluxchain/conflux-partners-with-chainlink-to-enable-secure-connections-between-the-blockchain-and-75b2ae8ef176), +and many others. + +Learn more by visiting the [Chainlink website](https://chain.link) or follow us +on[ Twitter](https://twitter.com/chainlink) or +[Reddit](https://www.reddit.com/r/Chainlink/). + +**About Kadena** Kadena provides a hybrid blockchain platform, including the +only scalable layer-1 PoW public network. Kadena solves the scaling challenges +of Bitcoin and the security issues of Ethereum. Kadena’s founders created JP +Morgan’s first blockchain and worked at the U.S. Securities and Exchange +Commission. Kadena is live with partners including Cosmos and USCF (a $3 billion +fund). + +For more information, visit +[www.kadena.io](https://c212.net/c/link/?t=0&l=en&o=2692403-1&h=3664521095&u=http%3A%2F%2Fwww.kadena.io%2F&a=www.kadena.io) +or follow @kadena_io on Twitter. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-completes-hybrid-blockchain-scaling-to-480-000-transactions-per-second-on-20-chains-2020-08-20.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-completes-hybrid-blockchain-scaling-to-480-000-transactions-per-second-on-20-chains-2020-08-20.md new file mode 100644 index 0000000000..af1be8746d --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-completes-hybrid-blockchain-scaling-to-480-000-transactions-per-second-on-20-chains-2020-08-20.md @@ -0,0 +1,132 @@ +--- +title: + Kadena Completes Hybrid Blockchain Scaling to 480,000 Transactions Per Second + on 20 Chains +description: + Company concludes monumental upgrade to the world’s first sharded Proof of + Work layer-1 blockchain for the scale required of institutional and retail + applications NEW YORK — Aug 20, 2020 — Kadena, the first blockchain technology + company to come out of J.P. Morgan’s Blockchain Center for Excellence, today + announced that its scalable layer-1 public blockchain has increased from 10 to + 20 chains, becoming the fastest blockchain platform in the world. Kadena’s + Chainweb public protocol functions through a braided, parallelized consensus + mechanism, a unique architecture that boosts speeds while preserving the + security of the Proof of Work consensus utilized by Bitcoin. +menu: + Kadena Completes Hybrid Blockchain Scaling to 480,000 Transactions Per Second + on 20 Chains +label: + Kadena Completes Hybrid Blockchain Scaling to 480,000 Transactions Per Second + on 20 Chains +publishDate: 2020-08-20 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_40MoCSBHaDVFNJCgIcrGqQ.webp) + +# Kadena Completes Hybrid Blockchain Scaling to 480,000 Transactions Per Second on 20 Chains + +_Company concludes monumental upgrade to the world’s first sharded Proof of Work +layer-1 blockchain for the scale required of institutional and retail +applications_ + +**NEW YORK — Aug 20, 2020** — Kadena, the first blockchain technology company to +come out of J.P. Morgan’s Blockchain Center for Excellence, today announced that +its scalable layer-1 public blockchain has increased from 10 to 20 chains, +becoming the fastest blockchain platform in the world. Kadena’s Chainweb public +protocol functions through a braided, parallelized consensus mechanism, a unique +architecture that boosts speeds while preserving the security of the Proof of +Work consensus utilized by Bitcoin. + +The company also announced that Kadena Kuro, the platform’s next-generation +private blockchain, is now available completely free of charge and has been +designated as a fully open-sourced project. Previously, Kuro Community Editions +could be trialed on +[AWS Marketplace](https://aws.amazon.com/marketplace/pp/Kadena-LLC-Kadena-Blockchain-for-Enterprise-Commun/B07MKMKP4F) +and +[Microsoft Azure](https://azuremarketplace.microsoft.com/en-us/marketplace/apps/kadenallc.scalablebft) +with some limitations. Due to the increased developer demand for their smart +contract language, Pact, as evidenced by collaborations with +[Polkadot](https://polkadot.network) and [Cosmos](https://cosmos.network), +Kadena is making Kuro accessible to as many organizations as possible. + +“With the open-sourcing of Kuro, our high-performance permissioned blockchain, +smart contract developers working in Pact can now effortlessly leverage our +hybrid platform to scale to unmatched transactional performance and throughput. +We’re giving blockchain engineers the freedom to customize their architecture to +achieve their specific requirements,” said Kadena Co-Founder and President +Stuart Popejoy. “With Kuro, developers can take a hub-and-spoke approach, where +Kuro nodes service the public chains uniformly. However, the unique nature of +Chainweb also allows an extremely high-throughput multi-cluster of Kuro nodes to +service individual public chains, an entirely new architecture in blockchain +that greatly magnifies the throughput of our sharded base layer.” + +He added, “The Kadena hybrid blockchain platform allows developers to pick and +choose methodologies for inter-chain communication, thanks to the flexibility of +Pact. dApps can run with entirely trustless bridges, with two-way verification +of consensus proofs. Pact multisig offers effortless authorization that +leverages HSMs and modern standards like OAuth/PKCS-12 to enforce security +protocols, avoiding expensive on-chain verifications. The Kadena hybrid platform +offers real-world throughput and performance as well as best-in-class +cross-chain security, all without tying developers to a particular approach.” + +Towards the end of 2019, Kadena underwent a rigorous pro-level Wall Street +quantitative analysis to prove its scalability and security. According to +independently verified +[third party research](https://medium.com/gauntlet-networks/analysis-of-kadenas-public-blockchain-protocol-31c66347e32e) +conducted by [Gauntlet Networks](https://gauntlet.network), Kadena is the first +and only project to successfully scale Proof of Work securely. Following the +launch of their sharded Proof of Work layer-1 network earlier this year, Kadena +has completed the most significant upgrade of the platform to date, expanding +from 10 to 20 braided chains on mainnet. The increase in chains brings a +doubling of throughput, already unmatched among Proof-of-Work blockchain +networks. With 20 chains, the Kadena hybrid blockchain platform achieves an +industry-leading 480,000 transactions per second. + +![](/assets/blog/2020/1_p6WZuf2vAj5qzBUbg0fiWA.webp) + +One popular criticism of the Proof of Work consensus mechanism has been the +amount of energy used to mine cryptocurrency. However, in addition to unmatched +speed, Kadena’s blockchain does not increase energy consumption as it scales. In +an industry first, Kadena has shown to use the same amount of energy at 10 +chains as with 20 chains due to its unique Chainweb protocol. Growing the shard +count from 10 to 20 chains not only doubles the current throughput; it also +proves the feasibility of Kadena’s blockchain to scale to 100, 1,000, and an +ever-increasing number of chains on the public network. + +“We created Kadena to fix the fundamental scaling problem with Bitcoin, which +has been a barrier to mainstream adoption. Launching Kadena, and now expanding +to 20 chains, proves that we can scale a layer-1 blockchain to the point where +digital assets can go mainstream,” said Kadena Co-Founder and CEO Will Martino. +“Growing from 10 to 20 chains means that the infrastructure now exists to +service the needs of the digital economy. Kadena has solved the previously +long-standing problem of how to securely scale a public blockchain — we’re the +only project that has been able to do it.” + +Kadena’s innovation has been reinforced by an advisory board that includes the +co-inventor of blockchain, Dr. Stuart Haber. Haber is often recognized for +laying the groundwork for blockchain back in 1990, and later operating the +world’s earliest blockchain. Haber is one of the most cited authors in the +seminal 2008 paper by Satoshi Nakamoto that outlined the first digital currency, +Bitcoin. As one of the preeminent minds in blockchain, Haber continues to bring +foundational expertise that has been invaluable to Kadena’s growth. + +Kadena has continued plans to scale their blockchain in 2020 and beyond, as they +announced their next major upgrade for 50 braided chains working in parallel. +Expected throughput will exceed 1 million transactions per second. Additionally, +the company expects to announce a licensed cryptocurrency exchange for +officially trading the KDA coin in the United States before the end of the year. +Kadena (KDA) was identified earlier this year as one of several cryptocurrencies +under consideration by Coinbase and other leading exchanges. + +**About Kadena** + +Kadena provides the world’s fastest hybrid blockchain platform, consisting of +the only sharded and scalable layer-1 PoW public network, the Kuro permissioned +blockchain, and the Pact smart contract language. Kadena solves the scaling +challenges of Bitcoin and the security issues of Ethereum. Kadena’s founders +created JP Morgan’s first blockchain and worked at the U.S. Securities and +Exchange Commission. Kadena is live with partners including Cosmos and USCF (a +$3 billion fund). For more information, visit +[www.kadena.io](http://www.kadena.io) or follow @kadena_io on Twitter. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-embraces-defi-with-multi-protocol-decentralized-exchange-kadenaswap-2020-09-29.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-embraces-defi-with-multi-protocol-decentralized-exchange-kadenaswap-2020-09-29.md new file mode 100644 index 0000000000..3be1a60757 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-embraces-defi-with-multi-protocol-decentralized-exchange-kadenaswap-2020-09-29.md @@ -0,0 +1,110 @@ +--- +title: + Kadena Embraces DeFi with Multi-protocol Decentralized Exchange Kadenaswap +description: + Kadena, the first blockchain technology company to come out of J.P. Morgan’s + Blockchain Center for Excellence, today announced a multi-protocol + decentralized exchange (DEX) named Kadenaswap. Kadenaswap will utilize + Kadena’s 20-chain sharded and scalable layer-1 public blockchain with 480,000 + transactions per second capability. The company also announced community + onboarding initiatives such as partnering with ZelCore on full-node + incentivization for miners, offering a free month of gas during October 2020, + and launching a developer engagement program. +menu: Kadena Embraces DeFi with Multi-protocol Decentralized Exchange Kadenaswap +label: + Kadena Embraces DeFi with Multi-protocol Decentralized Exchange Kadenaswap +publishDate: 2020-09-29 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_Q1h18cmTzAA4S4BAk5bXFg.webp) + +# Kadena Embraces DeFi with Multi-protocol Decentralized Exchange Kadenaswap + +_Kadena is also partnering with ZelCore for full-node incentivization, offering +free gas at crypto gas stations, and launching a developer program as additional +community resources_ + +**NEW YORK, N.Y. — Sept 29, 2020** — Kadena, the first blockchain technology +company to come out of J.P. Morgan’s Blockchain Center for Excellence, today +announced a multi-protocol decentralized exchange (DEX) named Kadenaswap. +Kadenaswap will utilize Kadena’s 20-chain sharded and scalable layer-1 public +blockchain with 480,000 transactions per second capability. The company also +announced community onboarding initiatives such as partnering with ZelCore on +full-node incentivization for miners, offering a free month of gas during +October 2020, and launching a developer engagement program. + +As DeFi continues to grow by billions each month, the fundamental problems of +Ethereum are breaking platforms and sending developers scrambling. As Ethereum +is currently the infrastructure for the majority of DeFi activity, it is +buckling under the strain with gas prices soaring to $99 per transaction. +Non-DeFi applications have been crowded out and are unable to operate +sustainably. Recent hacks of Balancer, Bzx, and dForce, with losses in the tens +of millions of dollars, highlight the crippling security difficulties that +developers face with Ethereum’s smart contract language Solidity. + +In searching for a solution to these problems, major DeFi projects are looking +at alternative blockchain platforms, including “CeFi,” which leverages +centralized exchanges’ scalability. There are also layer-2 networks, which push +transactions off-chain and can raise the centralization concerns seen in the +Lightning Network. Taking a different approach, Kadenaswap instead leverages +Kadena’s multi-chain scalability to keep the “De” in DeFi by scaling on the base +layer, using decentralized bridge technology in Pact for access to major +protocols, no matter what chain they originate on. + +“Ethereum made DeFi possible, but congestion and high gas prices threaten the +sustainability of the DeFi experiment just as it is poised to skyrocket,” said +Kadena Co-founder and President Stuart Popejoy. “Kadenaswap’s support for +multiple protocols and the ability to scale across the Kadena public multi-chain +network will provide a much-needed, fully decentralized alternative to ‘CeFi’ on +centralized exchanges and off-chain layer-2 solutions. Combined with community +efforts like our developer program launch and free gas campaign, Kadenaswap +shows a way forward to mass adoption of DeFi protocols.” + +Kadenaswap will leverage the Pact smart contract language to interoperate with +major DeFi protocols and coins such as BTC, CELO, DAI, DOT, LINK, and ETH. It +will also launch in stages, beginning with the creation of native decentralized +bridges to Ethereum as well as other networks such as Cosmos and Polkadot. +Kadena’s founders bring proven financial and technical expertise from building +J.P. Morgan’s first blockchain and previously working at the U.S. Securities and +Exchange Commission (SEC). Additionally, as the first layer-1 multi-protocol +DEX, Kadenaswap will create opportunities for automated market makers (AMMs) to +balance liquidity across networks. Toward this end, a governance token named +KDAX is under consideration to allow stakeholders to participate in setting +incentives and other mechanisms. The first stage of Kadenaswap, which will +include major components such as bridges, ERC-20 wrapped tokens, etc. will go +live in Q4 of this year. Additional details can be found in the release of the +company’s Q4 2020 roadmap next month. + +![](/assets/blog/2020/1_qrxABmn5R_6xGQpz3djmQQ.webp) + +To increase the ease of building applications on Kadena’s blockchain, whose +production-ready scalability ensures low gas fees, the company is offering +developers one month of free gas during October 2020. The month of free gas is +accompanied by the launch of Kadena’s developer engagement program; visit the +[developer site](https://www.kadena.io/developers) for more information. + +ZelCore, the preferred 3rd party wallet recommended for the KDA token, is +partnering with Kadena to provide full-node incentivization for miners. On +ZelCore’s Flux platform, full node operators can receive incentives in KDA. This +is a new resource to members of the community that would *otherwise want to mine +via GPU. *Building upon crypto gas stations, along with a month of free gas, +full node operations are the latest benefit for the Kadena community. + +DeFi has emerged as a potential game changer for blockchain, increasing adoption +and attracting new participation with cryptocurrency. Kadena looks forward to +contributing to the DeFi ecosystem in Q4 and beyond with this announcement of +the Kadenaswap DEX, full-node incentivization for miners, one free month of gas, +and the developer engagement program. + +**About Kadena** + +Kadena provides the world’s fastest hybrid blockchain platform, consisting of +the only sharded and scalable layer-1 PoW public network, the Kuro permissioned +blockchain, and the Pact smart contract language. Kadena solves the scaling +challenges of Bitcoin and the security issues of Ethereum. Kadena’s founders +created J.P. Morgan’s first blockchain and worked at the U.S. Securities and +Exchange Commission. Kadena is live with partners including USCF (a $3 billion +fund) and leading DeFi projects. For more information, visit +[www.kadena.io](http://www.kadena.io) or follow @kadena_io on Twitter. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-hybrid-blockchain-partners-with-programmable-money-leader-terra-to-expand-defi-ecosystem-2020-11-10.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-hybrid-blockchain-partners-with-programmable-money-leader-terra-to-expand-defi-ecosystem-2020-11-10.md new file mode 100644 index 0000000000..3fcc171bb3 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-hybrid-blockchain-partners-with-programmable-money-leader-terra-to-expand-defi-ecosystem-2020-11-10.md @@ -0,0 +1,98 @@ +--- +title: + Kadena Hybrid Blockchain Partners with Programmable Money Leader Terra to + Expand DeFi Ecosystem +description: + Kadena, the first blockchain technology company to come out of J.P. Morgan’s + Blockchain Center for Excellence, and programmable money leader Terra are + partnering to contribute their combined expertise towards expanding the DeFi + ecosystem. Kadena will add Terra’s Luna stablecoin to the multi-protocol + Kadenaswap DEX that will utilize Kadena’s 20-chain sharded and scalable + layer-1 public blockchain. This collaboration highlights how Kadena is well + positioned to help DeFi scale with high throughput and low gas costs, enabling + innovative products like Terra’s Luna stablecoin to accelerate adoption. +menu: + Kadena Hybrid Blockchain Partners with Programmable Money Leader Terra to + Expand DeFi Ecosystem +label: + Kadena Hybrid Blockchain Partners with Programmable Money Leader Terra to + Expand DeFi Ecosystem +publishDate: 2020-11-10 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1__Usm8O2pFFohsQ6nvuTauA.webp) + +# Kadena Hybrid Blockchain Partners with Programmable Money Leader Terra to Expand DeFi Ecosystem + +_Kadena’s platform, developed by the creators of J.P. Morgan’s first blockchain, +will add Terra’s Luna stablecoin to the Kadenaswap portfolio_ + +**NEW YORK, N.Y. — Nov 10, 2020** — Kadena, the first blockchain technology +company to come out of J.P. Morgan’s Blockchain Center for Excellence, and +programmable money leader Terra are partnering to contribute their combined +expertise towards expanding the DeFi ecosystem. Kadena will add Terra’s Luna +stablecoin to the multi-protocol Kadenaswap DEX that will utilize Kadena’s +20-chain sharded and scalable layer-1 public blockchain. This collaboration +highlights how Kadena is well positioned to help DeFi scale with high throughput +and low gas costs, enabling innovative products like Terra’s Luna stablecoin to +accelerate adoption. + +Kadenaswap will act as a decentralized hub, providing bridges to major +protocols. Kadenswap will give the Luna stablecoin access to Ethereum, Bitcoin, +Cosmos, Polkadot, and other networks. Terra is a strong new addition to the +Kadenaswap portfolio because Terra is diversifying DeFi with multiple fiat +stablecoins, bringing FX to DeFi. By working together, both projects grow from +enhanced functionality with Kadena adding more value to its decentralized +exchange and Terra offering greater utility with access to popular platforms. + +![](/assets/blog/2020/1_3uPPdFwBaIUCvpuc2-XavA.webp) + +“Terra believes that decentralized bridges are pivotal to growing DeFi, which is +why we’re excited about working with Kadena. While various projects are +developing decentralized exchanges, we believe that Kadenaswap’s support of +multiple protocols will deliver unique advantages given the background and track +record of their team. This collaboration means that Terra could process wrapped +Luna transactions on Kadena’s DEX and then bridge to Ethereum. Bringing Terra’s +Luna stablecoin to Kadenaswap makes cross-platform payments easier and advances +the usage of Terra-based payments,” said Do Kwon, Co-founder and CEO of Terra. + +“Ever since my and my co-founder’s time building J.P. Morgan’s first blockchain, +whose technology laid the foundation for JPM Coin v0, the promise of payments on +a high-throughput blockchain platform has been evident. Seeing how Ethereum has +had significant challenges with scaling for DeFi, Kadena is creating Kadenaswap +to be truly decentralized with low-gas and high-speed transactions,” said Stuart +Popejoy, Co-founder and President of Kadena. “Like us, Do and the Terra team +have expertise in payments and understand that Terra’s stablecoins could +turbocharge real-world adoption of payments on top of a truly decentralized base +layer and exchange. Kadenaswap will deliver wide interoperability between coins +like Terra’s and leading blockchain platforms like Ethereum and Polkadot.” + +The first stage of moving Terra and other coins in and out from one network to +another via Kadenaswap will take place in 2021. Users of Kadenaswap will benefit +from Terra stablecoins that are backed in fiat currencies such as the U.S. +dollar, Korean won, and Phillipine peso. + +**About Kadena** + +Kadena provides the world’s fastest hybrid blockchain platform, consisting of +the only sharded and scalable layer-1 PoW public network, the Kuro permissioned +blockchain, and the Pact smart contract language. Kadena solves the scaling +challenges of Bitcoin and the security issues of Ethereum. Kadena’s founders +created J.P. Morgan’s first blockchain and worked at the U.S. Securities and +Exchange Commission. Kadena is live with partners including USCF (a $3 billion +fund) and leading DeFi projects. For more information, visit +[www.kadena.io](http://www.kadena.io) or follow +[@kadena_io](http://twitter.com/kadena_io) on Twitter. + +**About Terra** + +Terra creates algorithmic stablecoins pegged to various fiat currencies that are +designed to be easier to spend and more attractive to hold. Terra’s payment +solutions are expanding into e-commerce checkouts in Asia, empowered by lower +transaction fees and faster settlement times. [Chai](https://chai.finance) is +the fastest growing e-wallet in Korea, with more than 2M active users and 1.2B +in annualized transaction volume after less than 16 months of operations. For +more information, visit [www.terra.money](http://www.terra.money) or follow +[@terra_money](http://twitter.com/terra_money) on Twitter. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-introduces-chainweaver-to-the-cosmos-ecosystem-2020-01-17.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-introduces-chainweaver-to-the-cosmos-ecosystem-2020-01-17.md new file mode 100644 index 0000000000..bb9bf0adb6 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-introduces-chainweaver-to-the-cosmos-ecosystem-2020-01-17.md @@ -0,0 +1,95 @@ +--- +title: Kadena Introduces Chainweaver to the Cosmos Ecosystem +description: + Kadena, the first blockchain technology company to come out of JP Morgan’s + Blockchain Center for Excellence, announced the integration of its digital + wallet Chainweaver onto the Cosmos network. Chainweaver is a multi-blockchain + interoperable wallet that also functions as a development environment for + smart contracts. +menu: Kadena Introduces Chainweaver to the Cosmos Ecosystem +label: Kadena Introduces Chainweaver to the Cosmos Ecosystem +publishDate: 2020-01-17 +author: Rebecca Rodriguez +layout: blog +--- + +![](/assets/blog/2020/1_TC6Pmg3mMESvs7C1cZFsrA.webp) + +# Kadena Introduces Chainweaver to the Cosmos Ecosystem + +## Kadena Introduces Chainweaver to the Cosmos Ecosystem + +_Kadena follows the release of Kadenamint with an interoperable digital wallet_ + +[Kadena](https://www.kadena.io/), the first blockchain technology company to +come out of JP Morgan’s Blockchain Center for Excellence, announced the +integration of its digital wallet Chainweaver onto the +[Cosmos](https://cosmos.network/) network. Chainweaver is a multi-blockchain +interoperable wallet that also functions as a development environment for smart +contracts. Cosmos, currently valued at an over $850 million market cap, made +headlines earlier this year when it launched the Cosmos Hub, designed to be a +point of interaction and interoperability for many different blockchains. The +integration of Chainweaver onto the Cosmos ecosystem is expected to be completed +by the end of Q1. + +The rapid development of many different blockchains over the past two years has +flooded the industry with a variety of options for blockchain transactions, +including transferring cryptocurrencies and running applications. Blockchain +transactions take place through a medium known as “smart contracts.” Cosmos +allows blockchains to interoperate with one another, reducing the friction for +participants in the overall blockchain ecosystem. + +Kadena’s Chainweaver wallet is a multi-chain interoperable wallet that stores +cryptocurrency and is also a development environment that makes creating usable +applications on Cosmos and Kadena both faster and safer. Chainweaver supports +development in the Pact smart contract language, which is available in the +Cosmos ecosystem as Kadenamint. With Chainweaver, developers can write smart +contracts for both Cosmos and Kadena from the same interface, giving developers +access to market-leading features such as Formal Verification and +Capabilities-based security. + +“Blockchains help solve large-scale issues like scalability, security, and +usability in the multi-stakeholder environments of practically any industry,” +said Interchain Foundation Technical Director \*\*\*\*Ethan Buchman. “We’re +working with Kadena to integrate their digital wallet Chainweaver into the +larger Cosmos ecosystem to tackle these issues like never before, enabling users +to build Pact smart contracts running on the Tendermint consensus engine through +Chainweaver’s stellar UX.” + +Previously, applications for a blockchain needed to be developed in the language +native to that chain, e.g. Solidity for Etherum or Pact for Kadena. With the +introduction of Kadenamint — Pact on Cosmos — and Chainweaver, for the first +time a developer can create a single application that is compatible with +multiple worlds, all inside of the same piece of software. This flexibility +reduces friction to deployment and allows creators to rapidly release new +products in more markets. + +“The implementation of Chainweaver onto the Cosmos network enables participants +to build on a blockchain more easily than ever before,” said Kadena Founder and +CEO Will Martino. “Kadenamint was the first step in achieving this, giving users +a smart contract language they could trust to provide both functionality and +security. Chainweaver amplifies that ability by presenting a digital wallet that +can support the industry’s big-picture goals of an interoperable financial +ecosystem.” + +**About Kadena** + +Kadena provides the only public blockchain that is production-ready for smart +contracts, solving the scaling challenges of Bitcoin and the security issues of +Ethereum. Kadena’s founders created JP Morgan’s first blockchain and worked at +the U.S. Securities and Exchange Commission. The team is the first to bring +together engineers with decades of banking, commerce, and regulatory experience +to a public blockchain. Kadena is in use with businesses including USCF (a $3 +billion fund) and Rymedi (tracking the quality of medicinal products). For more +information, visit [www.kadena.io](http://www.kadena.io/). + +**About Cosmos** + +The Cosmos Network is a decentralized network of independent parallel +blockchains developed by California-based startup Tendermint Inc. With Cosmos, +blockchains can maintain sovereignty, process transactions quickly, and +communicate with other blockchains in the ecosystem. This is achieved through a +set of open-source tools like Tendermint, the Cosmos SDK, and IBC, which were +designed to let people build custom, secure, scalable, and interoperable +blockchain applications quickly. For more information, visit +[cosmos.network](https://cosmos.network/). diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-launches-public-chain-with-smart-contract-transactions-2020-01-15.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-launches-public-chain-with-smart-contract-transactions-2020-01-15.md new file mode 100644 index 0000000000..aa096535bc --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-launches-public-chain-with-smart-contract-transactions-2020-01-15.md @@ -0,0 +1,87 @@ +--- +title: Kadena Launches Public Chain with Smart Contract Transactions +description: + Kadena, the first blockchain technology company to come out of JP Morgan’s + Blockchain Center for Excellence, has announced the full launch of its public + blockchain. Kadena’s public blockchain is first to market as a sharded Proof + of Work Layer 1 network. Following the start of genesis mining in October + 2019, Kadena has surpassed having two million blocks mined at hash rates as + high as 40 TH/s. Today’s launch includes full transactions and the ability to + write smart contracts. +menu: Kadena Launches Public Chain with Smart Contract Transactions +label: Kadena Launches Public Chain with Smart Contract Transactions +publishDate: 2020-01-15 +author: Stuart Popejoy +layout: blog +--- + +![](/assets/blog/2020/1_VzDmro2_e8CPGbUG0qyD-w.webp) + +# Kadena Launches Public Chain with Smart Contract Transactions + +## Kadena Launches Public Chain with Smart Contract Transactions + +_Kadena solves the scaling challenges of Bitcoin and the security issues of +Ethereum by delivering the industry’s first hybrid blockchain_ + +**BROOKLYN, NY — January 15, 2020 —** Kadena, the first blockchain technology +company to come out of JP Morgan’s Blockchain Center for Excellence, has +announced the full launch of its public blockchain. Kadena’s public blockchain +is first to market as a sharded Proof of Work Layer 1 network. Following the +start of genesis mining in October 2019, Kadena has surpassed having two million +blocks mined at hash rates as high as 40 TH/s. Today’s launch includes full +transactions and the ability to write smart contracts. The latest +functionalities of the network complete Kadena’s hybrid blockchain platform. +[Kadena](https://www.kadena.io) is already delivering interoperability, +scalability, and security across industries including +[finance](https://medium.com/kadena-io/uscf-collaborates-with-kadena-on-use-of-blockchain-in-the-investment-space-f8b16f7a38bb), +[healthcare](https://medium.com/kadena-io/kadena-and-rymedi-validate-quality-of-medicinal-products-on-blockchain-244d5fb8d699), +and insurance. + +The hybrid blockchain supports interoperability using Pact, Kadena’s +open-source, Turing-incomplete smart contract language with Formal Verification. +The simple smart contract language is powerful enough to code complex contracts +and execute multi-party transactions. Enterprises and developers alike will find +that applications once considered too difficult to build are now achievable with +Kadena. Removing the complexity and vulnerability of other smart contract +languages, Pact advances secure and legible transactions. + +“Despite blockchain having immense potential, our experience building JP +Morgan’s first blockchain showed us its limitations,” said Founder and President +Stuart Popejoy. “Launching a fully functional hybrid blockchain which seamlessly +integrates a public chain with a private network is a significant step forward +in reimagining what applications can do on-chain.” + +Kadena’s public blockchain functions through a braided, parallelized Proof of +Work consensus mechanism, the only protocol that has been validated in the +market. The architecture enhances throughput and scalability while preserving +the reliability of Bitcoin. Kadena Kuro, the platform’s next-generation private +blockchain, overcomes the challenges of security, scalability, and speed found +in existing blockchains such as Ethereum. + +“We’ve solved the scaling challenges of Bitcoin with parallel Proof of Work +chains while addressing the security issues of Ethereum with Pact,” said Founder +and CEO Will Martino. “Today’s launch of our public blockchain with smart +contract transactions, which completes our hybrid platform, advances mainstream +adoption. We’re excited to see how Kadena’s blockchain will empower +entrepreneurs and enterprises to bring in Economics 2.0.” + +The launch comes after Kadena completed a year full of milestones in 2019, +including the news that next-generation blockchain networks such as Cosmos and +Polkadot are looking to implement the Pact smart contract language. Businesses +exploring deployment of applications on blockchain were able to utilize the +speed and security of Kadena Kuro when it got listed on +[AWS Marketplace](https://fortune.com/2019/01/23/blockchain-aws-kadena) and +[Azure Marketplace](https://medium.com/kadena-io/kadena-launches-blockchain-as-a-service-baas-on-azure-marketplace-7030ec35f56c) +with free community editions. + +**About Kadena** + +Kadena provides the only public blockchain that is production-ready for smart +contracts, solving the scaling challenges of Bitcoin and the security issues of +Ethereum. Kadena’s founders created JP Morgan’s first blockchain and worked at +the U.S. Securities and Exchange Commission. The team is the first to bring +together engineers with decades of banking, commerce, and regulatory experience +to a public blockchain. Kadena is in use with businesses including USCF (a $3 +billion fund) and Rymedi (tracking the quality of medicinal products). For more +information, visit [www.kadena.io](http://www.kadena.io). diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q1-q2-2020-2020-04-08.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q1-q2-2020-2020-04-08.md new file mode 100644 index 0000000000..275b24bc45 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q1-q2-2020-2020-04-08.md @@ -0,0 +1,64 @@ +--- +title: Kadena Roadmap for Q1-Q2 2020 +description: + Kadena has successfully launched the first sharded layer-1 PoW public + blockchain. Since the launch in January, the team has been concentrating on + the growth and stability of the public network. At the end of March, the + Kadena public blockchain grew to a hash rate above 100 Terahashes per second + (that’s 100 trillion hashes), completed over 75,000 successful token + transfers, and mined more than 4 million blocks. +menu: Kadena Roadmap for Q1-Q2 2020 +label: Kadena Roadmap for Q1-Q2 2020 +publishDate: 2020-04-08 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_4DCX4tcoFGCSYqE4K_wy5Q.webp) + +# Kadena Roadmap for Q1-Q2 2020 + +## Kadena Roadmap for Q1-Q2 2020 + +**Kadena has successfully launched the first sharded layer-1 PoW public +blockchain.** + +Since the launch in January, the team has been concentrating on the growth and +stability of the public network. At the end of March, the Kadena public +blockchain grew to a hash rate above 100 Terahashes per second (that’s 100 +trillion hashes), completed over 75,000 successful token transfers, and mined +more than 4 million blocks. + +[Click here](https://medium.com/kadena-io/kadenas-roadmap-to-a-hybrid-blockchain-platform-dc0ff7c178a6) +to visit Kadena’s timeline from founding in 2016 through Q1 of 2019. + +[Click here](https://medium.com/kadena-io/roadmap-for-kadenas-hybrid-blockchain-launch-in-january-2020-3f93d8d2a6e0) +to visit Kadena’s timeline from Q2 through Q4 of 2019. + +![](/assets/blog/2020/1__tid1PJH0R_WwpxL0Jvcww.webp) + +For the second quarter of 2020, we’re looking forward to sharing updates on our +collaboration projects with other leading next-generation networks Cosmos and +Polkadot. Kadena is currently on track to complete +[Kadenamint](https://medium.com/kadena-io/introducing-kadenamint-and-chainweb-testnet-v2-cde077c02ebc), +the integration of our wallet+IDE +[Chainweaver](https://www.kadena.io/chainweaver) and the Pact smart contract +language with the Cosmos ecosystem. Listing the KDA token on a top-tier +cryptocurrency exchange is also a target for Q2. In addition, we’re releasing a +simple demo app to showcase the utility of Kadena’s hybrid blockchain platform. +Finally, we’re making updates to the +[Kadena Block Explorer](https://explorer.chainweb.com/mainnet) so that users can +look up specific transactions and receive confirmation of coin transfers. + +Like many projects, the Kadena team has a decentralized structure to facilitate +remote work, which allows us to keep advancing our technology during the current +pandemic. We hope you are staying safe. We’re glad to collaborate with +organizations seeking to address COVID-19 using blockchain. To contact us, send +a message on Discord (link at bottom). + +Thank you to the community, including miners and partners, for engaging with our +team on Discord to provide ideas for improving the ecosystem. + +_To learn more about Kadena’s developments and progress updates, contact our +team on [Discord](https://discordapp.com/invite/bsUcWmX) or subscribe to +[our newsletter](http://eepurl.com/dk-Sbz)_. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q3-2020-2020-07-29.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q3-2020-2020-07-29.md new file mode 100644 index 0000000000..693076e251 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q3-2020-2020-07-29.md @@ -0,0 +1,69 @@ +--- +title: Kadena Roadmap for Q3 2020 +description: + Kadena has successfully launched the first sharded layer-1 PoW public + blockchain. Since the launch in January, the team has been concentrating on + the growth and stability of the public network. At the end of March, the + Kadena public blockchain grew to a hash rate above 100 Terahashes per second + (that’s 100 trillion hashes), completed over 75,000 successful token + transfers, and mined more than 4 million blocks. +menu: Kadena Roadmap for Q3 2020 +label: Kadena Roadmap for Q3 2020 +publishDate: 2020-07-29 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_NQHVZvgxYDdMjrIgC80PXg.webp) + +# Kadena Roadmap for Q3 2020 + +Following the first official listing of the +[KDA token on Bittrex Global](https://global.bittrex.com/Market/Index?MarketName=BTC-KDA), +Kadena is sharing our Q3 roadmap below. Already in July, Head of Research and +Networks Monica Quaintance participated in a +[live AMA on Chainlink’s YouTube](https://www.youtube.com/watch?v=CbeJXGiITt4) +channel, where she provided an update on the collaboration between the two +teams. Monica explained how the projects add value to one another by saying, +“Kadena is like a giant brain, and having Chainlink oracles is basically like +giving your brain sensory input.” On testnet, Kadena has scaled from 10 to 20 +chains. + +For reference, here is an updated version of Kadena’s roadmap for the first half +of this year. While we moved an update on the Polkadot collaboration to Q3 (they +have understandably been busy with their recent launch), the Kadena team +achieved all of our other milestones on time. + +![](/assets/blog/2020/1_GhtdwmlGhXExzdmPvGuQ4Q.webp) + +[Click here](https://medium.com/kadena-io/kadenas-roadmap-to-a-hybrid-blockchain-platform-dc0ff7c178a6) +to visit Kadena’s timeline from founding in 2016 through Q1 of 2019. + +[Click here](https://medium.com/kadena-io/roadmap-for-kadenas-hybrid-blockchain-launch-in-january-2020-3f93d8d2a6e0) +to visit Kadena’s timeline from Q2 through Q4 of 2019. + +![](/assets/blog/2020/1_CdW37ppe1kqXvhBE3n9O2A.webp) + +During the third quarter of 2020, there will be a significant advancement in +Kadena’s blockchain technology as we scale the sharded layer-1 blockchain from +10 to 20 chains in production (mainnet). We look forward to announcing a new +DeFi partnership in addition to providing updates on our current collaborations +with Polkadot and USCF. Community efforts will continue receiving investment as +we explore multiple simultaneous algorithms for miners and introduce a developer +engagement program. The developer program will enhance the ease of onboarding to +build on our blockchain platform using the Turing-incomplete +[Pact smart contract language](https://pactlang.org). + +By the close of Q3, Kadena will complete implementation with the Rosetta +protocol launched by Coinbase. We believe that Kadena will be the first sharded +multichain network to fully integrate with the API, which has been designed to +standardize the process of +[bringing a blockchain project’s data to Coinbase](https://www.coindesk.com/coinbase-open-sources-technical-standard-to-streamline-token-listings) +and other exchanges. + +Thank you to our community members for all of the comments, questions, and +suggestions, including the feedback shared during Discord and Telegram AMAs. + +_To learn more about Kadena’s developments and updates, contact our team on +[Discord](https://discordapp.com/invite/bsUcWmX) and subscribe to our newsletter +below_. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q4-2020-2020-10-28.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q4-2020-2020-10-28.md new file mode 100644 index 0000000000..efbbb28ac2 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadena-roadmap-for-q4-2020-2020-10-28.md @@ -0,0 +1,71 @@ +--- +title: Kadena Roadmap for Q4 2020 +description: + As announced last month, creating the multi-protocol Kadenaswap DEX is the + primary focus for Kadena’s blockchain engineers for the rest of the year and + going forward through 2021. Of course, the team will also be working on + additional efforts to benefit the ecosystem and community. Some of the + activities we’ve already completed in October include Co-founder and CEO Will + Martino speaking at LA Blockchain Summit and the Zel project partnering with + us for node incentivization on the Flux platform. +menu: Kadena Roadmap for Q4 2020 +label: Kadena Roadmap for Q4 2020 +publishDate: 2020-10-28 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_LQouI-FC-8Pmkxs2-5UG7w.webp) + +# Kadena Roadmap for Q4 2020 + +As announced last month, creating the +[multi-protocol Kadenaswap DEX](https://medium.com/kadena-io/kadena-embraces-defi-with-multi-protocol-decentralized-exchange-kadenaswap-eee862e80212) +is the primary focus for Kadena’s blockchain engineers for the rest of the year +and going forward through 2021. Of course, the team will also be working on +additional efforts to benefit the ecosystem and community. Some of the +activities we’ve already completed in October include Co-founder and CEO Will +Martino speaking at LA Blockchain Summit and the Zel project partnering with us +for node incentivization on the Flux platform. In addition, Kadena’s sharded and +scalable layer-1 blockchain has crossed the milestones of having a 1 million +block height along with 11 million blocks mined. + +As shown here, the Kadena team continues to strengthen our industry reputation +for delivering on time and as promised. + +![](/assets/blog/2020/1_U-4RpLd3IniJwys-r9Aqlw.webp) + +[Click here](https://medium.com/kadena-io/kadenas-roadmap-to-a-hybrid-blockchain-platform-dc0ff7c178a6) +to visit Kadena’s timeline from founding in 2016 through Q1 of 2019. + +[Click here](https://medium.com/kadena-io/roadmap-for-kadenas-hybrid-blockchain-launch-in-january-2020-3f93d8d2a6e0) +to visit Kadena’s timeline from Q2 through Q4 of 2019. + +[Click here](https://medium.com/kadena-io/kadena-roadmap-for-q1-q2-2020-d0a533193d80) +to visit Kadena’s timeline from Q1 through Q2 of 2020. + +![](/assets/blog/2020/1_AChuT728AgSZfZcFMqanbA.webp) + +In the fourth quarter of 2020, we will announce a new DeFi partnership for +Kadenaswap. The new partner will add further value to the DEX, which will +support multiple protocols such as Ethereum, Celo, Maker, Polkadot, Cosmos, +Chainlink, and Bitcoin. Building upon the +[developer program](https://www.kadena.io/developers) that formally kicked off +last quarter, Kadena will offer a grant program to application developers and +share an update on a KDA ASIC that will be available to miners for purchase. + +Before the end of the year, Kadenaswap and decentralized bridges will get +launched in testnet. Alongside the technical achievement, Kadena plans to +provide an update on our ongoing exploration of a KDAX governance token. We +welcome your input on both Kadenaswap and KDAX as we are motivated to contribute +to DeFi in meaningful ways. + +Thank you to the Kadena community for your constructive comments, questions, and +suggestions, including the feedback shared during our regular Discord and +Telegram AMAs. + +--- + +_To learn more about Kadena’s developments and updates, contact our team on +[Discord](https://discordapp.com/invite/bsUcWmX) and subscribe to our newsletter +below_. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/kadenas-kda-token-has-first-listing-on-bittrex-global-a-top-ten-exchange-2020-06-25.md b/packages/apps/docs/src/pages/docs/blogchain/2020/kadenas-kda-token-has-first-listing-on-bittrex-global-a-top-ten-exchange-2020-06-25.md new file mode 100644 index 0000000000..ae995a7885 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/kadenas-kda-token-has-first-listing-on-bittrex-global-a-top-ten-exchange-2020-06-25.md @@ -0,0 +1,166 @@ +--- +title: + Kadena’s KDA Token Has First Listing on Bittrex Global, a Top Ten Exchange +description: + The company is also open-sourcing a COVID-19 test result tracking dApp and + announcing the public blockchain shard count is scaling from 10 to 20 chains + BROOKLYN, N.Y., June 25, 2020 — Kadena, the first blockchain technology + company to come out of JP Morgan’s Blockchain Center for Excellence, will have + the first official listing of its KDA token on Bittrex Global. Bittrex Global + is a Top Ten exchange as measured by real trade volume according to Bitwise + Investments and Messari. The company is also open-sourcing a coronavirus test + result tracking application made available for the healthcare industry + effective immediately. Additionally, Kadena continues to lead the industry by + announcing that its public network is scaling from 10 to 20 chains on July 31. +menu: Kadena’s KDA Token Has First Listing on Bittrex Global, a Top Ten Exchange +label: + Kadena’s KDA Token Has First Listing on Bittrex Global, a Top Ten Exchange +publishDate: 2020-06-25 +author: Tony Pham +layout: blog +--- + +![](/assets/blog/2020/1_HJDBr9jX5Ajucwmynt15eg.webp) + +# Kadena’s KDA Token Has First Listing on Bittrex Global, a Top Ten Exchange + +_The company is also open-sourcing a COVID-19 test result tracking dApp and +announcing the public blockchain shard count is scaling from 10 to 20 chains_ + +**BROOKLYN, N.Y., June 25, 2020 —** Kadena, the first blockchain technology +company to come out of JP Morgan’s Blockchain Center for Excellence, will have +the first official listing of its KDA token on +[Bittrex Global](https://global.bittrex.com). Bittrex Global is a Top Ten +exchange as measured by real trade volume according to Bitwise Investments and +Messari. The company is also open-sourcing a coronavirus test result tracking +application made available for the healthcare industry effective immediately. +Additionally, Kadena continues to lead the industry by announcing that its +public network is scaling from 10 to 20 chains on July 31. + +**Bittrex Global Exchange First To List KDA Token** + +“After successfully rolling out Kadena’s hybrid blockchain platform in stages, +culminating with our full feature launch at the start of this year, the team +turned our attention towards the community,” said Kadena Founder and CEO Will +Martino. “Now, Kadena is excited to have Bittrex Global be the first exchange to +officially list KDA.” + +KDA tokens are directly transferable between individuals. The tokens are used +for both the creation of new smart contacts as well as for paying the gas cost +of executing smart contracts. Kadena’s smart contracts are written in Pact, an +open-source, Turning-incomplete, and human-readable language with formal +verification. + +“We welcome Kadena’s exciting blockchain solution to the Bittrex Global +Exchange,” said Bittrex Global CEO Tom Albright. “The COVID-19 pandemic has +validated the market need for the speed, reliability, and security Kadena offers +the enterprise healthcare, finance and insurance industries.” + +The initial KDA trading pairs on Bittrex Global will be with Bitcoin (BTC) and +Tether (USDT). Bittrex Global is a reliable and secure digital asset trading +platform developed for customers outside of the United States. This listing +provides miners and other community members located internationally with access +to liquidity for KDA. + +The KDA wallet is now launched on Bittrex Global. The market launch and trading +open _Monday, June 29th, at 8 am PT / 11 am ET.\*_ + +\*_Corrected trading date on 6/29/20_ + +**Kadena Launches COVID-19 Blockchain Application** + +Along with the listing, the Kadena team is open-sourcing a decentralized +application (dApp) that any healthcare professional is welcome to use for +managing and validating COVID-19 test results. The dApp is +[available on testnet](https://covid19-dashboard.chainweb.com) immediately; no +previous experience with blockchain is required. Users do _not_ need to onboard +with KDA tokens or a crypto wallet to use any application functionality. +Kadena’s unique gas station feature allows a seamless onboarding for those new +to blockchain. + +The dApp is designed to address problems with the aggregation and efficient +distribution of test results as well as concerns about the quality of the +testing kits. The security of the blockchain ensures that no protected health +information is accessible to unauthorized parties. For healthcare professionals, +the dApp has three steps: + +1. Scanning a QR code associated with a testing kit + +2. Entering patient information to the generated web form and submitting + +3. Storing the testing kit ID, patient information, and test results on + Kadena’s hybrid blockchain platform + +Kadena Co-Founder and CEO Will Martino stated, “Unfortunately, the pandemic has +underscored the limitations of highly centralized and bureaucratic institutions. +By open-sourcing a coronavirus test management dApp, Kadena’s goal is to give +healthcare professionals a simple tool that they can start using right away. +Tracking COVID-19 test results on blockchain means not needing to trust a single +government or any centralized authority. The data is trustless because it cannot +be changed. Using Kadena’s hybrid blockchain platform, sensitive data can be +stored safely and shared quickly.” + +The dApp provides a secure way to distribute results among medical teams and +patients. In aggregate, the privacy-protected data can help academics and +government officials better understand how the virus is spreading +demographically. Public health professionals that would like to get started can +send an email to [covid@kadena.io](mailto:covid@kadena.io) for more information. +To see how the dApp works, watch this +[30-second explainer video](https://youtu.be/y7R6RbSptE0). + +**Kadena To Scale Sharded Layer-1 PoW Blockchain From 10 To 20 Braided Chains** + +Kadena Co-Founder and President Stuart Popejoy shared, “If blockchain is ever to +see mainstream adoption, it is vital to demonstrate a system that scales as well +as the existing non-decentralized platforms that currently dominate the digital +world. With Kadena’s public Chainweb protocol already operating 10 braided +chains, demonstrating the smooth transition to 20 chains will be both a +significant technological breakthrough and a confirmation that scalable +blockchain technology has arrived. It is critical that blockchain technology is +driven by Proof of Work to guarantee a level playing field for all network +participants, which is what will ultimately drive adoption away from centralized +platforms — Proof of Stake puts too much power in the hands of token holders at +the expense of users.” + +“Bitcoin was created in response to central banks printing unlimited amounts of +money during the Great Recession,” said Kadena Co-Founder and CEO Will Martino. +”For all of Bitcoin’s innovation, since its inception, there have been known +scaling challenges. A decade later, as financial history repeats itself with +seemingly endless quantitative easing, Kadena has launched to successfully scale +a sharded layer-1 PoW network,” said Will Martino, Co-Founder and CEO of Kadena. + +He added, “We created Kadena to fix the fundamental scaling problem with +Bitcoin, which has been a barrier to mainstream adoption. Launching Kadena and +expanding to 20 chains proves that we can scale a layer-1 blockchain to the +point where digital assets can go mainstream. Growing from 10 to 20 chains means +that the infrastructure exists to service the needs of the digital economy. +Kadena has solved the previously long-standing problem of how to securely scale +a public blockchain; we’re the only project that has done it.” + +Using the same amount of energy as 1 or 10 chains, Kadena will demonstrate 20 +chains working in parallel with its unique Chainweb protocol. Growing the shard +count from 10 to 20 chains not only doubles the +[current throughput](https://explorer.chainweb.com/mainnet), it also proves the +feasibility of Kadena’s blockchain to scale to 100, 1000, and an ever-increasing +number of chains on the public network. To see a visualization of Kadena’s +blockchain innovation, which has been +[verified by independent experts](https://www.forbes.com/sites/darrynpollock/2019/04/29/high-frequency-trading-researcher-publishes-findings-on-jpmorgan-blockchain-spin-off/#58e9df1f2915), +view this video on YouTube: +[https://www.youtube.com/watch?v=hYvXxFbsN6I](https://www.youtube.com/watch?v=hYvXxFbsN6I). + +_To learn more about Kadena’s blockchain, contact our team on +[Discord](https://discordapp.com/invite/bsUcWmX), visit +[GitHub](https://github.com/kadena-io), or subscribe to our +[newsletter](http://eepurl.com/dk-Sbz)._ + +--- + +**About Kadena** + +Kadena provides a hybrid blockchain platform, featuring the only sharded and +scalable layer-1 PoW public network. Kadena solves the scaling challenges of +Bitcoin and the security issues of Ethereum. Kadena’s founders created JP +Morgan’s first blockchain and worked at the U.S. Securities and Exchange +Commission. Kadena is live with partners including Cosmos and USCF (a $3 billion +fund). For more information, visit [www.kadena.io](http://www.kadena.io) or +follow @kadena_io on Twitter. diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/polkadot-collaboration-update-researching-pact-core-for-wasm-and-exploring-kadenadot-2020-08-12.md b/packages/apps/docs/src/pages/docs/blogchain/2020/polkadot-collaboration-update-researching-pact-core-for-wasm-and-exploring-kadenadot-2020-08-12.md new file mode 100644 index 0000000000..e267783051 --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/polkadot-collaboration-update-researching-pact-core-for-wasm-and-exploring-kadenadot-2020-08-12.md @@ -0,0 +1,79 @@ +--- +title: + Polkadot Collaboration Update Researching Pact Core for WASM and Exploring + KadenaDOT +description: + As part of our ongoing work with the Polkadot team, our lead language engineer + Emily Pillmore developed an exciting long-term approach to extend the benefits + of Pact to the Polkadot community while also furthering Pact as the standard + for smart contracts Pact Core. With Pact Core, Polkadot or any WASM-compatible + platform can natively execute Pact smart contract code with the help of a + minimal interpreter installed directly on-chain. +menu: + Polkadot Collaboration Update Researching Pact Core for WASM and Exploring + KadenaDOT +label: + Polkadot Collaboration Update Researching Pact Core for WASM and Exploring + KadenaDOT +publishDate: 2020-08-12 +author: Will Martino +layout: blog +--- + +![](/assets/blog/2020/1_gx_qreTbIj3PIoY0_4KtRw.webp) + +# Polkadot Collaboration Update: Researching Pact Core for WASM and Exploring KadenaDOT + +As one of our commitments on the Q3 roadmap, we’re providing an update on +Kadena’s collaboration with Web3 Foundation to explore the implementation of our +technology with Polkadot. + +As part of our ongoing work with the Polkadot team, our lead language engineer +Emily Pillmore developed an exciting long-term approach to extend the benefits +of Pact to the Polkadot community while also furthering Pact as the standard for +smart contracts: Pact Core. With Pact Core, Polkadot or any WASM-compatible +platform can natively execute Pact smart contract code with the help of a +minimal interpreter installed directly on-chain. + +Toward this end, Kadena and Polkadot agree that the best path forward for Pact +Core is to open an RFC (Request for Comment) where community members can +participate in the design process. We’ve kicked off the public discussion +[here](https://github.com/kadena-io/KIPs/pull/8). + +**KadenaDOT: A Potential Near-Term Bridge to Polkadot** + +As an alternative to Pact Core, and a potentially faster integration with +Polkadot, Kadena’s permissioned blockchain technology Kuro can be adapted to +operate as a Polkadot _parachain_ in a design called KadenaDOT. (Parachains are +the term that Polkadot uses to describe an external system, like a blockchain, +that forms a constituent member of their ecosystem.) Kuro is an evolution of +J.P. Morgan’s Juno blockchain which was successfully deployed internally for the +first generation of JPMCoin by Kadena’s founders. Kuro is one of the fastest +enterprise-grade blockchains ever created with the built-in capacity to run Pact +smart contracts. + +KadenaDOT acts as a bridge technology between the Polkadot and Kadena +ecosystems, offering the power of Pact smart contracts to parachain operators, +while the Core Pact RFC will bring about the final goal of running Pact anywhere +in the entire Polkadot network. + +**Request for Community Feedback** + +Enterprise blockchains that are a “real blockchain,” and not something +[masquerading as a blockchain like IBM’s Hyperledger](https://thenextweb.com/podium/2019/05/05/ibms-hyperledger-isnt-a-real-blockchain-heres-why) +or R3’s +[Corda technology](https://www.ccn.com/r3-corda-is-not-a-blockchain-and-we-didnt-say-it-was-as-critics-take-aim), +are quite rare. Real permissioned networks have all the features of a blockchain +(e.g. hardened consensus, simple operation) needed for a killer layer-2 solution +_and_ they are battle-tested by some of the largest companies in the world. + +[As a “real” permissioned blockchain](https://www.coindesk.com/evolution-kadena-first-real-private-blockchain), +Kuro is an excellent candidate for a parachain. KadenaDOT would be a major +strategic pivot for Kuro. To help us prioritize, we want to hear your opinions +on the idea of bringing KadenaDOT to market _before_ Pact Core. + +Would you use KadenaDOT? Do you think more parachains are important to Polkadot +and/or to DeFi as a whole? Do you think the best way forward is using +permissioned layer-2 blockchains as bridges between ecosystems? + +Please join the [conversation](https://github.com/kadena-io/KIPs/pull/8). diff --git a/packages/apps/docs/src/pages/docs/blogchain/2020/the-first-crypto-gas-station-is-now-on-kadenas-blockchain-2020-08-06.md b/packages/apps/docs/src/pages/docs/blogchain/2020/the-first-crypto-gas-station-is-now-on-kadenas-blockchain-2020-08-06.md new file mode 100644 index 0000000000..10bfae4ddb --- /dev/null +++ b/packages/apps/docs/src/pages/docs/blogchain/2020/the-first-crypto-gas-station-is-now-on-kadenas-blockchain-2020-08-06.md @@ -0,0 +1,188 @@ +--- +title: The First Crypto Gas Station is Now on Kadena’s Blockchain +description: + Here at Kadena, we’re focused on making blockchain as useful and usable as + possible. From our user-friendly and powerful smart contract language Pact, to + our wallet and developer environment Chainweaver, we’re creating products that + make the safety and global reach of blockchain accessible to everyone. Today, + we’re announcing that we’ve implemented the world’s first autonomous crypto + gas station on a public blockchain. +menu: The First Crypto Gas Station is Now on Kadena’s Blockchain +label: The First Crypto Gas Station is Now on Kadena’s Blockchain +publishDate: 2020-08-06 +author: Taylor Rolfe +layout: blog +--- + +![](/assets/blog/2020/1_yl4w71ccQB02X08t389QDg.webp) + +# The First Crypto Gas Station is Now on Kadena’s Blockchain + +Here at Kadena, we’re focused on making blockchain as useful and usable as +possible. From our user-friendly and powerful smart contract language Pact, to +our wallet and developer environment Chainweaver, we’re creating products that +make the safety and global reach of blockchain accessible to everyone. Today, +we’re announcing that we’ve implemented the world’s first autonomous crypto gas +station on a public blockchain. + +One of the biggest barriers to the broad use of decentralized applications +(dApps) is the requirement that participants must first onboard to a +cryptocurrency to pay gas for transaction costs. Before a user can interact with +a dApp, they first have to create a wallet, go to an exchange, and buy the +relevant cryptocurrency used as a unit of gas. These steps create a huge hurdle +to onboarding, one of the most critical steps to adoption. If creating an +account for an app is hard, nobody is going to use it. + +Kadena’s solution to this onboarding problem is gas stations. A gas station is +an account that exists only to fund gas payments on behalf of other users under +specific conditions. By having a gas station pay user onboarding costs, we +remove the friction of acquiring tokens in advance of signup, which allows a +user’s first interaction with a dApp to be as easy as filling out a web form. + +_Read more about how gas stations solve blockchain’s usability problem in +[this article](https://medium.com/kadena-io/users-shouldnt-pay-for-gas-4df989ec8236) +by Kadena Co-Founder and CEO Will Martino._ + +A successful gas station must be easy to use while remaining secure from bad +actors. Kadena’s smart contract language Pact enables this by supporting +multi-sig and a capability-based security model. In the context of gas stations, +“multi-sig” means that a different account can pay for gas within a single +transaction, and “capability-based” means that only approved operations are +allowed to access the gas station. Kadena is currently experimenting with live +implementations of gas stations, and early signals indicate that they are a +major leap forward in ease-of-use for blockchains. + +Gas stations are flexible, and their governance can be enforced in various ways +depending on the requirements. Kadena has open-sourced two types of gas stations +for community review and use: + +1. “Gas guard” type gas stations require that the transaction’s **gas limit** + falls within a threshold. + +2. “Gas payer” type gas stations require that **certain functions** are called + or that only **approved accounts** are permitted. + +## Example: “Gas guard” type gas station + +**Background**: The Kadena public blockchain scales by braiding together +multiple Bitcoin-like Proof of Work chains. Moving coins between two different +chains requires two gas payments; one on the transaction’s origin chain and one +on the transaction’s target chain. If a user does not have tokens on the target +chain to pay for gas, then their transaction cannot finish until they acquire +funds on the target chain to complete the cross-chain transfer. In an effort to +help users complete their cross-chain transfers on the target chain, Kadena has +deployed a gas station with a gas guard. + +**Implementation**: The gas station is an account with custom guards that +enforces (1) the gas limit, (2) the gas price, and (3) that its funds can only +be used for gas. This account is not guarded by a keyset, so anyone can access +these funds for free as long as they satisfy the guards. + +**User Interface**: Users can access this gas station in 3 simple steps — + +1. Go to this + [web page](https://kadena-community.github.io/kadena-transfer-js/xchain.html) + +2. Enter the transaction’s Request Key + +3. Press submit + +**Why it works**: Completing a cross-chain transfer on the target chain consumes +the least amount of gas of all transfer functions. The gas limit guard is set +for an amount that is below a standard transfer function but above the +cross-chain completion amount, so only the approved function can satisfy the +guard for using this gas station. All other transfer functions will exceed the +low gas limit and fail. + +**Key Takeaway**: Gas stations will ultimately be demand driven, and this tool +has already been used dozens of times to help KDA holders complete cross-chain +transfers that otherwise may have remained stuck for some time. This gas station +demonstrates one of the simpler ways to support existing users, but there are +also more interesting gas stations that can get built to drive adoption with new +users (as seen with the COVID-19 dApp example below). + +**Bonus**: A similar gas station that helps users complete cross-chain transfers +of KDA can also be seen on the multi-currency crypto wallet, ZelCore. + +![](/assets/blog/2020/1_NfLprkEnhzsul2fPmC_SjA.webp) + +## Example: “Gas payer” type gas station + +**Background**: To help demonstrate the significant opportunity enabled by gas +stations, Kadena developed a prototype COVID-19 test tracking application. This +coronavirus test tracking dApp creates a common data set of test records that is +secure, verifiable, and universally accessible in a privacy preserving manner. +All the power of blockchain is neatly packaged within a smart QR code that is +associated with COVID-19 test kits. The tests get scanned by healthcare +professionals to record data via web form. + +_Read more about the COVID-19 test tracker dApp +[here](https://github.com/kadena-io/covid19-platform) or watch this brief +animation._ + +[](https://www.youtube.com/watch?v=y7R6RbSptE0) + +**Implementation**: The gas station used by this dApp is configured with guards +that require (1) access from a **verified account** and (2) that **specific +functions** are used to redeem gas. As long as a user follows the provided +interface, these criteria get automatically satisfied. + +Here’s how it works: + +1. Test suppliers use an assigned keypair to generate unique QR codes which are + then printed and paired with each test kit (embedded within each QR code is + the access data for a **verified account**). + +2. During the test, medical staff scan the QR code using any smart device to + open a web form that collects and records patient data (submitting data + through this web form calls the **specific function** for redeeming gas). + +**User Interface**: There are three potential user groups that benefit from this +dApp, each of which may interface with a web form and/or a QR code. + +![](/assets/blog/2020/1_OQo0NHsWnN7VHBlslwthNA.webp) + +\* [Test Supplier web form](https://covid19-dashboard.chainweb.com/) + +\*\* [Medical Staff web form](https://covid19-test.chainweb.com/) + +**Why it matters**: Inconsistent test standards and fragmented access to data +are barriers to better management of COVID-19. A blockchain-based application +can deliver the necessary level of data security, transparency, aggregation, and +immutability. Gas stations dramatically simplify the dApp user experience, +making a blockchain-based application feasible for real-world use. + +**Key Takeaway**: The “Gas Payer” type of gas station has unique flexibility in +allowing a dApp to be user-friendly or even user-hidden while retaining the +powerful features of blockchain. In fact, gas stations are customizable with the +same functionality as any Pact smart contract. More advanced gas stations can +specify _who_ can use the gas, _when_ gas gets used, _why_ gas gets used, and +even _how many_ times an account can access its gas. + +## Gas Stations: An Innovative Concept that is Now Reality + +Gas stations will play a key role in bringing blockchain-based applications into +the hands of everyday people. When onboarding new users no longer requires +familiarity with blockchain, any user registration, or software installation, +then the user base of a dApp grows exponentially from *savvy token holders *to +_virtually anyone with an internet connection_. Given the potential reach, dApp +creators would be wise to offer pre-paid gas fees to their users as a low-cost +investment with high-value returns. + +The concept of subsidized gas payments is not new, but other platforms have +struggled to execute a well-supported implementation. Many platforms have fallen +short largely due to network limitations. For example, Ethereum is fundamentally +a single-signature platform, which requires added complexity at the smart +contract level to enable a different account to pay the gas for a transaction. +Bitcoin has scalability limits that make it unreasonable for gas station hosts +to sustain the high cost of gas fees. Uniquely, Kadena has the base-layer +scalability and the smart contract capabilities needed to make gas station +implementation viable. + +Kadena is a complete platform that gives developers the required resources to +simply build powerful and far-reaching blockchain applications. To support the +community, Kadena has a dedicated fund for developers that will cover gas +station startup costs. Developers that want to build dApps quickly and easily +can count on Kadena to support their launch and growth. Reach out to our team at +[info@kadena.io](mailto:info@kadena.io) if you would like to start building on +Kadena. diff --git a/packages/apps/docs/src/utils/index.ts b/packages/apps/docs/src/utils/index.ts index 4a8aae5447..8b9b7c6c5b 100644 --- a/packages/apps/docs/src/utils/index.ts +++ b/packages/apps/docs/src/utils/index.ts @@ -2,7 +2,6 @@ export * from './getLayout'; export * from './createSlug'; export * from './getParentHeading'; export * from './hasSameBasePath'; -export * from './isOneOfLayoutType'; export * from './isEmailValid'; export * from './createLinkFromMD'; export * from './author'; diff --git a/packages/apps/docs/src/utils/isOneOfLayoutType.ts b/packages/apps/docs/src/utils/isOneOfLayoutType.ts deleted file mode 100644 index 0d74f1b290..0000000000 --- a/packages/apps/docs/src/utils/isOneOfLayoutType.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ILayout, LayoutType } from '@/types/Layout'; -import { FC } from 'react'; - -export const isOneOfLayoutType = ( - layout?: FC | LayoutType, - ...args: string[] -): boolean => { - if (layout === undefined) return false; - if (typeof layout === 'string') { - return args.some((displayName) => displayName === layout.toLowerCase()); - } - - return args.some( - (displayName) => displayName === layout.displayName?.toLowerCase(), - ); -}; diff --git a/packages/apps/docs/src/utils/tests/isOneOfLayoutType.test.ts b/packages/apps/docs/src/utils/tests/isOneOfLayoutType.test.ts deleted file mode 100644 index 0195d87533..0000000000 --- a/packages/apps/docs/src/utils/tests/isOneOfLayoutType.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { isOneOfLayoutType } from '..'; - -import * as Layouts from '@/components/Layout'; - -describe('utils isOneOfLayoutType', () => { - it('return true when layout name is same as one of the following args', () => { - expect(isOneOfLayoutType('full', 'code', 'full')).toEqual(true); - - expect(isOneOfLayoutType('full', 'full')).toEqual(true); - }); - - it('return true when layout displayName is same as one of the following args', () => { - expect(isOneOfLayoutType(Layouts.Full, 'code', 'full')).toEqual(true); - - expect(isOneOfLayoutType(Layouts.Full, 'full')).toEqual(true); - }); - - it('return false when layout name is NOT same as one of the following args', () => { - expect(isOneOfLayoutType('full', 'code', 'landing')).toEqual(false); - }); - - it('return true when layout displayName is same as one of the following args', () => { - expect(isOneOfLayoutType(Layouts.Code, 'codeer', 'full')).toEqual(false); - }); -}); diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx index d81e99bd70..6d71fc5ae1 100644 --- a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx +++ b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx @@ -19,14 +19,13 @@ export const Menu: FC = () => { title={activeMenu.title} /> - ({ - title: '', // @todo: fix Type error: Property 'title' does not exist on type 'ISidebarSubMenuItem'. - children: , - })) ?? [] - } - /> + + {activeMenu.items?.map((item, index) => ( + + + + ))} + ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index a5d9a08a8d..2bebdf326c 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -1,11 +1,14 @@ import { sprinkles } from '@theme/sprinkles.css'; -import { style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@theme/vars.css'; +import { style } from '@vanilla-extract/css'; -export const accordionSectionClass = style([ +export const accordionSectionWrapperClass = style([ sprinkles({ + display: 'block', marginBottom: '$6', }), { + borderBottom: `1px solid ${vars.colors.$borderDefault}`, selectors: { '&:last-child': { marginBottom: 0, @@ -13,35 +16,31 @@ export const accordionSectionClass = style([ }, }, ]); -export const accordionTitleClass = style([ + +export const accordionButtonClass = style([ sprinkles({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', + background: 'none', + border: 'none', + color: '$neutral5', cursor: 'pointer', + display: 'flex', fontSize: '$base', fontWeight: '$medium', + justifyContent: 'space-between', + padding: 0, paddingBottom: '$2', + textAlign: 'left', + width: '100%', }), - { - transition: 'color 0.2s ease 0s', - borderBottom: '1px solid', - }, ]); -export const accordionTitleVariants = styleVariants({ - closed: [sprinkles({ color: '$negativeContrast' })], - opened: [sprinkles({ color: '$foreground' })], -}); -export const toggleButtonClass = style([ +export const accordionToggleIconClass = style([ sprinkles({ - border: 'none', - background: 'none', - color: 'inherit', + color: '$neutral5', }), { - transition: 'transform 0.2s ease 0s', transform: 'rotate(45deg)', + transition: 'transform 0.2s ease', selectors: { '&.isOpen': { transform: 'rotate(0deg)', @@ -49,9 +48,13 @@ export const toggleButtonClass = style([ }, }, ]); -export const accordionContentWrapperClass = style([ + +export const accordionContentClass = style([ sprinkles({ - paddingTop: '$2', + color: '$neutral5', + fontSize: '$base', + overflow: 'hidden', paddingBottom: '$2', + paddingTop: '$2', }), ]); diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index ba132ab57b..c15d6dade8 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -1,59 +1,117 @@ -import { Accordion, IAccordionProps } from './Accordion'; +import type { IAccordionProps, IAccordionSectionProps } from './'; +import { Accordion } from './'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -const meta: Meta<{} & IAccordionProps> = { +const generateSection = (i: number): IAccordionSectionProps => ({ + title: `Section title ${i}`, + children: ( +

    + This is the content for section {i}. The type of this content is not + restricted: any valid HTML content is allowed. +

    + ), + onOpen: () => console.log(`open section ${i}`), + onClose: () => console.log(`close section ${i}`), +}); +const generateSections = (n: number): IAccordionSectionProps[] => + Array.from({ length: n }, (d, i) => generateSection(i + 1)); + +const sampleSections: IAccordionSectionProps[] = generateSections(5); + +type StoryProps = { + sectionCount: number; + linked: boolean; + useCustomSections: boolean; + customSections: IAccordionSectionProps[]; +} & IAccordionProps; + +const meta: Meta = { title: 'Components/Accordion', + parameters: { + controls: { + hideNoControlsWarning: true, + sort: 'requiredFirst', + }, + docs: { + description: { + component: + 'The Accordion component allows the user to show and hide sections of content on a page.
    These sections can be expanded and collapsed by clicking the section headers.

    initialOpenSection
    This optional prop can be used on the Root element to set the initially opened section
    It defaults to `undefined` and has only been explcitly set to - 1 in the story code for demonstration purposes.

    Note: this variant of the Accordion component is meant to be used to display content. For Navigation purposes, please check the other variant within the Navigation subgroup.', + }, + }, + }, argTypes: { linked: { - type: 'boolean', - defaultValue: true, + control: { type: 'boolean' }, description: - 'Each section will close the other sections if they are linked', - control: { - type: 'boolean', + 'When linked, only one section can be open at a time. If a section is opened, the previously opened section will be closed.', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + sectionCount: { + control: { type: 'range', min: 1, max: sampleSections.length, step: 1 }, + description: 'Adjust sample section items count', + if: { arg: 'useCustomContent', neq: true }, + table: { + defaultValue: { summary: 3 }, + type: { summary: 'number' }, + }, + }, + useCustomSections: { + control: { type: 'boolean' }, + description: 'Define your own sections instead of the sample ones?', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, }, }, - sections: { + customSections: { defaultValue: [], - description: 'Accordion children', + description: 'Custom sections', control: { type: 'array', }, + if: { arg: 'useCustomSections', eq: true }, }, }, }; -export default meta; -type Story = StoryObj<{} & IAccordionProps>; +type IStory = StoryObj; -export const Dynamic: Story = { +export const Dynamic: IStory = { name: 'Accordion', args: { - linked: true, - sections: [ - { - title: First Section, - children:

    This is the content for the first section

    , - onOpen: () => console.log('open first item'), - onClose: () => console.log('close first item'), - }, - { - title: Second Section, - children:

    This is the content for the second section

    , - onOpen: () => console.log('open second item'), - onClose: () => console.log('close second item'), - }, - { - title: Third Section, - children:

    This is the content for the third section

    , - onOpen: () => console.log('open third item'), - onClose: () => console.log('close third item'), - }, - ], + linked: false, + sectionCount: 3, + customSections: sampleSections, }, - render: ({ linked, sections }) => { - return ; + render: ({ linked, sectionCount, useCustomSections, customSections }) => { + const sections = useCustomSections ? customSections : sampleSections; + return ( + + {sections + .slice(0, sectionCount) + .map( + ( + { title, children, onOpen, onClose }: IAccordionSectionProps, + index, + ) => ( + + {children} + + ), + )} + + ); }, }; + +export default meta; diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx deleted file mode 100644 index 5d68d71f3a..0000000000 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Accordion } from './Accordion'; - -import { fireEvent, render } from '@testing-library/react'; -import React from 'react'; - -// eslint-disable-next-line @kadena-dev/typedef-var -const sections = [ - { - title: 'Section 1', - children: 'Section 1 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, - { - title: 'Section 2', - children: 'Section 2 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, - { - title: 'Section 3', - children: 'Section 3 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, -]; - -beforeEach(() => { - jest.clearAllMocks(); -}); - -describe('Accordion', () => { - test('renders the correct number of sections', () => { - const { getAllByTestId } = render(); - const sectionElements = getAllByTestId('kda-accordion-title'); - expect(sectionElements.length).toBe(sections.length); - }); - - test('opens a linked section when clicked and closes others', () => { - const { getAllByTestId } = render( - , - ); - - const sectionTitles = Array.from(getAllByTestId('kda-accordion-title')); - - expect(sections[0].onOpen).toHaveBeenCalledTimes(0); - fireEvent.click(sectionTitles[0]); // Open Section 1 - expect(sections[0].onOpen).toHaveBeenCalledTimes(1); - - expect(sections[0].onClose).toHaveBeenCalledTimes(0); - fireEvent.click(sectionTitles[1]); // Close section 1 and Open Section 2 - expect(sections[0].onClose).toHaveBeenCalledTimes(1); - expect(sections[1].onOpen).toHaveBeenCalledTimes(1); - - expect(sectionTitles[0].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - expect(sectionTitles[1].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - expect(sectionTitles[2].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - }); - - test('allows multiple unlinked sections to be open at the same time', () => { - const { getAllByTestId } = render( - , - ); - - const sectionTitles = Array.from(getAllByTestId('kda-accordion-title')); - - expect(sections[0].onOpen).toHaveBeenCalledTimes(0); - expect(sections[1].onOpen).toHaveBeenCalledTimes(0); - expect(sections[2].onOpen).toHaveBeenCalledTimes(0); - - fireEvent.click(sectionTitles[0]); // Open Section 1 - fireEvent.click(sectionTitles[2]); // Open Section 3 - - expect(sections[0].onOpen).toHaveBeenCalledTimes(1); - expect(sections[1].onOpen).toHaveBeenCalledTimes(0); - expect(sections[2].onOpen).toHaveBeenCalledTimes(1); - - expect(sections[0].onClose).toHaveBeenCalledTimes(0); - expect(sections[1].onClose).toHaveBeenCalledTimes(0); - expect(sections[2].onClose).toHaveBeenCalledTimes(0); - - expect(sectionTitles[0].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - expect(sectionTitles[1].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - expect(sectionTitles[2].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - }); -}); diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index b3c3b56718..69eff11857 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,43 +1,54 @@ 'use client'; -import { AccordionSection, IAccordionSectionProps } from './AccordionSection'; +import { accordionContentClass } from './Accordion.css'; +import { IAccordionSectionProps } from '.'; -import React, { FC, useState } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React, { useEffect, useState } from 'react'; -export interface IAccordionProps { - sections: Omit[]; +export interface IAccordionRootProps { + children?: FunctionComponentElement[]; linked?: boolean; + initialOpenSection?: number; } -export const Accordion: FC = ({ sections, linked = true }) => { - const [expandedSections, setExpandedSections] = useState([]); - const handleOpen = (index: number): void => { - if (linked) setExpandedSections([index]); - else setExpandedSections([...expandedSections, index]); - }; - const handleClose = (index: number): void => { - setExpandedSections(expandedSections.filter((item) => item !== index)); - }; +export const AccordionRoot: FC = ({ + children, + linked = false, + initialOpenSection = undefined, +}) => { + const [openSections, setOpenSections] = useState([initialOpenSection]); - const isOpen = (index: number): boolean => expandedSections.includes(index); - - const handleToggle = (index: number): void => { - if (isOpen(index)) handleClose(index); - else handleOpen(index); - }; + useEffect(() => { + if (linked && openSections.length > 1) { + const lastOpen = openSections.pop() || undefined; + setOpenSections([lastOpen]); + } + }, [linked]); return ( -
    - {sections.map((section, index) => ( - handleToggle(index)} - key={String(section.title)} - > - {section.children} - - ))} +
    + {React.Children.map(children, (section, sectionIndex) => + React.cloneElement( + section as React.ReactElement< + HTMLElement | IAccordionSectionProps, + React.JSXElementConstructor + >, + { + index: sectionIndex, + isOpen: openSections.includes(sectionIndex), + className: accordionContentClass, + onClick: () => + openSections.includes(sectionIndex) + ? setOpenSections( + openSections.filter((i) => i !== sectionIndex), + ) + : setOpenSections( + linked ? [sectionIndex] : [...openSections, sectionIndex], + ), + }, + ), + )}
    ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index b38a781e8d..b61f017239 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -1,69 +1,61 @@ 'use client'; import { - accordionContentWrapperClass, - accordionSectionClass, - accordionTitleClass, - accordionTitleVariants, - toggleButtonClass, + accordionButtonClass, + accordionContentClass, + accordionSectionWrapperClass, + accordionToggleIconClass, } from './Accordion.css'; import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, useEffect, useRef } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IAccordionSectionProps { - title: React.ReactNode; - children: React.ReactNode; - isOpen: boolean; - onToggle: () => void; - onOpen?: () => void; + children?: React.ReactNode; + index?: number; + isOpen?: boolean; + onClick?: () => void; onClose?: () => void; + onOpen?: () => void; + title: string; } export const AccordionSection: FC = ({ - isOpen = false, - title, children, - onToggle, - onOpen, + isOpen, + onClick, onClose, + onOpen, + title, }) => { - const didMountRef = useRef(false); - - useEffect(() => { - if (!didMountRef.current) { - didMountRef.current = true; - return; + const handleClick = (): void => { + if (isOpen) { + onClose?.(); + } else { + onOpen?.(); } - - if (isOpen) onOpen?.(); - else onClose?.(); - }, [isOpen]); - + onClick?.(); + }; return ( -
    -
    - {title} - - -
    - - {isOpen &&
    {children}
    } -
    + size="xs" + /> + + + {isOpen && children && ( +
    {children}
    + )} + ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/index.ts b/packages/libs/react-ui/src/components/Accordion/index.ts index 397de139ee..9b33c56d68 100644 --- a/packages/libs/react-ui/src/components/Accordion/index.ts +++ b/packages/libs/react-ui/src/components/Accordion/index.ts @@ -1,3 +1,18 @@ -export { Accordion } from './Accordion'; -export type { IAccordionProps } from './Accordion'; -export type { IAccordionSectionProps } from './AccordionSection'; +import type { IAccordionRootProps } from './Accordion'; +import { AccordionRoot } from './Accordion'; +import type { IAccordionSectionProps } from './AccordionSection'; +import { AccordionSection } from './AccordionSection'; + +import type { FC } from 'react'; + +export { IAccordionRootProps, IAccordionSectionProps }; + +export interface IAccordionProps { + Root: FC; + Section: FC; +} + +export const Accordion: IAccordionProps = { + Root: AccordionRoot, + Section: AccordionSection, +}; diff --git a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx index 84fcf6c982..49d97b226d 100644 --- a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx +++ b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx @@ -4,8 +4,8 @@ import { ContentClass } from './stories.css'; import { Grid } from '@components/Grid'; import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; import { vars } from '@theme/vars.css'; +import React from 'react'; const selectOptions: (keyof typeof vars.sizes | undefined)[] = [ undefined, diff --git a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx index 648c47e58e..74528daa48 100644 --- a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx +++ b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx @@ -1,4 +1,3 @@ -import { Sprinkles, sprinkles } from '@theme/sprinkles.css'; import { containerColumnVariants, explicitColumnVariant, @@ -7,6 +6,7 @@ import { ResponsiveInputType, } from './Grid.css'; +import { Sprinkles, sprinkles } from '@theme/sprinkles.css'; import classNames from 'classnames'; import React, { FC, ReactNode } from 'react'; diff --git a/packages/libs/react-ui/src/components/Icon/IconWrapper.css.ts b/packages/libs/react-ui/src/components/Icon/IconWrapper.css.ts index 6142374ffa..3e1e98ba20 100644 --- a/packages/libs/react-ui/src/components/Icon/IconWrapper.css.ts +++ b/packages/libs/react-ui/src/components/Icon/IconWrapper.css.ts @@ -14,6 +14,7 @@ export const iconContainer = style([ ]); export const sizeVariants = styleVariants({ + xs: [sprinkles({ size: '$3' })], sm: [sprinkles({ size: '$4' })], md: [sprinkles({ size: '$6' })], lg: [sprinkles({ size: '$8' })], diff --git a/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx b/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx index 4b683db141..699aaff108 100644 --- a/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx +++ b/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx @@ -1,6 +1,5 @@ -import { useModal } from '@components/Modal'; - import { Button } from '@components/Button'; +import { useModal } from '@components/Modal'; import { Text } from '@components/Typography/Text/Text'; import React, { FC } from 'react'; diff --git a/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx b/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx index 9531e80f55..0fbe2fd1e8 100644 --- a/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx @@ -1,5 +1,6 @@ import { container } from './stories.css'; import { ITooltipProps, Tooltip } from './'; + import { IconButton } from '@components/IconButton'; import type { Meta, StoryObj } from '@storybook/react'; import React, { useRef } from 'react';