@@ -151,6 +172,7 @@ onMounted(async () => {
.footer
height: auto
background-color: var(--midnight-black)
+ min-height: 72px
@media (min-width: 992px)
height: 450px
min-height: 450px
@@ -186,14 +208,14 @@ onMounted(async () => {
height: 72px
width: 100%
padding: 16px 48px
- border-radius: 24px 24px 0px 0px
- background: var(--grey, #858585)
+ border-radius: 16px 16px 0px 0px
+ box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.25)
+ background: var(--midnight-black, #0F0F0F)
bottom: -1px
position: fixed
display: flex
justify-content: space-around
align-items: center
- color: black
div
font-size: 40px
cursor: pointer
diff --git a/src/assets/contracts/test.json b/src/assets/contracts/test.json
new file mode 100644
index 0000000..3e6b270
--- /dev/null
+++ b/src/assets/contracts/test.json
@@ -0,0 +1,992 @@
+{
+ "contractName": "OurUniV3Pool",
+ "contractAddress": "0xCc08EECAD5cE5c47bD7B51385b701d00c8Bdfa90",
+ "abi": [
+ {
+ "inputs": [],
+ "stateMutability": "nonpayable",
+ "type": "constructor"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount",
+ "type": "uint128"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ }
+ ],
+ "name": "Burn",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount0",
+ "type": "uint128"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount1",
+ "type": "uint128"
+ }
+ ],
+ "name": "Collect",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount0",
+ "type": "uint128"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount1",
+ "type": "uint128"
+ }
+ ],
+ "name": "CollectProtocol",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "paid0",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "paid1",
+ "type": "uint256"
+ }
+ ],
+ "name": "Flash",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "uint16",
+ "name": "observationCardinalityNextOld",
+ "type": "uint16"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint16",
+ "name": "observationCardinalityNextNew",
+ "type": "uint16"
+ }
+ ],
+ "name": "IncreaseObservationCardinalityNext",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "uint160",
+ "name": "sqrtPriceX96",
+ "type": "uint160"
+ },
+ {
+ "indexed": false,
+ "internalType": "int24",
+ "name": "tick",
+ "type": "int24"
+ }
+ ],
+ "name": "Initialize",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "owner",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "indexed": true,
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "amount",
+ "type": "uint128"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ }
+ ],
+ "name": "Mint",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": false,
+ "internalType": "uint8",
+ "name": "feeProtocol0Old",
+ "type": "uint8"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint8",
+ "name": "feeProtocol1Old",
+ "type": "uint8"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint8",
+ "name": "feeProtocol0New",
+ "type": "uint8"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint8",
+ "name": "feeProtocol1New",
+ "type": "uint8"
+ }
+ ],
+ "name": "SetFeeProtocol",
+ "type": "event"
+ },
+ {
+ "anonymous": false,
+ "inputs": [
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "sender",
+ "type": "address"
+ },
+ {
+ "indexed": true,
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "indexed": false,
+ "internalType": "int256",
+ "name": "amount0",
+ "type": "int256"
+ },
+ {
+ "indexed": false,
+ "internalType": "int256",
+ "name": "amount1",
+ "type": "int256"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint160",
+ "name": "sqrtPriceX96",
+ "type": "uint160"
+ },
+ {
+ "indexed": false,
+ "internalType": "uint128",
+ "name": "liquidity",
+ "type": "uint128"
+ },
+ {
+ "indexed": false,
+ "internalType": "int24",
+ "name": "tick",
+ "type": "int24"
+ }
+ ],
+ "name": "Swap",
+ "type": "event"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount",
+ "type": "uint128"
+ }
+ ],
+ "name": "burn",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount0Requested",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount1Requested",
+ "type": "uint128"
+ }
+ ],
+ "name": "collect",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "amount0",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount1",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount0Requested",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount1Requested",
+ "type": "uint128"
+ }
+ ],
+ "name": "collectProtocol",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "amount0",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount1",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "factory",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "fee",
+ "outputs": [
+ {
+ "internalType": "uint24",
+ "name": "",
+ "type": "uint24"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "feeGrowthGlobal0X128",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "feeGrowthGlobal1X128",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ },
+ {
+ "internalType": "bytes",
+ "name": "data",
+ "type": "bytes"
+ }
+ ],
+ "name": "flash",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint16",
+ "name": "observationCardinalityNext",
+ "type": "uint16"
+ }
+ ],
+ "name": "increaseObservationCardinalityNext",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint160",
+ "name": "sqrtPriceX96",
+ "type": "uint160"
+ }
+ ],
+ "name": "initialize",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "liquidity",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "maxLiquidityPerTick",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ },
+ {
+ "internalType": "uint128",
+ "name": "amount",
+ "type": "uint128"
+ },
+ {
+ "internalType": "bytes",
+ "name": "data",
+ "type": "bytes"
+ }
+ ],
+ "name": "mint",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "amount0",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint256",
+ "name": "amount1",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "name": "observations",
+ "outputs": [
+ {
+ "internalType": "uint32",
+ "name": "blockTimestamp",
+ "type": "uint32"
+ },
+ {
+ "internalType": "int56",
+ "name": "tickCumulative",
+ "type": "int56"
+ },
+ {
+ "internalType": "uint160",
+ "name": "secondsPerLiquidityCumulativeX128",
+ "type": "uint160"
+ },
+ {
+ "internalType": "bool",
+ "name": "initialized",
+ "type": "bool"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint32[]",
+ "name": "secondsAgos",
+ "type": "uint32[]"
+ }
+ ],
+ "name": "observe",
+ "outputs": [
+ {
+ "internalType": "int56[]",
+ "name": "tickCumulatives",
+ "type": "int56[]"
+ },
+ {
+ "internalType": "uint160[]",
+ "name": "secondsPerLiquidityCumulativeX128s",
+ "type": "uint160[]"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "bytes32",
+ "name": "",
+ "type": "bytes32"
+ }
+ ],
+ "name": "positions",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "liquidity",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint256",
+ "name": "feeGrowthInside0LastX128",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint256",
+ "name": "feeGrowthInside1LastX128",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint128",
+ "name": "tokensOwed0",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "tokensOwed1",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "protocolFees",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "token0",
+ "type": "uint128"
+ },
+ {
+ "internalType": "uint128",
+ "name": "token1",
+ "type": "uint128"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "uint8",
+ "name": "feeProtocol0",
+ "type": "uint8"
+ },
+ {
+ "internalType": "uint8",
+ "name": "feeProtocol1",
+ "type": "uint8"
+ }
+ ],
+ "name": "setFeeProtocol",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "slot0",
+ "outputs": [
+ {
+ "internalType": "uint160",
+ "name": "sqrtPriceX96",
+ "type": "uint160"
+ },
+ {
+ "internalType": "int24",
+ "name": "tick",
+ "type": "int24"
+ },
+ {
+ "internalType": "uint16",
+ "name": "observationIndex",
+ "type": "uint16"
+ },
+ {
+ "internalType": "uint16",
+ "name": "observationCardinality",
+ "type": "uint16"
+ },
+ {
+ "internalType": "uint16",
+ "name": "observationCardinalityNext",
+ "type": "uint16"
+ },
+ {
+ "internalType": "uint8",
+ "name": "feeProtocol",
+ "type": "uint8"
+ },
+ {
+ "internalType": "bool",
+ "name": "unlocked",
+ "type": "bool"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "int24",
+ "name": "tickLower",
+ "type": "int24"
+ },
+ {
+ "internalType": "int24",
+ "name": "tickUpper",
+ "type": "int24"
+ }
+ ],
+ "name": "snapshotCumulativesInside",
+ "outputs": [
+ {
+ "internalType": "int56",
+ "name": "tickCumulativeInside",
+ "type": "int56"
+ },
+ {
+ "internalType": "uint160",
+ "name": "secondsPerLiquidityInsideX128",
+ "type": "uint160"
+ },
+ {
+ "internalType": "uint32",
+ "name": "secondsInside",
+ "type": "uint32"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "address",
+ "name": "recipient",
+ "type": "address"
+ },
+ {
+ "internalType": "bool",
+ "name": "zeroForOne",
+ "type": "bool"
+ },
+ {
+ "internalType": "int256",
+ "name": "amountSpecified",
+ "type": "int256"
+ },
+ {
+ "internalType": "uint160",
+ "name": "sqrtPriceLimitX96",
+ "type": "uint160"
+ },
+ {
+ "internalType": "bytes",
+ "name": "data",
+ "type": "bytes"
+ }
+ ],
+ "name": "swap",
+ "outputs": [
+ {
+ "internalType": "int256",
+ "name": "amount0",
+ "type": "int256"
+ },
+ {
+ "internalType": "int256",
+ "name": "amount1",
+ "type": "int256"
+ }
+ ],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "int16",
+ "name": "",
+ "type": "int16"
+ }
+ ],
+ "name": "tickBitmap",
+ "outputs": [
+ {
+ "internalType": "uint256",
+ "name": "",
+ "type": "uint256"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "tickSpacing",
+ "outputs": [
+ {
+ "internalType": "int24",
+ "name": "",
+ "type": "int24"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [
+ {
+ "internalType": "int24",
+ "name": "",
+ "type": "int24"
+ }
+ ],
+ "name": "ticks",
+ "outputs": [
+ {
+ "internalType": "uint128",
+ "name": "liquidityGross",
+ "type": "uint128"
+ },
+ {
+ "internalType": "int128",
+ "name": "liquidityNet",
+ "type": "int128"
+ },
+ {
+ "internalType": "uint256",
+ "name": "feeGrowthOutside0X128",
+ "type": "uint256"
+ },
+ {
+ "internalType": "uint256",
+ "name": "feeGrowthOutside1X128",
+ "type": "uint256"
+ },
+ {
+ "internalType": "int56",
+ "name": "tickCumulativeOutside",
+ "type": "int56"
+ },
+ {
+ "internalType": "uint160",
+ "name": "secondsPerLiquidityOutsideX128",
+ "type": "uint160"
+ },
+ {
+ "internalType": "uint32",
+ "name": "secondsOutside",
+ "type": "uint32"
+ },
+ {
+ "internalType": "bool",
+ "name": "initialized",
+ "type": "bool"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "token0",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ },
+ {
+ "inputs": [],
+ "name": "token1",
+ "outputs": [
+ {
+ "internalType": "address",
+ "name": "",
+ "type": "address"
+ }
+ ],
+ "stateMutability": "view",
+ "type": "function"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/assets/sass/base.sass b/src/assets/sass/base.sass
index 4de94c4..b34b56d 100644
--- a/src/assets/sass/base.sass
+++ b/src/assets/sass/base.sass
@@ -1,7 +1,6 @@
.bloodline-devider
font-size: 42px
text-align: center
- margin: 16px 0
@media (min-width: 992px)
margin: 24px 0
@@ -33,28 +32,6 @@
&.grey
background-color: var(--grey)
-.card
- display: block
- overflow: hidden
- overflow-wrap: break-word
- position: relative
- padding: 0
- text-decoration: none
- transition-duration: .28s
- transition-property: box-shadow,opacity,background
- transition-timing-function: cubic-bezier(.4,0,.2,1)
- z-index: 0
- border-color: rgba(var(--v-border-color),var(--v-border-opacity))
- border-style: solid
- border-width: 0
- border-radius: 16px
- box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
- background-color: $darkgrey
- @media (min-width: 992px)
- border-radius: 4px
- &.card--variant1
- border-radius: 0
-
.bloodline-token
height: 50px
width: 50px
diff --git a/src/assets/sass/buttons.sass b/src/assets/sass/buttons.sass
index 7196813..a7dea71 100644
--- a/src/assets/sass/buttons.sass
+++ b/src/assets/sass/buttons.sass
@@ -1,19 +1,18 @@
.btn
+ padding: 16px 24px
+ gap: 8px
+ border-radius: 14px
+ &.btn--disabled
+ background-color: #151515
+ color: #808080
+ cursor: not-allowed
+ &.black
+ background-color: var(--midnight-black)
&.btn-immortal
-
background-color: $purple
color: $button-color
font-size: 24px
- padding: 16px 24px
- gap: 8px
- border-radius: 14px
&:hover,&:focus,&:active
background-color: darken($purple, 10%),
cursor: pointer
- &.btn--disabled
- background-color: #151515
- color: #808080
- cursor: not-allowed
- &.black
- background-color: var(--midnight-black)
diff --git a/src/assets/sass/main.sass b/src/assets/sass/main.sass
index 8851af5..7fc9d52 100644
--- a/src/assets/sass/main.sass
+++ b/src/assets/sass/main.sass
@@ -19,7 +19,7 @@ body
font-family: 'Inter', sans-serif
.main
- padding-top: 120px
+ padding-top: 106px
@media (min-width: 992px)
padding-top: 208px
html
@@ -39,8 +39,8 @@ body
.container
margin-right: auto
margin-left: auto
- padding-right: 15px
- padding-left: 15px
+ padding-right: 16px
+ padding-left: 16px
@media (min-width: 992px)
max-width: 800px
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index d56bc1e..175db05 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -16,6 +16,7 @@ $purple: #4B0082
$midnight-black: #0F0F0F
$darkgrey: #202020
$grey2: #2D2D2D
+$dark-grey: #2D2D2D
$button-color: $white
$button-background-color: $black
@@ -32,14 +33,55 @@ $button-background-color: $black
--white: #{#F9F9FA}
--grey: #{#858585}
--grey2: #{$grey2}
+ --dark-grey: #{$dark-grey}
--purple: #{$purple}
--blood-color: #{$red}
--midnight-black: #{$midnight-black}
--black: #{$midnight-black}
--darkgrey: #{$darkgrey}
+
+//fonts
+.low-mid-text
+ font-family: Inter
+ font-size: 16px
+ font-style: normal
+ font-weight: 400
+ line-height: normal
+.mid-mid-text
+ font-family: Inter
+ font-size: 18px
+ font-style: normal
+ font-weight: 400
+ line-height: normal
+.mid-text
+ font-family: Inter
+ font-size: 24px
+ font-style: normal
+ font-weight: 400
+ line-height: normal
+.small-text
+ font-family: Inter
+ font-size: 14px
+ font-style: normal
+ font-weight: 400
+ line-height: normal
+.number-mobile
+ font-family: Inter
+ font-size: 24px
+ font-style: normal
+ font-weight: 400
+ line-height: normal
+ letter-spacing: 4.32px
+
// :root
// --font-size-text: 16px
// --font-size-title: 32px
// @media (min-width: 992px)
// --font-size-text: 24px
// --font-size-title: 36px
+
+.text-center
+ text-align: center
+
+.transparent
+ background-color: transparent
diff --git a/src/components/ClaimComponent.vue b/src/components/ClaimComponent.vue
new file mode 100644
index 0000000..b292d2f
--- /dev/null
+++ b/src/components/ClaimComponent.vue
@@ -0,0 +1,80 @@
+
+
+ Unclaimed
+
+
+
+
+
+
+
+
+
+
+
+ Stake & Claim Rest
+
+ Cancel
+
+
+
+
+ You can claim, once the cycle is over.
+
+
+
+ All Claimed
+
+
+
+
+
+
diff --git a/src/components/ConnectWallet.vue b/src/components/ConnectWallet.vue
index ec81a2c..52bebc0 100644
--- a/src/components/ConnectWallet.vue
+++ b/src/components/ConnectWallet.vue
@@ -38,14 +38,37 @@
:price="token.balanceOf"
>