Improve UI (#3)
Co-authored-by: Gregório Granado Magalhães <greg.magalhaes@gmail.com>
This commit is contained in:
Simon Bihel
GitHub
parent
004ca9e764
commit
0287a60296
@ -15,6 +15,7 @@ RUN cargo chef cook --release --recipe-path recipe.json
|
||||
|
||||
FROM node:16-alpine as node_builder
|
||||
ADD --chown=node:node ./static /siwe-oidc/static
|
||||
ADD --chown=node:node ./js/ui/img /siwe-oidc/static/img
|
||||
ADD --chown=node:node ./js/ui /siwe-oidc/js/ui
|
||||
WORKDIR /siwe-oidc/js/ui
|
||||
RUN npm install
|
||||
|
||||
20
js/ui/.eslintrc.js
Normal file
20
js/ui/.eslintrc.js
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2019
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
6
js/ui/.prettierrc
Normal file
6
js/ui/.prettierrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120
|
||||
}
|
||||
4
js/ui/img/coinbase.svg
Normal file
4
js/ui/img/coinbase.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1024" height="1024" rx="512" fill="#0052FF"/>
|
||||
<path d="M512.147 692C412.697 692 332.146 611.45 332.146 512C332.146 412.55 412.697 332 512.147 332C601.247 332 675.197 396.95 689.447 482H870.797C855.497 297.2 700.846 152 512.147 152C313.396 152 152.146 313.25 152.146 512C152.146 710.75 313.396 872 512.147 872C700.846 872 855.497 726.8 870.797 542H689.297C675.047 627.05 601.247 692 512.147 692Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 535 B |
BIN
js/ui/img/modal_icon.png
Normal file
BIN
js/ui/img/modal_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
29
js/ui/img/swe-landing.svg
Normal file
29
js/ui/img/swe-landing.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M156.474 544.951C153.756 544.954 151.089 544.221 148.755 542.829C146.421 541.436 144.507 539.437 143.217 537.044L20.5949 319.469C19.3979 317.721 18.5771 315.743 18.1838 313.661C17.7904 311.579 17.8328 309.438 18.3095 307.374C18.7861 305.309 19.6865 303.367 20.9528 301.668C22.219 299.97 23.8236 298.553 25.6655 297.507C27.5075 296.462 29.5463 295.81 31.653 295.594C33.7596 295.378 35.8885 295.602 37.9042 296.252C39.9199 296.902 41.7783 297.963 43.3626 299.369C44.947 300.775 46.2228 302.495 47.1082 304.42L169.73 522.25C170.72 523.987 171.353 525.905 171.594 527.89C171.834 529.875 171.677 531.888 171.131 533.811C170.585 535.735 169.662 537.53 168.414 539.093C167.167 540.655 165.621 541.953 163.867 542.911C161.663 544.319 159.087 545.03 156.474 544.951ZM385.148 798.746L184.771 1133.14C184.326 1134.09 183.722 1134.95 182.986 1135.69L-118.598 1616.76C-119.969 1618.97 -121.884 1620.8 -124.159 1622.07C-126.435 1623.33 -128.995 1624 -131.599 1624C-134.203 1624 -136.764 1623.33 -139.039 1622.07C-141.315 1620.8 -143.229 1618.97 -144.601 1616.76L-653.191 805.378C-678.017 765.902 -691.443 720.322 -691.983 673.684C-692.523 627.045 -680.156 581.167 -656.25 541.125L-144.856 -317.442C-143.316 -320.067 -141.029 -322.173 -138.287 -323.491C-135.545 -324.809 -132.472 -325.279 -129.462 -324.841C-126.452 -324.402 -123.641 -323.076 -121.388 -321.032C-119.135 -318.987 -117.542 -316.316 -116.813 -313.361L387.952 540.36C411.356 579.495 423.48 624.346 422.985 669.949C422.49 715.552 409.395 760.129 385.148 798.746ZM-23.5085 816.091L70.8164 661.008C77.1088 650.735 80.5865 638.985 80.8998 626.941C81.2131 614.896 78.3513 602.981 72.6014 592.394L-116.303 274.832V372.524L-4.13336 568.673C3.76965 582.48 7.86383 598.141 7.72943 614.051C7.59503 629.962 3.23682 645.551 -4.89825 659.223L-30.3915 701.82C-31.7472 704.118 -33.6891 706.014 -36.0186 707.314C-38.348 708.614 -40.9811 709.271 -43.6479 709.217C-46.3419 709.3 -49.0011 708.591 -51.2958 707.176C-53.0419 706.176 -54.5695 704.835 -55.7883 703.233C-57.0071 701.631 -57.8925 699.801 -58.3917 697.851C-58.8909 695.901 -58.9941 693.87 -58.6948 691.879C-58.3956 689.888 -57.7001 687.978 -56.6496 686.26L-31.1564 643.409C-25.8151 634.436 -22.9526 624.205 -22.863 613.762C-22.7734 603.319 -25.4594 593.04 -30.6461 583.977L-116.303 434.251V587.803C-116.395 648.678 -97.8936 708.128 -63.2775 758.19L-23.5085 816.091ZM152.65 1126.51L-88.5161 775.535C-126.658 720.38 -147.029 654.874 -146.895 587.803V-253.93L-629.991 556.94C-651.014 592.108 -661.881 632.418 -661.386 673.393C-660.891 714.369 -649.053 754.404 -627.187 789.054L-131.599 1579.77L152.65 1126.51ZM361.694 556.174L-116.303 -252.399V-166.951L179.927 356.199C180.933 357.941 181.586 359.863 181.848 361.857C182.11 363.851 181.977 365.878 181.456 367.82C180.935 369.763 180.037 371.583 178.812 373.178C177.587 374.773 176.061 376.111 174.319 377.115C171.965 378.385 169.345 379.084 166.671 379.155C163.984 379.157 161.345 378.451 159.017 377.108C156.69 375.764 154.758 373.831 153.415 371.503L-116.303 -104.969V20.016L17.2807 248.559C18.3311 250.276 19.0266 252.187 19.3259 254.178C19.6251 256.169 19.5225 258.199 19.0233 260.149C18.5242 262.1 17.6387 263.93 16.4199 265.532C15.201 267.134 13.6735 268.475 11.9275 269.475C9.62134 270.863 6.97009 271.57 4.27948 271.516C1.61279 271.57 -1.02032 270.913 -3.34979 269.613C-5.67926 268.313 -7.62115 266.417 -8.97681 264.119L-116.303 80.4678V215.655L98.8589 576.835V577.345C107.211 592.723 111.394 610.02 110.992 627.517C110.589 645.014 105.615 662.101 96.5648 677.078L-5.15283 843.894L40.4797 909.957L180.692 681.159C189.36 666.875 201.852 639.072 186.556 613.055L174.064 591.374C173.058 589.632 172.406 587.71 172.144 585.716C171.881 583.722 172.014 581.696 172.535 579.753C173.056 577.811 173.955 575.99 175.179 574.395C176.404 572.8 177.931 571.462 179.673 570.458C183.203 568.494 187.359 567.981 191.261 569.028C195.162 570.076 198.504 572.601 200.577 576.07L213.069 597.496C229.894 626.829 227.855 663.049 206.695 697.228L59.3444 937.505L106.252 1005.61L284.195 718.144C294.363 701.633 299.894 682.685 300.208 663.294C300.523 643.903 295.607 624.786 285.979 607.954L186.556 435.016C184.528 431.498 183.979 427.318 185.03 423.396C186.082 419.473 188.648 416.129 192.164 414.1C195.68 412.07 199.858 411.522 203.778 412.574C207.698 413.626 211.04 416.194 213.069 419.712L312.492 592.649C324.846 614.279 331.152 638.838 330.749 663.747C330.345 688.656 323.246 712.996 310.198 734.214L125.117 1033.16L169.73 1098.2L358.38 782.677C358.635 782.677 358.635 782.677 358.635 782.422C379.971 748.669 391.551 709.664 392.09 669.73C392.63 629.797 382.11 590.493 361.694 556.174Z"
|
||||
fill="url(#paint0_linear)"
|
||||
/>
|
||||
<path
|
||||
opacity="0.4"
|
||||
d="M1859.47 168.951C1856.76 168.954 1854.09 168.221 1851.75 166.829C1849.42 165.436 1847.51 163.437 1846.22 161.044L1723.59 -56.5312C1722.4 -58.2791 1721.58 -60.2568 1721.18 -62.3387C1720.79 -64.4208 1720.83 -66.5616 1721.31 -68.6262C1721.79 -70.6907 1722.69 -72.6335 1723.95 -74.3319C1725.22 -76.0303 1726.82 -77.4471 1728.67 -78.4927C1730.51 -79.5382 1732.55 -80.1899 1734.65 -80.4061C1736.76 -80.6221 1738.89 -80.3979 1740.9 -79.7481C1742.92 -79.0983 1744.78 -78.037 1746.36 -76.631C1747.95 -75.225 1749.22 -73.5052 1750.11 -71.5804L1872.73 146.25C1873.72 147.987 1874.35 149.905 1874.59 151.89C1874.83 153.875 1874.68 155.888 1874.13 157.811C1873.59 159.735 1872.66 161.53 1871.41 163.093C1870.17 164.655 1868.62 165.953 1866.87 166.911C1864.66 168.319 1862.09 169.03 1859.47 168.951ZM2088.15 422.746L1887.77 757.144C1887.33 758.09 1886.72 758.952 1885.99 759.695L1584.4 1240.76C1583.03 1242.97 1581.12 1244.8 1578.84 1246.07C1576.57 1247.33 1574 1248 1571.4 1248C1568.8 1248 1566.24 1247.33 1563.96 1246.07C1561.69 1244.8 1559.77 1242.97 1558.4 1240.76L1049.81 429.378C1024.98 389.902 1011.56 344.322 1011.02 297.684C1010.48 251.045 1022.84 205.167 1046.75 165.125L1558.14 -693.442C1559.68 -696.067 1561.97 -698.173 1564.71 -699.491C1567.46 -700.809 1570.53 -701.279 1573.54 -700.841C1576.55 -700.402 1579.36 -699.076 1581.61 -697.032C1583.87 -694.987 1585.46 -692.316 1586.19 -689.361L2090.95 164.36C2114.36 203.495 2126.48 248.346 2125.99 293.949C2125.49 339.552 2112.39 384.129 2088.15 422.746ZM1679.49 440.091L1773.82 285.008C1780.11 274.735 1783.59 262.985 1783.9 250.941C1784.21 238.896 1781.35 226.981 1775.6 216.394L1586.7 -101.168V-3.47638L1698.87 192.673C1706.77 206.48 1710.86 222.141 1710.73 238.051C1710.6 253.962 1706.24 269.551 1698.1 283.223L1672.61 325.82C1671.25 328.118 1669.31 330.014 1666.98 331.314C1664.65 332.614 1662.02 333.271 1659.35 333.217C1656.66 333.3 1654 332.591 1651.7 331.176C1649.96 330.176 1648.43 328.835 1647.21 327.233C1645.99 325.631 1645.11 323.801 1644.61 321.851C1644.11 319.901 1644.01 317.87 1644.31 315.879C1644.6 313.888 1645.3 311.978 1646.35 310.26L1671.84 267.409C1677.18 258.436 1680.05 248.205 1680.14 237.762C1680.23 227.319 1677.54 217.04 1672.35 207.977L1586.7 58.2506V211.803C1586.61 272.678 1605.11 332.128 1639.72 382.19L1679.49 440.091ZM1855.65 750.512L1614.48 399.535C1576.34 344.38 1555.97 278.874 1556.1 211.803V-629.93L1073.01 180.94C1051.99 216.108 1041.12 256.418 1041.61 297.393C1042.11 338.369 1053.95 378.404 1075.81 413.054L1571.4 1203.77L1855.65 750.512ZM2064.69 180.174L1586.7 -628.399V-542.951L1882.93 -19.8009C1883.93 -18.0594 1884.59 -16.1368 1884.85 -14.1428C1885.11 -12.1487 1884.98 -10.1224 1884.46 -8.17981C1883.94 -6.2373 1883.04 -4.41669 1881.81 -2.82184C1880.59 -1.22699 1879.06 0.110657 1877.32 1.11475C1874.96 2.3847 1872.34 3.08374 1869.67 3.1554C1866.98 3.15717 1864.34 2.45087 1862.02 1.1076C1859.69 -0.235718 1857.76 -2.1687 1856.41 -4.4967L1586.7 -480.969V-355.984L1720.28 -127.441C1721.33 -125.724 1722.03 -123.813 1722.33 -121.822C1722.63 -119.831 1722.52 -117.801 1722.02 -115.851C1721.52 -113.9 1720.64 -112.07 1719.42 -110.468C1718.2 -108.866 1716.67 -107.525 1714.93 -106.525C1712.62 -105.137 1709.97 -104.43 1707.28 -104.484C1704.61 -104.43 1701.98 -105.087 1699.65 -106.387C1697.32 -107.687 1695.38 -109.583 1694.02 -111.881L1586.7 -295.532V-160.345L1801.86 200.835V201.345C1810.21 216.723 1814.39 234.02 1813.99 251.517C1813.59 269.014 1808.62 286.101 1799.56 301.078L1697.85 467.894L1743.48 533.957L1883.69 305.159C1892.36 290.875 1904.85 263.072 1889.56 237.055L1877.06 215.374C1876.06 213.632 1875.41 211.71 1875.14 209.716C1874.88 207.722 1875.01 205.696 1875.54 203.753C1876.06 201.811 1876.95 199.99 1878.18 198.395C1879.4 196.8 1880.93 195.462 1882.67 194.458C1886.2 192.494 1890.36 191.981 1894.26 193.028C1898.16 194.076 1901.5 196.601 1903.58 200.07L1916.07 221.496C1932.89 250.829 1930.85 287.049 1909.7 321.228L1762.34 561.505L1809.25 629.609L1987.2 342.144C1997.36 325.633 2002.89 306.685 2003.21 287.294C2003.52 267.903 1998.61 248.786 1988.98 231.954L1889.56 59.0159C1887.53 55.4982 1886.98 51.3182 1888.03 47.3958C1889.08 43.4733 1891.65 40.1295 1895.16 38.1C1898.68 36.0705 1902.86 35.5216 1906.78 36.574C1910.7 37.6263 1914.04 40.194 1916.07 43.7117L2015.49 216.649C2027.85 238.279 2034.15 262.838 2033.75 287.747C2033.35 312.656 2026.25 336.996 2013.2 358.214L1828.12 657.156L1872.73 722.199L2061.38 406.677C2061.63 406.677 2061.64 406.677 2061.64 406.422C2082.97 372.669 2094.55 333.664 2095.09 293.73C2095.63 253.797 2085.11 214.493 2064.69 180.174Z"
|
||||
fill="url(#paint1_linear)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="-274" y1="-147" x2="-794.437" y2="1772.63" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0376269" stop-color="#04D2CA" />
|
||||
<stop offset="0.159305" stop-color="#6A49E4" />
|
||||
<stop offset="0.506479" stop-color="#0F0F0F" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="1429" y1="-523" x2="908.563" y2="1396.63" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0376269" stop-color="#04D2CA" />
|
||||
<stop offset="0.159305" stop-color="#6A49E4" />
|
||||
<stop offset="0.506479" stop-color="#0F0F0F" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect width="1440" height="900" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.9 KiB |
55368
js/ui/package-lock.json
generated
55368
js/ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,59 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"devDependencies": {
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"@types/node": "^14.11.1",
|
||||
"assert": "^2.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"dotenv-webpack": "^7.0.3",
|
||||
"https-browserify": "^1.0.0",
|
||||
"mini-css-extract-plugin": "^1.3.4",
|
||||
"os-browserify": "^0.3.0",
|
||||
"process": "^0.11.10",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"svelte": "^3.31.2",
|
||||
"svelte-check": "^1.0.46",
|
||||
"svelte-loader": "^3.0.0",
|
||||
"svelte-preprocess": "^4.3.0",
|
||||
"ts-loader": "^8.0.4",
|
||||
"tslib": "^2.0.1",
|
||||
"typescript": "^4.0.3",
|
||||
"webpack": "^5.16.0",
|
||||
"webpack-cli": "^4.4.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"dev": "webpack serve --content-base public",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@portis/web3": "^4.0.6",
|
||||
"@spruceid/siwe-web3modal": "^0.1.5",
|
||||
"@toruslabs/torus-embed": "^1.18.3",
|
||||
"@walletconnect/web3-provider": "^1.6.6",
|
||||
"fortmatic": "^2.2.1",
|
||||
"walletlink": "^2.2.8"
|
||||
}
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"devDependencies": {
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"@types/node": "^14.11.1",
|
||||
"@typescript-eslint/eslint-plugin": "^4.21.0",
|
||||
"@typescript-eslint/parser": "^4.21.0",
|
||||
"assert": "^2.0.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"base64-loader": "^1.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"cssnano": "^5.0.8",
|
||||
"dotenv-webpack": "^7.0.3",
|
||||
"eslint": "^7.23.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^3.1.2",
|
||||
"https-browserify": "^1.0.0",
|
||||
"mini-css-extract-plugin": "^1.3.4",
|
||||
"os-browserify": "^0.3.0",
|
||||
"postcss": "^8.2.8",
|
||||
"postcss-load-config": "^3.0.1",
|
||||
"postcss-loader": "^5.2.0",
|
||||
"precss": "^4.0.0",
|
||||
"prettier": "^2.2.1",
|
||||
"prettier-plugin-svelte": "^2.2.0",
|
||||
"process": "^0.11.10",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.2.0",
|
||||
"svelte": "^3.31.2",
|
||||
"svelte-check": "^1.0.46",
|
||||
"svelte-loader": "^3.0.0",
|
||||
"svelte-preprocess": "^4.3.0",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"tailwindcss": "^2.0.4",
|
||||
"ts-loader": "^8.0.4",
|
||||
"tslib": "^2.0.1",
|
||||
"typescript": "^4.0.3",
|
||||
"webpack": "^5.16.0",
|
||||
"webpack-cli": "^4.4.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack",
|
||||
"dev": "webpack serve --content-base ../../static --port 9080",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@portis/web3": "^4.0.6",
|
||||
"@spruceid/siwe-web3modal": "^0.1.5",
|
||||
"@toruslabs/torus-embed": "^1.18.3",
|
||||
"@walletconnect/web3-provider": "^1.6.6",
|
||||
"fortmatic": "^2.2.1",
|
||||
"walletlink": "^2.2.8"
|
||||
}
|
||||
}
|
||||
|
||||
21
js/ui/postcss.config.js
Normal file
21
js/ui/postcss.config.js
Normal file
@ -0,0 +1,21 @@
|
||||
const tailwindcss = require('tailwindcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
|
||||
const mode = process.env.NODE_ENV;
|
||||
const dev = mode === 'development';
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after,
|
||||
autoprefixer(),
|
||||
!dev &&
|
||||
cssnano({
|
||||
preset: 'default',
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import Portis from "@portis/web3";
|
||||
import { Client, SiweSession } from "@spruceid/siwe-web3modal";
|
||||
import Torus from "@toruslabs/torus-embed";
|
||||
import WalletConnectProvider from "@walletconnect/web3-provider";
|
||||
import Fortmatic from "fortmatic";
|
||||
import WalletLink from "walletlink";
|
||||
import Portis from '@portis/web3';
|
||||
import { Client } from '@spruceid/siwe-web3modal';
|
||||
import Torus from '@toruslabs/torus-embed';
|
||||
import WalletConnectProvider from '@walletconnect/web3-provider';
|
||||
import Fortmatic from 'fortmatic';
|
||||
import WalletLink from 'walletlink';
|
||||
|
||||
// TODO: REMOVE DEFAULTS:
|
||||
// main.ts will parse the params from the server
|
||||
@ -14,24 +14,24 @@
|
||||
export let state: string;
|
||||
export let oidc_nonce: string;
|
||||
|
||||
let uri: string = window.location.href.split("?")[0];
|
||||
let uri: string = window.location.href.split('?')[0];
|
||||
|
||||
// Could be exposed in the future.
|
||||
export let useENS: boolean = true;
|
||||
|
||||
$: status = "Not Logged In";
|
||||
$: status = 'Not Logged In';
|
||||
|
||||
let client = new Client({
|
||||
session: {
|
||||
domain,
|
||||
uri,
|
||||
useENS,
|
||||
version: "1",
|
||||
version: '1',
|
||||
// TODO: Vet this as the default statement.
|
||||
statement: "Sign-In With Ethereum OpenID-Connect",
|
||||
statement: 'Sign-In With Ethereum OpenID-Connect',
|
||||
},
|
||||
modal: {
|
||||
theme: "dark",
|
||||
theme: 'dark',
|
||||
providerOptions: {
|
||||
walletconnect: {
|
||||
package: WalletConnectProvider,
|
||||
@ -55,30 +55,26 @@
|
||||
key: process.env.FORTMATIC_KEY,
|
||||
},
|
||||
},
|
||||
"custom-coinbase": {
|
||||
'custom-coinbase': {
|
||||
display: {
|
||||
logo: "img/coinbase.svg",
|
||||
name: "Coinbase",
|
||||
description: "Scan with WalletLink to connect",
|
||||
logo: 'img/coinbase.svg',
|
||||
name: 'Coinbase',
|
||||
description: 'Scan with WalletLink to connect',
|
||||
},
|
||||
options: {
|
||||
appName: "Sign-In with Ethereum",
|
||||
appName: 'Sign-In with Ethereum',
|
||||
networkUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
|
||||
chainId: 1,
|
||||
darkMode: false,
|
||||
},
|
||||
package: WalletLink,
|
||||
connector: async (_, options) => {
|
||||
const { appName, networkUrl, chainId, darkMode } =
|
||||
options;
|
||||
const { appName, networkUrl, chainId, darkMode } = options;
|
||||
const walletLink = new WalletLink({
|
||||
appName,
|
||||
darkMode,
|
||||
});
|
||||
const provider = walletLink.makeWeb3Provider(
|
||||
networkUrl,
|
||||
chainId
|
||||
);
|
||||
const provider = walletLink.makeWeb3Provider(networkUrl, chainId);
|
||||
await provider.enable();
|
||||
return provider;
|
||||
},
|
||||
@ -87,32 +83,209 @@
|
||||
},
|
||||
});
|
||||
|
||||
let oidc_nonce_param = "";
|
||||
if (oidc_nonce != "") {
|
||||
let oidc_nonce_param = '';
|
||||
if (oidc_nonce != '') {
|
||||
oidc_nonce_param = `&oidc_nonce=${oidc_nonce}`;
|
||||
}
|
||||
client.on("signIn", (result) => {
|
||||
client.on('signIn', (result) => {
|
||||
console.log(result);
|
||||
window.location.replace(`/sign_in?redirect_uri=${encodeURI(redirect)}&state=${encodeURI(state)}${encodeURI(oidc_nonce_param)}`);
|
||||
window.location.replace(
|
||||
`/sign_in?redirect_uri=${encodeURI(redirect)}&state=${encodeURI(state)}${encodeURI(oidc_nonce_param)}`,
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<h2>Sign-In With Ethereum</h2>
|
||||
<p>{status}</p>
|
||||
<!-- TODO: Add copy / info about who is requesting here. -->
|
||||
<div
|
||||
class="bg-no-repeat bg-cover bg-center bg-swe-landing font-satoshi bg-gray flex-grow w-full h-screen items-center flex justify-center flex-wrap flex-col"
|
||||
style="background-image: url('img/swe-landing.svg');"
|
||||
>
|
||||
<div class="w-96 text-center bg-white rounded-20 text-grey flex h-96 flex-col p-12 shadow-lg shadow-white">
|
||||
<img height="72" width="72" class="self-center mb-8" src="img/modal_icon.png" alt="Ethereum logo" />
|
||||
<h5>Welcome</h5>
|
||||
<span class="text-xs">Sign-In with Ethereum to continue to your application</span>
|
||||
|
||||
<button
|
||||
class="h-12 border hover:scale-105 justify-evenly shadow-xl border-white mt-auto duration-100 ease-in-out transition-all transform flex items-center"
|
||||
on:click={() => {
|
||||
client.signIn(nonce).catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
stroke-linejoin="round"
|
||||
stroke-miterlimit="1.41421"
|
||||
viewBox="170 30 220 350"
|
||||
class="w-6 h-8"
|
||||
>
|
||||
<g fill-rule="nonzero" transform="matrix(.781253 0 0 .781253 180 37.1453)">
|
||||
<path d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z" fill="#343434" /><path
|
||||
d="m127.962 0-127.962 212.32 127.962 75.639v-133.801z"
|
||||
fill="#8c8c8c"
|
||||
/>
|
||||
<path d="m127.961 312.187-1.575 1.92v98.199l1.575 4.601 128.038-180.32z" fill="#3c3c3b" /><path
|
||||
d="m127.962 416.905v-104.72l-127.962-75.6z"
|
||||
fill="#8c8c8c"
|
||||
/>
|
||||
<path d="m127.961 287.958 127.96-75.637-127.96-58.162z" fill="#141414" /><path
|
||||
d="m.001 212.321 127.96 75.637v-133.799z"
|
||||
fill="#393939"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<p class="font-bold">Sign-In with Ethereum</p>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style global lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.tooltip {
|
||||
@apply invisible absolute;
|
||||
}
|
||||
|
||||
.has-tooltip:hover .tooltip {
|
||||
@apply visible z-50;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 18px;
|
||||
background: #ecf2fe;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
@apply font-satoshi;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-extrabold;
|
||||
@apply font-satoshi;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 76px;
|
||||
line-height: 129px;
|
||||
letter-spacing: -4.5%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 66px;
|
||||
line-height: 101px;
|
||||
letter-spacing: -3%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 52px;
|
||||
line-height: 80px;
|
||||
letter-spacing: -1.5%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 48px;
|
||||
line-height: 63px;
|
||||
letter-spacing: -1%;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 32px;
|
||||
line-height: 49px;
|
||||
letter-spacing: -0.5%;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 24px;
|
||||
line-height: 37px;
|
||||
letter-spacing: -0.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #04d2ca;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
font-family: 'Satoshi';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap; /* Since CSS 2.1 */
|
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
}
|
||||
|
||||
.web3modal-modal-lightbox {
|
||||
z-index: 30 !important;
|
||||
}
|
||||
|
||||
.walletconnect-modal__base {
|
||||
background-color: #273137 !important;
|
||||
}
|
||||
|
||||
.walletconnect-qrcode__text {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.walletconnect-modal__mobile__toggle {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.walletconnect-qrcode__image {
|
||||
border: 24px solid white !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.walletconnect-modal__base__row:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.walletconnect-modal__mobile__toggle_selector {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
Custom scrollbar settings
|
||||
*/
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: #888;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
border-radius: 8px;
|
||||
width: 6px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.grecaptcha-badge {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
180
js/ui/tailwind.config.cjs
Normal file
180
js/ui/tailwind.config.cjs
Normal file
@ -0,0 +1,180 @@
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
purge: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
'4k': '2048px',
|
||||
retina: '2560px',
|
||||
},
|
||||
opacity: {
|
||||
999: '0.999',
|
||||
},
|
||||
fontSize: {
|
||||
display: '5.625rem',
|
||||
'display-mobile': '4.4rem',
|
||||
body: '1rem',
|
||||
'body-large': '1.125rem',
|
||||
'body-medium': '0.875rem',
|
||||
'body-small': '0.75rem',
|
||||
'body-xl': '1.5rem',
|
||||
'body-xxl': '1.625rem',
|
||||
quote: '2rem',
|
||||
overline: '0.875rem',
|
||||
'overline-small': '0.75rem',
|
||||
caption: '0.875rem',
|
||||
'caption-bold': '1rem',
|
||||
button: '0.875rem',
|
||||
'button-small': '0.675rem',
|
||||
link: '1rem',
|
||||
'link-small': '0.875rem',
|
||||
'link-tiny': '0.75rem',
|
||||
},
|
||||
margin: {
|
||||
'1/2': '0.125rem',
|
||||
22: '5.5rem',
|
||||
128: '40rem',
|
||||
},
|
||||
colors: {
|
||||
purple: {
|
||||
DEFAULT: '#6A49E4',
|
||||
},
|
||||
cyan: {
|
||||
DEFAULT: '#00D3DD',
|
||||
},
|
||||
blue: {
|
||||
350: '#1DA1F2',
|
||||
550: '#3A83A3',
|
||||
},
|
||||
gray: {
|
||||
350: '#AAAAAA',
|
||||
370: '#A0A4A8',
|
||||
650: '#3E3E3E',
|
||||
DEFAULT: '#212121',
|
||||
'primary-03': '#262626',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
poppins: ['Poppins'],
|
||||
satoshi: ['Satoshi'],
|
||||
inter: ['Inter'],
|
||||
inconsolata: ['Inconsolata'],
|
||||
rajdhani: ['Rajdhani'],
|
||||
roboto: ['Roboto'],
|
||||
},
|
||||
borderRadius: {
|
||||
20: '20px',
|
||||
40: '40px',
|
||||
xl: '50px',
|
||||
big: '20px',
|
||||
giant: '70px',
|
||||
full: '100%',
|
||||
},
|
||||
minWidth: {
|
||||
button: '232px',
|
||||
},
|
||||
minHeight: {
|
||||
256: '50rem',
|
||||
'half-screen': '50vh',
|
||||
96: '24rem',
|
||||
},
|
||||
maxHeight: {
|
||||
fhd: '62.5rem',
|
||||
'screen-9/10': '90vh',
|
||||
'screen-7/8': '87.5vh',
|
||||
'screen-5/6': '83vh',
|
||||
'screen-4/5': '80vh',
|
||||
'screen-3/4': '75vh',
|
||||
'screen-7/10': '70vh',
|
||||
'screen-2/3': '66.6vh',
|
||||
'screen-5/8': '62.5vh',
|
||||
'screen-3/5': '60vh',
|
||||
'screen-1/2': '50vh',
|
||||
'screen-2/5': '40vh',
|
||||
'screen-3/8': '37.5vh',
|
||||
'screen-1/3': '33.3vh',
|
||||
'screen-3/10': '30vh',
|
||||
'screen-1/4': '25vh',
|
||||
'screen-1/5': '20vh',
|
||||
'screen-1/6': '16.6vh',
|
||||
'screen-1/8': '12.5vh',
|
||||
'screen-1/10': '10vh',
|
||||
},
|
||||
height: {
|
||||
100: '26.5rem',
|
||||
120: '38.5rem',
|
||||
128: '40rem',
|
||||
144: '45rem',
|
||||
256: '50rem',
|
||||
'half-screen': '50vh',
|
||||
},
|
||||
width: {
|
||||
100: '26.5rem',
|
||||
120: '38.5rem',
|
||||
128: '40rem',
|
||||
144: '45rem',
|
||||
256: '50rem',
|
||||
},
|
||||
boxShadow: {
|
||||
2: '-59px 27px 63px 0px #000000CC',
|
||||
},
|
||||
},
|
||||
linearBorderGradients: {
|
||||
directions: {
|
||||
t: 'to top',
|
||||
tr: 'to top right',
|
||||
r: 'to right',
|
||||
br: 'to bottom right',
|
||||
b: 'to bottom',
|
||||
bl: 'to bottom left',
|
||||
l: 'to left',
|
||||
tl: 'to top left',
|
||||
117: '117deg',
|
||||
187: '187.33deg',
|
||||
213: '213.5deg',
|
||||
209: '209.87deg',
|
||||
208: '208.78deg',
|
||||
},
|
||||
colors: {
|
||||
button: ['#04D2CA 30.98%', '#6A49E4 98.42%'],
|
||||
'01': ['#13E2BB 32.66%', '#4C49E4 64.17%', '#9363F9 97.71%'],
|
||||
'02': ['#3376E7 31.2%', '#976EF1 71.49%'],
|
||||
'03': ['#4C49E4 41.05%', '#3376E7 58.35%', '#26F3A8 77.95%'],
|
||||
'04': ['#13E2BB 32.66%', '#9363F9 97.71%'],
|
||||
'05': ['#14ACB6 31.2%', '#7141D7 71.49%'],
|
||||
'06': ['#26F3A8 41.05%', '#3376E7 77.95%'],
|
||||
'07': ['#235465 -8.1%', '#8EC95F 50.77%', '#8E63DB 110.89%'],
|
||||
'08': ['#9363F9 30.11%', '#E55A54 97.41%'],
|
||||
'09': ['#14ACB6 31.2%', '#7141D7 71.49%'],
|
||||
10: ['#499DEB 31.2%', '#541D9A 70.86%'],
|
||||
},
|
||||
background: {
|
||||
black: '#000000',
|
||||
light: '#0E0E0E',
|
||||
gray: '#212121',
|
||||
transparent: 'transparent',
|
||||
},
|
||||
},
|
||||
flex: {
|
||||
'9/10': '0 90%',
|
||||
'7/8': '0 87.5%',
|
||||
'5/6': '0 83%',
|
||||
'4/5': '0 80%',
|
||||
'3/4': '0 75%',
|
||||
'7/10': '0 70%',
|
||||
'2/3': '0 66.6%',
|
||||
'5/8': '0 62.5%',
|
||||
'3/5': '0 60%',
|
||||
'1/2': '0 50%',
|
||||
'2/5': '0 40%',
|
||||
'3/8': '0 37.5%',
|
||||
'1/3': '0 33.3%',
|
||||
'3/10': '0 30%',
|
||||
'1/4': '0 25%',
|
||||
'1/5': '0 20%',
|
||||
'1/6': '0 16.6%',
|
||||
'1/8': '0 12.5%',
|
||||
'1/10': '0 10%',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,7 +1,6 @@
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
const sveltePreprocess = require('svelte-preprocess');
|
||||
const Dotenv = require('dotenv-webpack');
|
||||
const webpack = require('webpack');
|
||||
|
||||
const mode = process.env.NODE_ENV || 'development';
|
||||
@ -37,26 +36,40 @@ module.exports = {
|
||||
chunkFilename: '[name].[id].js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
dev: !prod
|
||||
},
|
||||
emitCss: prod,
|
||||
hotReload: !prod,
|
||||
preprocess: sveltePreprocess({ sourceMap: !prod })
|
||||
}
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
options: {
|
||||
compilerOptions: {
|
||||
dev: !prod
|
||||
},
|
||||
emitCss: prod,
|
||||
hotReload: !prod,
|
||||
preprocess: sveltePreprocess({
|
||||
sourceMap: !prod,
|
||||
postcss: true,
|
||||
}),
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'svg-url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
@ -82,7 +95,6 @@ module.exports = {
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css'
|
||||
}),
|
||||
new Dotenv(),
|
||||
],
|
||||
devtool: prod ? false : 'source-map',
|
||||
devServer: {
|
||||
|
||||
13
src/main.rs
13
src/main.rs
@ -240,7 +240,7 @@ async fn token(
|
||||
.await
|
||||
.map_err(|e| anyhow!("Failed to set kv: {}", e))?;
|
||||
|
||||
let access_token = AccessToken::new(form.code.clone());
|
||||
let access_token = AccessToken::new(form.code.to_string().clone());
|
||||
let core_id_token = CoreIdTokenClaims::new(
|
||||
IssuerUrl::from_url(config.base_url),
|
||||
vec![Audience::new(form.client_id.clone())],
|
||||
@ -658,6 +658,17 @@ async fn main() {
|
||||
},
|
||||
),
|
||||
)
|
||||
.nest(
|
||||
"/img",
|
||||
service_method_routing::get(ServeDir::new("./static/img")).handle_error(
|
||||
|error: std::io::Error| {
|
||||
(
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("Unhandled internal error: {}", error),
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
.route(
|
||||
"/",
|
||||
service_method_routing::get(ServeFile::new("./static/index.html")).handle_error(
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 21 KiB |
@ -1,17 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>Svelte app</title>
|
||||
<title>SIWE Open ID Connect</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="stylesheet" href="/build/bundle.css" />
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
<script defer src="/build/bundle.js"></script>
|
||||
<link
|
||||
href="https://api.fontshare.com/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901,1,2&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user