git.stevedylan.dev

chore: updated styles for contract calls 94d43ee6

Steve · 2025-09-21 10:17 2 file(s) · +12 −2

site/index.html +8 −1

    </div>

    <div class="flex flex-col items-start gap-4">
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex items-center justify-center">
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
        <contract-call
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
          chain-id="0xaa36a7"
          method-name="increment"
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
          button-text="Increment"
        ></contract-call>
        <contract-call
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
          chain-id="0xaa36a7"
          method-name="number"
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
          button-text="Current Count"
        ></contract-call>
      </div>
      <div class="text-xl text-[#ccc]">contract-call</div>

src/components/contract-call.js +4 −1

					border: 1px solid rgba(255, 255, 255, 0.1);
					border-radius: var(--border-radius);
					color: var(--color-foreground);
					min-width: 300px;
					width: 300px;
				}

				.contract-info {

					word-break: break-all;
					border-color: ${this.getStatusColor()};
					color: ${this.getStatusColor()};
					max-width: 300px;
					overflow-wrap: break-word;
					white-space: pre-wrap;
				}

				.loading {

52	52		</div>
53	53
54	54		<div class="flex flex-col items-start gap-4">
55		-	<div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex items-center justify-center">
	55	+	<div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
56	56		<contract-call
57	57		contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
58	58		chain-id="0xaa36a7"
59	59		method-name="increment"
60	60		abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
61	61		button-text="Increment"
	62	+	></contract-call>
	63	+	<contract-call
	64	+	contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
	65	+	chain-id="0xaa36a7"
	66	+	method-name="number"
	67	+	abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
	68	+	button-text="Current Count"
62	69		></contract-call>
63	70		</div>
64	71		<div class="text-xl text-[#ccc]">contract-call</div>

431	431		border: 1px solid rgba(255, 255, 255, 0.1);
432	432		border-radius: var(--border-radius);
433	433		color: var(--color-foreground);
434		-	min-width: 300px;
	434	+	width: 300px;
435	435		}
436	436
437	437		.contract-info {

485	485		word-break: break-all;
486	486		border-color: ${this.getStatusColor()};
487	487		color: ${this.getStatusColor()};
	488	+	max-width: 300px;
	489	+	overflow-wrap: break-word;
	490	+	white-space: pre-wrap;
488	491		}
489	492
490	493		.loading {