Migrate to new templating engine and added the .heex extention to tailwind config to extract styles

This commit is contained in:
nha dev 2022-04-13 15:56:31 +05:30
parent 516a6fd6f4
commit 7d832ba545
10 changed files with 56 additions and 74 deletions

View File

@ -3,18 +3,19 @@ const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
'../lib/**/*.ex',
'../lib/**/*.leex',
'../lib/**/*.eex',
'./js/**/*.js'
'../lib/**/*.ex',
'../lib/**/*.leex',
'../lib/**/*.heex',
'../lib/**/*.eex',
'./js/**/*.js'
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
fontFamily: {
sans: ['Inter', defaultTheme.fontFamily.sans],
}
},
},
},
variants: {
extend: {

View File

@ -32,7 +32,7 @@ config :zcash_explorer, ZcashExplorerWeb.Endpoint,
config :zcash_explorer, Zcashex,
zcashd_hostname: "localhost",
zcashd_port: "38232",
zcashd_port: "8232",
zcashd_username: "zcashrpc",
zcashd_password: "changeme",
vk_cpus: "0.2",

View File

@ -1,6 +1,5 @@
<main class="py-4">
<div class="grid grid-cols-1 mx-8">
<%= live_render(@conn, ZcashExplorerWeb.BlockChainInfoLive) %>
</div>
</main>

View File

@ -1,13 +1,12 @@
<div class="mx-8 my-4">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
Broadcast Zcash Transaction
</h3>
</h3>
<%= if get_flash(@conn, :error) do %>
<div class="rounded-md bg-red-50 p-4">
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/x-circle -->
@ -34,7 +33,6 @@
<%= if get_flash(@conn, :info) do %>
<div class="rounded-md bg-green-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
@ -43,19 +41,22 @@
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-green-800">
Transaction broadcasted
</h3>
<div class="mt-2 text-sm text-green-700">
<p>
Transaction Id:
<%= get_flash(@conn, :info) %>
</p>
</div>
<div class="mt-4">
<div class="-mx-2 -my-1.5 flex">
<a href="/transactions/<%= get_flash(@conn, :info) %>">
<a href="/transactions/{get_flash(@conn, :info)}">
<button type="button" class="bg-green-50 px-2 py-1.5 rounded-md text-sm font-medium text-green-800 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
View transaction
</button>
@ -63,22 +64,21 @@
</div>
</div>
</div>
</div>
</div>
<% end %>
<form class="space-y-8" action="/broadcast" method="post">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div>
<form class="space-y-8" action="/broadcast" method="post">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600">
Paste the raw transaction here in hex format to broadcast it over the Zcash network.
</p>
<input type="hidden" value="<%= @csrf_token %>" name="_csrf_token"/>
<textarea id="broadcast" name="tx-hex" rows="22" class="w-full shadow-sm bg-indigo-400 bg-opacity-5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400 "></textarea>
<input type="hidden" value="{@csrf_token}" name="_csrf_token"/>
<textarea id="broadcast" name="tx-hex" rows="22" class="w-full shadow-sm bg-indigo-400 bg-opacity-5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400 ">
</textarea>
<div class="pt-5 pb-5">
<div class="flex justify-center">
@ -86,8 +86,7 @@
Broadcast transaction
</button>
</div>
</div>
</div>
</div>
</form>
</form>
</div>

View File

@ -1,9 +1,8 @@
<div class="mx-8 my-4">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
Payment Disclosure
</h3>
</h3>
<%= if get_flash(@conn, :error) do %>
@ -53,14 +52,11 @@
<%= if @disclosed_data do %>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Payment Disclosure
</h3>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200">
@ -175,29 +171,25 @@
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 py-4">
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600 py-4">
Paste the Zcash payment disclosure hexdata here to reveal details of a shielded payment.
</p>
</p>
<form class="space-y-8" action="/payment-disclosure" method="post">
<div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
<div>
<input type="hidden" value="<%= @csrf_token %>" name="_csrf_token"/>
<textarea id="disclosure" name="disclosure-hex" rows="22" class="w-full shadow-sm bg-indigo-400 bg-opacity-5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400">
</textarea>
<form class="space-y-8" action="/payment-disclosure" method="post">
<div class="space-y-8 divide-y divide-red-200 sm:space-y-5">
<input type="hidden" value="{@csrf_token %}" name="_csrf_token"/>
<textarea id="disclosure" name="disclosure-hex" rows="22" class="w-full shadow-sm bg-indigo-400 bg-opacity-5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400">
</textarea>
</div>
<div class="pt-5 pb-5">
<div class="flex justify-center">
<button type="submit" class="flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Disclose transaction
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</form>
</div>

View File

@ -2,7 +2,6 @@
<div>
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<dt>
<div class="absolute bg-indigo-500 rounded-md p-3">
@ -40,52 +39,42 @@
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<dt>
<div class="absolute bg-indigo-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg> </div>
<p class="ml-16 text-sm font-medium text-gray-500 truncate">Mempool Transactions</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<p class="ml-16 text-sm font-medium text-gray-500 truncate">Mempool Transactions</p>
</dt>
<dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
<%= live_render(@conn, ZcashExplorerWeb.MempoolInfoLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href="/mempool" class="font-medium text-indigo-600 hover:text-indigo-500">View mempool transactions<span class="sr-only"> View mempool transactions</span></a>
</div>
</div>
</div>
</dd>
</div>
<div class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden">
<dt>
<div class="absolute bg-green-500 rounded-md p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
</div>
<p class="ml-16 text-sm font-medium text-gray-500 truncate">Blockchain Size</p>
</dt>
<dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
<%= live_render(@conn, ZcashExplorerWeb.BlockChainSizeLive) %>
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href="/blockchain-info" class="font-medium text-indigo-600 hover:text-indigo-500">View blockchain info<span class="sr-only"> View blockchain info</span></a>
</div>
</div>
</div>
</div>
</dd>
</div>
</dl>
</div>
</div>
<div class="grid gap-4 grid-cols-1 md:grid-cols-1 mx-8 my-2">
<div>
@ -95,10 +84,12 @@
<%= live_render(@conn, ZcashExplorerWeb.RecentBlocksLive) %>
</div>
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900 py-3">
Recent Transactions
</h3>
<%= live_render(@conn, ZcashExplorerWeb.RecentTransactionsLive) %>
</div>
</div>

View File

@ -35,7 +35,7 @@
<p class="mt-1 mb-2 max-w-2xl text-sm text-gray-600">
Paste the viewing key, click on the "Start Importing" button and grab a coffee!
</p>
<input type="hidden" value="<%= @csrf_token %>" name="_csrf_token"/>
<input type="hidden" value="{@csrf_token %}" name="_csrf_token"/>
<textarea id="broadcast" name="vkey" rows="4" class="w-full shadow-sm bg-indigo-400 bg-opacity-5 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md font-mono text-green-400 "></textarea>
@ -43,7 +43,7 @@
<div>
<label for="height" class="block text-sm font-medium text-gray-700">Start Height</label>
<div class="mt-1">
<input type="text" name="scan-height" id="scan-height" class="shadow-sm focus:ring-indigo-500 bg-opacity-5 focus:border-indigo-500 block w-1/4 sm:text-sm border-gray-300 bg-indigo-400 rounded-md text-green-400 font-mono" placeholder="height" value="<%= @height %>">
<input type="text" name="scan-height" id="scan-height" class="shadow-sm focus:ring-indigo-500 bg-opacity-5 focus:border-indigo-500 block w-1/4 sm:text-sm border-gray-300 bg-indigo-400 rounded-md text-green-400 font-mono" placeholder="height" value="{ @height }">
</div>
</div>