add background image to app
This commit is contained in:
RcleydsonR committed
1 parent
fefebcf91e
commit
85d76c9e42
5 files changed
+67
-27
No files matched your search
+3
-5
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import TopBar from './components/TopBar.vue';
|
||||
|
||||
import TopBar from "./components/TopBar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TopBar/>
|
||||
<TopBar />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<svg width="1440" height="1000" viewBox="0 0 1440 1000" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g clip-path="url(#clip0_287_693)">
|
||||
<rect width="1440" height="1024" fill="#1F201F"/>
|
||||
<g opacity="0.95" filter="url(#filter0_f_287_693)">
|
||||
<path d="M-201.654 473.827C-222.477 444.181 -135.601 330.211 -89.5597 276.932C-49.4017 218.853 43.3929 96.4789 93.3068 71.617C155.699 40.5396 210.838 35.3775 317.517 -11.2546C424.196 -57.8866 502.694 -55.2624 735.23 -98.2918C967.765 -141.321 845.508 -108.616 1004.93 -17.1029C1164.34 74.4104 1065.11 95.9907 1062.91 240.162C1060.7 384.333 1011.31 298.816 950.963 359.294C890.614 419.773 745.865 102.857 659.906 180.422C573.948 257.987 603.99 222.804 631.303 515.382C719.043 538.676 669.559 513.737 786.064 531.038C902.568 548.34 841.342 543.924 898.86 627.747C956.378 711.57 920.305 760.663 763.535 930.713C606.764 1100.76 678.128 877.105 556.37 836.495C434.612 795.884 469.116 795.022 364.298 774.382C259.479 753.742 273.152 715.643 190.459 810.604C107.766 905.565 136.335 858.035 9.50706 890.789C-117.321 923.542 -42.076 853.633 -82.654 789.781C-123.232 725.928 -87.7013 671.525 -128.961 584.314C-170.22 497.104 -175.626 510.884 -201.654 473.827Z" fill="#34D399"/>
|
||||
<path d="M639.724 600.298C626.679 563.102 622.703 489.667 646.882 420.45L639.842 401.512C671.313 366.898 740.22 289.289 764.074 255.768L802.907 201.199C816.776 181.71 839.659 149.554 1132.23 63.0568C1212.05 64.0728 1182.68 62.6322 1300.64 88.0195C1418.6 113.407 1363.12 119.825 1461.61 193.924C1560.1 268.023 1525.73 259.72 1577.35 355.912C1628.96 452.104 1601.61 399.772 1588.77 495.766C1575.93 591.759 1566.81 575.743 1508.37 665.34C1449.93 754.937 1434.08 734.495 1384.55 782.741C1335.02 830.986 1336.46 807.61 1287.13 841.684C1237.81 875.759 1225.38 871.872 1162.59 897.092C1099.81 922.313 1108.65 908.817 1002.18 923.89C895.704 938.964 940.587 883.368 856.111 875.001C771.635 866.635 787.79 830.052 718.951 784.761C650.113 739.471 687.961 736.474 673.514 707.655C659.066 678.835 652.77 637.495 639.724 600.298Z" fill="#60A5FA"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:color-burn" opacity="0.4" filter="url(#filter1_f_287_693)">
|
||||
<path d="M626.141 -22.8748C644.643 -46.9528 690.436 -81.2177 745.481 -96.498L754.731 -109C790.502 -104.833 870 -96.498 901.824 -96.498H953.63C972.133 -96.498 1002.66 -96.498 1183.06 44.2659C1216.36 93.348 1204.8 74.8264 1238.56 157.71C1272.33 240.594 1244.58 209.571 1238.56 301.715C1232.55 393.86 1223.3 369.319 1183.06 442.479C1142.82 515.639 1165.02 476.281 1097.49 510.083C1029.95 543.885 1036.43 531.383 953.63 534.624C870.833 537.865 877.309 519.344 825.04 510.083C772.771 500.822 788.498 491.561 745.481 476.281C702.463 461.001 699.687 451.74 656.67 424.421C613.652 397.101 626.141 396.638 571.097 338.296C516.053 279.953 571.097 283.194 540.568 228.092C510.04 172.991 540.568 166.971 540.568 105.387C540.568 43.8028 558.608 65.5656 571.097 44.2659C583.586 22.9661 607.639 1.20325 626.141 -22.8748Z" fill="#93C5FD"/>
|
||||
<path d="M-2.07087 334.224C-12.8709 315.424 73.0958 262.391 117.429 238.224C158.096 210.724 250.029 153.724 292.429 145.724C345.429 135.724 388.429 139.224 477.929 125.724C567.429 112.224 626.929 122.724 811.929 125.724C996.929 128.724 897.929 132.724 1003.93 201.724C1109.93 270.724 1030.43 271.224 1003.93 350.724C977.429 430.224 954.429 377.224 897.929 403.724C841.429 430.224 785.429 238.224 706.429 271.224C627.429 304.224 656.429 288.224 626.929 453.224C689.929 476.224 656.429 456.724 742.429 479.724C828.429 502.724 782.429 493.224 811.929 546.224C841.429 599.224 805.429 622.224 656.429 698.224C507.429 774.224 600.429 658.724 514.429 622.224C428.429 585.724 454.929 589.224 378.429 565.724C301.929 542.224 318.929 522.724 239.429 565.724C159.929 608.724 189.929 585.724 87.4292 589.224C-15.0708 592.724 54.4292 562.724 34.4292 522.724C14.4292 482.724 50.9292 456.724 34.4292 403.724C17.9292 350.724 11.4291 357.724 -2.07087 334.224Z" fill="#34D399"/>
|
||||
<path d="M139.079 -13.5933C157.013 -33.1151 272.628 60.3273 328.195 109.489L352.034 127.701C402.248 156.414 507.751 223.506 528.049 262.167C553.421 310.494 551.898 301.78 571.911 379.361C591.924 456.941 634.429 422.717 700.385 473.104L865.671 599.374C947.123 661.599 939.887 676.836 952.73 807.455C965.572 938.074 851.31 809.255 759.13 738.835C666.951 668.415 732.907 718.802 636.339 703.545C539.77 688.288 576.259 678.411 410.067 564.033C243.875 449.654 283.902 412.908 246.583 347.274C209.263 281.641 238.831 308.004 201.62 275.173C164.41 242.341 137.172 201.398 84.6605 123.529C32.149 45.6607 116.661 10.8088 139.079 -13.5933Z" fill="#FB923C"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.5">
|
||||
<rect y="-11" width="1440" height="1028" fill="url(#pattern0)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_287_693" x="-494.823" y="-407.035" width="2392.4" height="1690.74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_287_693"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_287_693" x="-293.001" y="-399" width="1838" height="1552.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_287_693"/>
|
||||
</filter>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_287_693" transform="translate(0 0.0100778) scale(0.0005 0.000700389)"/>
|
||||
</pattern>
|
||||
<clipPath id="clip0_287_693">
|
||||
<rect width="1440" height="1024" fill="white"/>
|
||||
</clipPath>
|
||||
<image id="image0_287_693" width="2000" height="1399" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAV3CAIAAACG3GNRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDExNi4xNjQ3NjYsIDIwMjEvMDIvMTktMjM6MTA6MDcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTE2OTdBQzgxRjExRUNBMTk3QjczNUFCQkJDREVGIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTE2OTc5QzgxRjExRUNBMTk3QjczNUFCQkJDREVGIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMDIwIE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSIyNEE5MThCRjQwQzEwNDNGNjdBMDQ0OEFFMDlFRjVCNSIgc3RSZWY6ZG9jdW1lbnRJRD0iMjRBOTE4QkY0MEMxMDQzRjY3QTA0NDhBRTA5RUY1QjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz69AeqQAC8D+ElEQVR42kzdWZOeVdX/cTEOjzOOqDggIiTp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 truncated
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 MiB |
+3
-1
@@ -5,8 +5,10 @@
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
padding: 2rem 4rem;
|
||||
height: 100vh;
|
||||
background-image: url( './bg.svg' );
|
||||
background-size: cover;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -14,9 +14,12 @@ const connectMetaMask = () => {
|
||||
const formatWalletAddress = (): string => {
|
||||
const walletAddressLength = walletAddress.value.length;
|
||||
const initialText = walletAddress.value.substring(0, 5);
|
||||
const finalText = walletAddress.value.substring(walletAddressLength - 6, walletAddressLength - 1);
|
||||
const finalText = walletAddress.value.substring(
|
||||
walletAddressLength - 6,
|
||||
walletAddressLength - 1
|
||||
);
|
||||
return `${initialText} ... ${finalText}`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,7 +42,7 @@ const formatWalletAddress = (): string => {
|
||||
Conectar carteira
|
||||
</button>
|
||||
<span v-if="walletAddress" class="text-gray-50">
|
||||
{{formatWalletAddress()}}
|
||||
{{ formatWalletAddress() }}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+19
-18
@@ -1,28 +1,29 @@
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { ethers } from "ethers";
|
||||
|
||||
const connectProvider = async (): Promise<ethers.providers.Web3Provider | null> => {
|
||||
const etherStore = useEtherStore();
|
||||
const window_ = window as any;
|
||||
const connection = window_.ethereum;
|
||||
let provider: ethers.providers.Web3Provider | null = null;
|
||||
const connectProvider =
|
||||
async (): Promise<ethers.providers.Web3Provider | null> => {
|
||||
const etherStore = useEtherStore();
|
||||
const window_ = window as any;
|
||||
const connection = window_.ethereum;
|
||||
let provider: ethers.providers.Web3Provider | null = null;
|
||||
|
||||
if (connection) {
|
||||
provider = new ethers.providers.Web3Provider(connection);
|
||||
if (connection) {
|
||||
provider = new ethers.providers.Web3Provider(connection);
|
||||
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const balance = await provider.getBalance(walletAddress[0]);
|
||||
const walletAddress = await provider.send("eth_requestAccounts", []);
|
||||
const balance = await provider.getBalance(walletAddress[0]);
|
||||
|
||||
etherStore.setProvider(provider);
|
||||
etherStore.setWalletAddress(walletAddress[0]);
|
||||
etherStore.setBalance(Number(balance));
|
||||
etherStore.setProvider(provider);
|
||||
etherStore.setWalletAddress(walletAddress[0]);
|
||||
etherStore.setBalance(Number(balance));
|
||||
|
||||
connection.on('accountsChanged', (accounts: string[]) => {
|
||||
etherStore.setWalletAddress(accounts[0])
|
||||
});
|
||||
} else console.log("Browser não suporta conexão com metamask");
|
||||
connection.on("accountsChanged", (accounts: string[]) => {
|
||||
etherStore.setWalletAddress(accounts[0]);
|
||||
});
|
||||
} else console.log("Browser não suporta conexão com metamask");
|
||||
|
||||
return provider;
|
||||
};
|
||||
return provider;
|
||||
};
|
||||
|
||||
export default { connectProvider };
|
||||
Reference in new issue
Block a user